Lithosphere The Lithium Community

Lithys 2018: Barclays US - Digital Design Excellence

Lithys 2018: Barclays US - Digital Design Excellence

Lithys 2018: Barclays US - Digital Design Excellence

 

Barclays.JPG

Company: Barclays

Company background: Barclays is the 9th largest credit card issuer in the US. We believe that building community environments supports our credit card products and creates a differentiated customer experience through enhanced support and engagement.

Barclays Travel Community: Barclays Arrival® cardmembers and non-cardmembers are invited to join a unique travel centric community in which members can share their travel experiences and earn miles that can be redeemed for travel rewards or e-giftcard(s) for engaging in community activities. Lithium’s new responsive design platform has vastly improved the user experience for Barclays Community members, enabling them to participate, share and engage on their mobile devices as they are enjoying, or searching for travel adventures.

Contact: Genea Delaware

Title: Manager, Digital Community

Related URLs:  Barclays Travel Community

Lithy category: Digital Design Excellence

 

The overarching vision for the responsive redesign was to support cardmember and community member travel moments from virtually anywhere, through mobile optimization and modern design.

Our Community & Digital Goals: 

 The vision of the Barclays Travel Community is to “create a platform for passionate travelers to share, inspire and reward themselves and others.” Since the community’s launch in 2013, Lithium’s platform enhancements continue to help us forge deeper relationships with our members, while also strengthening the connection amongst other travel enthusiast through modernized optimizations.

Our community is unique because it not only provides an outlet for community members to document and share their travel experiences, it rewards their passions by awarding members Participation Miles back to their Barclays Arrival Card and e-giftcards that can be used for future excursions.

Previous Design: 

01_Old Design - Travel Community.jpg 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

NEW Responsive Design: 

02 New Design -Travel Community.jpg

Our recent responsive redesign project focused on three main areas:

 

    • Business Objectives: Increase engagement and participation of cardmembers and community members and develop areas on the site to expand our super-user strategies and build influencer relationships. Grow the usage of the discussion board to address the FAQs that cardmembers, or potential cardmembers, have about the Barclays Arrival credit cards. Our objective is to provide relevant content that will deflect calls away from our call centers.

 

    • Community Member Benefits: Community members are at the heart of what we do, so it was imperative to modernize and streamline the user. We developed an efficient process for uploading stories, mobile-optimized and with enhanced search capabilities to make travel content easier to explore. We re-evaluated our ranks and badge structure to create a greater focus on gamification and revamped the discussion boards to make it easier for users to find, explore and post. And, because our users are proficient travelers, who take pride in their stories and knowledge, we wanted a profile of a user to become a sense of pride.  

 

    • Data & Content: The redesign goals also focused on improving the quality of UGC and enhance the discussion board experience. We modified the homepage to feature curated content more prominently vs. only having UGC content post in real time. New social sharing capabilities enable users to easily share community content. In the redesign model, we laid out a workflow for how we can use community feedback to inform product changes, or marketing strategy, back to the product owners.

These three pillars helped focus our efforts on our redesign project and utilize the latest improvements and capabilities of the Lithium responsive platform.

Our Unique Community Design Elements 
Our new, responsive design provides a sleek, sophisticated layout that inspires exploration by emphasizing the varied and vibrant photos within travel stories and blog posts. The content was completely restructured on the homepage for desktop and mobile:

Homepage.jpgTravel Community Mobile.jpg.png

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

The slideshow “hero” area allows Community Managers and Content Strategists to easily adjust and promote a variety of versatile content. In addition to highlighting community content, we’ve utilized this space to promote our suite of products, which has generated organic traffic to our site resulting in high quality conversions.      

Travel Community Hero Welcome.pngBarclays Travel Community ‘Hero’ Banner— Join/Login CTA

 

Hero Banner AP.pngBarclays Arrival Premier ‘Hero’ Banner – Product Promotion 

 

  • Users can easily navigate the four featured content areas:

Explore the Community.pngBarclays Travel Community Featured Content Areas on homepage

 

  • Discussion boards and their contributors are featured prominently at the top of the homepage. This type of “front page” exposure for contributors helps to reinforce the intrinsic value of the Travel Community.  


Discussion Board Post.pngBarclays Travel Community Featured Discussion Board Content (topic kudos and page views display)

 

  • Gamification display featuring Top Community Members encourages greater participation and allows Community Managers to highlight active members. 

 Featured Community Members.pngBarclays Travel Community Highlighting Active Members

 

  • Mobile View:
    The responsive elements of the platform give our teams the capability to structure the layout in a consistent manner while staying true to the single purpose of “inspiring travel.” The mobile experience was vastly improved with the various modals stacked and the streamlined navigation within Travel Stories (viewing photos and map details).

