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)
- SEARCH PAGE: Geo-locate to show users their nearest stores in the search landing page.
- SEARCH PAGE: Map needs to have clear signifier providing store information and way to contact
- 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.
- STORE PAGE: Page layout should follow the information hierarchy and list based on how comfortable users scale a page (F-shaped scanning pattern) and what the business emphasize.
2. Analyze Previous store page information architecture
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.
3. 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?
- Put store images in the top position so that users will feel more welcome when they come to the landing page of the store they are looking for.
- In desktop, having a visible map is still important since the next step we want to lead users to is going into the retail store. Thus, having a geo-located map is necessary so I put it right next to the contact section.
- Sorting store manager information into the store introduction section, which will save the page space to avoid an overlong page.
2). Mobile: hide any information that isn’t necessary to show on the screen at first. 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.
4. UI 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.
5. Design Iteration
Part 2. Consultant Page Iteration
1. Competitor Analysis
Interesting Leading Ideas:
Find a consultant: any possible place in the site that users will look for a consultant should have a link to the consultant search page.
Consultant search page: provide user-centered and easy-to-use filter options.
Consultant profile page:
1). Personalized page – hero image based on the destination the user is looking for. Default image if they did not find the consultant page through destination pages.
2). Show CTA anytime and obviously – consultants’ headshots and contact buttons position well as a toolbar in the middle of the page and are sticky while scrolling down. Serves as a strong utility.
2. User Flow
3. Sketching Wireframe (Mobile First)
4. UI Components
- Search page card layout
- Popup Model for filter
- Profile page header (sticky card for CTA): The left consultant info card will move down as users scroll down, which allows users to easily contact the consultant anytime as well as satisfy the business request.
5. Final Prototype (Responsive)
Check out the interactive prototype here: