Liberty Travel Redesign & Iteration

Introduction

Liberty Travel launched the brand new site at the end of July 2018 with modern looks and amazing features on the web that improved the user experience of the site and help the whole business growing efficiently. However, as one of the most important part of Liberty Travel Business, the retail store pages were still keeping the old style and weren’t capable to help users looking for specific stores, the store information they want to know or contacting with the store consultants. This downside of the old store pages not only hurt the business but also brought poor user experience to the Liberty Travel new site. 

Besides, while we are still developing the Liberty Travel new site with new features and information, letting users enable to contact with our consultants and get the deals they want is priority since the end goal of the Liberty Travel site is to bring more customers to our consultants and give them the best service. Meanwhile, store page is also one of the main way for users to get to know our consultants and contact with them. 

Therefore, the redesign of the store pages is necessary and urgent for Liberty Travel site’s web and mobile experience, which will reorganize and present all information and features (old and new) in a more accessible, findable and user-friendly way. 

This store page redesign project also includes the extended project – designing new consultant pages to show users our professional consultants’ profiles and stories, as well as provide users multiple ways to connect with the consultant they like. 

Part 1: Store Page Redesign

1. Research on Different Business Retail Store Search and Landing Pages

I picked four business from different industries to do research about what they show in their retail store pages.

  • Apple (Tech Firm)
  • Century 21 (Shopping Plaza)
  • Target (Grocery+Market)
  • Nike (Athletic Brand)
Summary:
  1. SEARCH PAGE: Geo-locate to show users their nearest stores in the search landing page.
  2. SEARCH PAGE: Map needs to have clear signifier providing store information and way to contact.
  3. SEARCH PAGE: Search result provides clear store opening time, address, phone number, distance and obvious CTAs leading users to store page or connect with store stuffs. 
  4. STORE PAGE: List what users are looking for at the first place, such as what service the store provides, who they can contact with and what kind of deals are available now.
2. Store Search Page Problems & Solutions

Search page problem 1: Old style, nonfunctional features like geo-locating.


Search page problem 2: Disconnection between store info and map, which didn’t help users locating where exactly the store they are looking for is.


Search page design solution:

Auto geo-locate: Once users entered the search page, the site will list ten nearest stores for users according to their current geo-location.

Implement a clear visual hierarchy: Guide users towards their ideal action which contribute to conversion goals in a major way. 

Using contrasting colors: With good contrast, the button stands out amongst the other elements and demands users’ attention. 

Providing signifier: By adding pop-up feature in the right map when users hover to a store in the left list, users are able to know where exactly the store is while they can book appointments with the consultants immediately.

3. Analyze Previous store page information architecture
Old Store Page Layout – Desktop & Mobile

After evaluating the previous store pages with the web development team and communicating with staffs who work in the retail store, we decided to come up with the next version of the store pages. The new version will not only match the new Liberty Travel styleguide, more importantly, it will sport a much better user experience and come packed with a more clear content layout.

4. Revised Information Architecture

Landing page is a collection of information pieces serving user needs. A good information architecture organizes and shows the content in a user-friendly way that is easy to get information, meets user goals and can be scaled as the business grows.

So what did I change? Why?

1). Desktop

  • Using two column layout to show store brief information and map side by side. In this case, users can access to the store details immediately.
  • Sorting store information, service into accordion, which will save the page space to avoid an overlong page.
  • Pushing “team members” and “vacation deals” sections up close to page header, which help users reach an appropriate consultant and know what good deal is on sale now quickly.

2). Mobile: hide any information that isn’t necessary to show on the mobile screen. For example,

  • Location map – most mobile users will use other map apps to help them navigating, so we change the visible map to a link which connects users to google map.

While being consistent with the desktop, it’s important to put enough content and useful information for users’ first view of the mobile screen since mobile screen is shorter and tighter. In that case, users will have higher possibility to be willing to scroll down to read more stuff.

New store detail page layout – Desktop & Mobile
5. New Design

Sketching Wireframes

Store Landing Page v1 & v2

Responsive Prototypes

Desktop Search Page Old vs New
Mobile Search Page Old vs New
Desktop Store Detail Page Old vs New
Mobile Store Detail Page Old vs New

Part 2. Consultant Page Iteration

1. Competitor Analysis
Interesting Leading Ideas:

Places to list related consultants: any possible place in the site that users will look for a consultant should have a link to the consultant search page.

Look for a consultant: provide an easy, convenient and fast way to help users sorting to get the consultant who fits the most.

Consultant profile page:

1). Personalized profile page – let consultants behave like users’ friend by showing their stories in a friendly way.

2). Show CTA anytime and obviously

2. User Flow
3. Sketching Wireframe (Mobile First)
4. UI Components
  • Search page using small card module to briefly list consultant info, leaving users simple impression about the person.
  • Popup Model to filter consultants
    • letting users decide their large-scale destination first.
    • using photo chips style to connect users with real destination.
  • Contact card serves as a strong utility: The left consultant info card will move down as users scroll down, which allows users to easily contact the consultant while they are reading the stories.
  • Showing consultant recommended / favorite destination photo as banner to attract users, or even strike their chord.
5. Final Prototype (Responsive)

Check out the interactive prototype here:

Mobile: https://invis.io/P4U3XARTM8B

Desktop: https://invis.io/CTU4I3W5DRP