Gamification.pngBarclays Travel Community Travel Stories Mobile view

Iconography: We also deconstructed our iconography throughout the site to make the experience consistent. Icons for badges were created with a similar palette that also prominently featured the uptick of volumes for each badge. 

 

Badges.pngIconography.pngBarclays Travel Community Badges

 

Enhancements: Our icons used to pin travel details to the Google maps integration were streamlined and redesigned so it was simple for users to see what type of details (e.g. restaurants, hotels, entertainment, family activities, sporting events) were available to them when reading a travel story.

Details.pngBarclays Travel Community “Story Details”Map.pngPersonalized Travel Map

 

 
Bookmarks.pngTravel Bookmarks: This capability helps users keep track of travel stories that peak their interest and serves as a trip planning reference pointEpic Train Rides Blog.pngBloggers have their own bio page that lists a history of articles they’ve written for the Travel Community. Each blogger assigns tags (key word labels) to their featured article so users can easily access travel blogs.

Blogger Profile.pngBarclays Travel Community Blogger Profile page (expanded)

 

Best Of the Community.pngBarclays Travel Community “Best of” section on our homepage – users can easily explore the top-curated content in the community

 

Barclays Travel Community Blueprint

Brainstorm sessions – and lots and lots of post-it notes! Our community team, product owners, tech folks and the Lithium core team huddled together to analyze the key stakeholders related to the Travel Community. This post-it note and drawing exercise (literally drawing) stretched the teams to remove all preconceived notions about what the Travel Community “was” and “what it could become.”

Keystakeholders.jpgDefining Key Stakeholders

 We identified four key user groups and then moved forward with mapping out what each of those groups meant to each other (aka, a “collaboration matrix”).

Activity Grid.pngBarclays Travel Community Collaboration Matrix

We analyzed each stakeholder group. For example, we looked at our Active Members – who they were, why they would visit our site, the reasons they might only explore, what would inspire them to post or contribute, what would make them return again and again. We built out a matrix that we could use in the future when mapping content strategy and marketing plans:

Stakeholderbehaviors.pngBarclays Travel Community Matrix categorizing key stakeholder behaviors

 

Merged our three pillars with designs: We then came back around to the three pillars we identified in the beginning phase of this project and started to map out functionality and UX capabilities:

  • Better search and improved engagement with discussions:

Explore the Community_Search.png
Travel Stories Relevant Content Wayfinding.png

 

 

Created a profile hub and activity feed as a personal source of pride to encourage repeat visits – and to improve gamification mechanics to increase engagement.

Profile Page.pngBarclays Travel Community User Profile

 

  • Leveraged Lithium-standard discussion engine to make forum management simple and upgradeable and utilize tagging structure more efficiently. And improve wayfinding through breadcrumb navigation. 

Arrival Board.pngBarclays Travel Community Product Discussion Board page

 

  • We condensed the travel story upload process into two steps and improved image uploading and image galleries with the mobile photographer in mind.

Two Step Upload.pngTwo-Step Story Upload ProcessStory Upload Process.pngStory Image Galleries

 

  • We created consistent design patterns for more efficient development and to provide a space where “travel stories” become unique individual travel blogs for users to stand out; resulting in better user recognition.
  • Developed “travel stories” landing page to expand community homepage to feature valuable content from various areas of the site.  

  Travel Stories Page.pngBarclays Travel Community ‘Travel Stories’ page

 

Moving at the speed of our customers - Responsive Redesign Results

Our community has been thriving since our July 2017 relaunch:

  • 1766% increase in mobile registrations
  • 126% increase in mobile page views, which is 4x our initially projected metrics 
  • 215% increase in average annual registrations since launch
  • 646% increase in discussions posts, which is 25x our initially projected metrics 
  • 464% increase in kudos given/received
  • 275% increase in page views

 

Page Views.pngJuly 2017- Barclays Travel Community Page Views

 Page Views 2.pngJuly 2018 - Barclays Travel Community Page Views

 

  • 215% increase in average annual registrations since launch
  • 184% increase in engagements as a result of our modernized design, easily accessible content and simplified upload process
  • 138% increase in average annual travel stories uploaded due to streamlined mobile experience
  • 131% increase discussion page views

 

 

Travel Community Members love the new design and mobile optimizations: 

Feedback.png