Liftopia - Website redesign

Lead Product Designer, 2016
Research & testing, UX & UI design, Rapid prototyping, Design system

Drive change in the ski industry through innovative eCommerce platform

Liftopia is the largest eCommerce company in the ski industry. They work with more than 250 resorts across North America to bring lift tickets at a great value to millions of skiers, riders, and outdoor enthusiasts.

Intro

In 2016, mobile eCommerce had become as prevalent as desktop. Our site was built for a static desktop view and was hardly usable on smaller screens. With half of the internet traffic coming from mobile devices, it was extremely important to rebuild our website for an optimal mobile experience.

We also wanted to take the opportunity to overhaul the entire visual and user experience design for Liftopia.com, our most critical consumer-facing platform. We believed providing great user experience to our consumers would help our resort partners to increase revenue and cut down operational costs.

Liftopia website as of Jan 2016

Before we start

Setting up the stage was just as important as working on the project itself. We listened to our stakeholders to understand their concerns and worked with them to form a strategy that everyone can get behind. 

Strategy

• Iterate on current feature set, workflows, UI, UX, and codebase until we reach our goal
• A/B test features, workflows, UI, and UX as we build
  
• Design specific: test as early and often as possible
• Fix tech debt incrementally

User Human-centric approach

We started by interviewing our consumers to fully understand who they were and their mental model when they plan for a ski trip. This helped us to provide the right features and contents that would satisfy their wants and needs. Similarly, we interviewed our resort partners and our internal team to get their insights and made sure our design solution brought values to everyone.

Process overview 

We utilized Lean UX principles to foster a truly collaborative design process. I collaborated closely with a team of product manager, designers, and developers. While sharing responsibility on doing research and UX design with Tristan Denyer (Product Designer) and Gray Joyce (Art Director), I was leading UX & UI design (including component library), user testing, and workshop facilitation.

1

Research & discovery

• We interviewed our consumers, resort partners, customer support team, and stakeholders to gather both qualitative and quantitative data needed to define this project's definition and scope
• We reviewed the current website to identify UI/UX inconsistency
• We looked at analytics and conversions to identify trouble spots in various user flows

2

Design & collaboration

• Design-led brainstorm and critique sessions to flare and then narrowed down on initial concepts
• We took turn to host informal design workshops to advocate for design thinking among cross-functional teams

3

Test & iterate

• We tested early and frequently, starting with paper prototypes then moved on to wireframing and visual mocks as we iterated
• The final rounds of design were tested as functional prototypes built with Foundation framework to minimize throwaway work

4

Delivery

• The final design was handed off to dev in the form of design assets and HTML + CSS files
• We also built a functional component library following Atomic Design principle to serve as the source of truth for all visual and interaction components

Please read on to view final deliverables.

Problems & solutions 

1. Jobs to be done vs. persona

Our customers didn’t fit the traditional persona model. The same skier/snowboarder may behave differently depending on the context. For example, the same visitor may have very different motivations, wants and needs when they're planning for a family trip to Tahoe compared to when they're skiing with friends in Denver. We decided "jobs to be done" would help us understand their needs in specific context much better.

and I'm looking for...

• Specific date/date range in advance for a local trip

• Specific date/date range in advance for a destination trip

• Today for a local trip 

2. Consumer behavior: browse first, buy later

The original website was designed with the focus to guide users down the purchase path asap. The implied assumption was people who came to Liftopia.com already knew where they wanted to go and were ready to buy lift tickets. Therefore, we pushed toward the purchase path after they perform a search. 

During research and discovery phase, we found that the majority of people came to our site wanting to browse for the right resort that would fit their plan before thinking about purchasing lift tickets. Our analytics showed 66% of those who reached checkout went back to previous pages before they eventually bounced off. 

Above: Clicking anywhere in a search result row would bring users down the the purchase path.

To bridge the gap in our users' mental model, we explored a new UX pattern that woudl allow users to browse first and buy later, when they're ready. 

Above: User can browse before ready to purchase

Above: Search results on mobile

One month into A/B testing, the new search result had reduced bounce rate to 30% and improved revenue by 5%. 

3. The more the merrier  

Many factors come into play when you're planning for a ski trip, especially when you're going with family or a group. Through research, we knew almost everyone did some research on weather, current status, and accommodation for the resorts they planned to visit. When planning for a group, the amount of time and effort they put into research corresponded with the group's size.

Though resorts may have spent more on operational cost to accommodate large groups, they make more profits as these consumers purchase more non-ski products, such as lessons, foods, and lodging. 

With those insights, we redesigned the resort page to include the info users need: live status data, resort info & accommodation, map, pictures, reviews, etc. 

Deliverables 

Liftopia.com redesign was in the middle of implementation when I left the company. Some of the deliverables presented here were work in progress. 

Thoughts & learning

Teamwork & collaboration

Tristan, Gray, and I collaborated closely throughout the project with Product, Dev, and the rest of the company. One thing we found was so valuable was the morning workshop. Every morning, we invited everyone to come over to the design corner to casually view and chat about what we had worked on that day. Through these conversations, we were able to get people interested in design and to give feedback more organically. It also helped us built a great working relationship with other team members in the company. 

Lean design

Inspired by the Lean Design Principles, we were able to achieve a lot with limited resources in a short amount of time. We started testing with paper prototypes for quick and fast iteration. The idea behind this was not to get too attached to our design to a point it would become too precious to change. 

Design system

Design holistically with a design system in mind allowed us to scale. We componentized our design and moved straight to functional prototyping with Foundation while in the visual design phase. By skipping static visual mocks, we minimized throw-away work and saved time by delivering HTML & CSS files instead of design mocks. 

Want to hear more about this project? Email me at justquan@gmail.com

justquan@gmail.com     LinkedIn

©2024 - Quan Nguyen