Reinventing the purchase experiences for SaaS website platform
Designed by Figma
OVERVIEW
Sponteous is an early stage startup company that helps airlines empty their distressed inventories, and sell them off as mystery flights to end-users.
In October 2020, I worked as the UX designer in a 4-person team, directly corporate with the CEO, to design a solution with the goal of open up end-users market in Canada by improving the user experiences.
Meeting with Sponteous team on zoom
CHALLENGES
01
Inventory constraints
How to overcome Sponteous’ inventory constraints and still show values to users
02
Low user engagement
How to encourage user to understand the process and take action.
03
Intuitive booking experience
How to deliver a smooth travel booking experience.
04
Checkout confusion
How to clearly convey the billing information.
MY ROLE
Worked directly with the CEO, customer service team and 3 UX designers, I was responsible for redesigning the website platform user experiences. I produced major deliverables including problem statement, business & design strategies, iteration and prototype.
PERFORMED RESEARCH
Secondary research
When I was assigned this project, Sponteouse was adopted by 5+ airlines in Canada. Positive user feedback was imminent for them. I organized user feedbacks from customer service team, and sorted out the specific stage in user flow where user feedbacks are high.
New users drop-off rate is higher than 87%
According to the guest visit browsing data, users gradually decreased from onboarding page to check out page. Only half of users finished the entire purchasing process.
User retention rate is around 65%
From the feedback data of registered users, we found that most users said the website was complicated to use and include many system error messages. Even more, some users refused to use the website again.
Partial data from customer service team
User research
In order to further verify high-frequency problems in each stage and obtain more accurate conclusions, our team conduct user research.
The first thing I did to research was observing how the first time users interact with Sponteous. While user were sharing their screen to us on Zoom, I interviewed 5+ users and closely observing 3 users interacting with our platform and noticed that there was some common points.
Field study
3 observations
Survey research
47 survey respondents
User interview
6 user interviews
Users Pain Point
#1. Onboarding recognition issue
users are more likely to scan through
information rather than click to view detail.
According to the heat-map result for onboarding page,
However, current introduction on homepage requires user to click on to understand the website functions step by step. It is inconsistent with the users behavior, therefore users tend to consider this website as the typical travel aggregator, such as Expedia, when they go through coming steps.
The heat-map result for onboarding page
#2. Redundant booking steps
Through usability testing, 8/10 users convey a similar experience. They have to repeatedly enter the same content in the travel time portion of multiple destinations, not to mention that if there is a subsequent error, the user needs to repeat the process again.
#3. Checkout credibility issue
More than 7/10 users expressed dissatisfaction with the bill summary. They don't understand why three different prices appear at the same time, nor can they tell which one is the final price they need to pay. When users are confused, the credibility of the website will decrease.
Business constraints
How to avoid the disadvantage of limited inventory?
Since the company was at an early stage, Sponteous only had few airline partners, which limited flights diversity. More of that, the business pattern required users to choose at least 3 destinations to random generate the final travel destination. Therefore, having a variety of flights inventory was an indispensable factor.
Narrow down focus
With previous research, the importance of usability was addressed especially for a SaaS website, and the solutions from both UI and UX schemes are needed to maintain the method of easy to use throughout the website.
After the discussion with Sponteous team, we extracted 4 aspects to tackle and focus on:
With previous research, the importance of usability was addressed especially for a SaaS website, and the solutions from both UI and UX schemes are needed to maintain the method of easy to use throughout the website.
After the discussion with Sponteous team, we extracted 4 aspects to tackle and focus on:
01
Inventory constraints
Overcome Sponteous’ inventory constraints by accepting it and adapt a better UX strategy
02
Low user engagement
Help users reach their aha moment early during the onboarding phase.
03
Intuitive booking experience
Look for alternative plans to avoid redundant booking steps.
04
Checkout confusion
Figure out a clear way to explain multiple price on billing summary and avoid confusion.
IDEATION
User Persona
Based on previous research, I generated 2 personas to represent the user groups Sponteous wants to serve, which helped clients clearly understand the project vision and led my design process by reminding which needs, frustrations, behaviors and final goals the users have.
Brainstorm And Ideate Features To Bridge The Gap
Throughout ideation, storyboarding, team voting we propose our user journey with 7 steps flow, we pivoted and evaluate them with Sponteous team as well.
Define the priority
After considered limited design time we have and engineers’ technical constraints, I further define design priority with my teammates. We started designing the checkout summary first since it’s the most desirable and feasible feature based on Sponteous team and users feedback. Even though the booking experiences and onboarding path can largely improve the efficiency and deliver a better booking experiences, but it will have a huge change of the original website structure, so we decide to put them into the long term goal.
PERFORMED RESEARCH
From undesired to engaging
Reinvent the onboarding experience
Trim the search area from 2/3 screen to 2/1 screen size to better trigger the user’s curiosity to scroll down.
Expand the introduction on the landing page to match user behavior, and reshape the view structure to Z-pattern layout.
Add scalable travel details for each destination
Canceled small area partial display and switch it to display pop-up windows to enhance users readability. We also added a flight price trend chart to further induce users to learn more about inquiries to better make purchases decision.
From redundant to one-click
Redesign the booking experience
Redesigned the user flow, and reinvent the traditional calendar selection to customize the scene to meet the needs of different users. In order to balance business needs, we refine the search results into 3-day flights, so that users with adjustable time will be attracted by more choices.
From confusion to clarity
Micro-interaction of billing summary
Carry the destination image from previous step as a memory point to lead user interact with the billing section. By clicking with different cities image, user can view flight price in detail separately.
- END. -
Outcomes
How did we deliver our solution to the client?
Knowing what our clients were capable to do was very more important to the overall success of this project, therefore we worked closely with the Sponteous CEO and the team to ensure their involvement while key decisions were needed.
Site map
We created the site map to lead client to understand our solutions in a logical and reasonable way.
Visualize user steps
We filled the sketches under each step of site map to visually present solutions, and also explained “Why” behind each sketch.
Critique and feedback
In the end, Sponteous will give us feedback under each sketch to help us for the future iteration.
SUS score to testing for success
After the final design review, I collaborated with our design team and quickly shipped the new prototype and followed up with a round of usability testing with 15+ new users.