mobile web redesign.
Role
UX Researcher
Research methods
Usability testing
Skills
Facilitation, synthesis, collaboration
Output
Usability report to be presented before the design sprint
Collaboration
Worked along with another UX Researcher, Product Manager, Agile Coach
Tools
Lookback.io, Google Slides, Confluence
Background
As the number of smartphone users and mobile shoppers are globally increasing, customers are demanding fast and frictionless mobile experiences along the way. When people have a negative brand experience on mobile, they are over 60% less likely to purchase from that brand in the future than if they have a positive experience.
The current state of FlixBus mobile web UX, it is mobile responsive but not yet mobile optimized. The mobile web’s conversion rate is the lowest compared to desktop, mobile app and tablet. FlixBus definitely needs to step up the game to improve their mobile web experience. In general, the perceived friction is too high to convince customers to purchase over the mobile web.
​
How can we provide a seamless “close to mobile native” booking experience and increase at least 1% conversion on FlixBus mobile web?
Customer journey touch points focus:
- Search
- Check Out
​
We focused on achieving these goals:
- Create a "Frictionless mobile web optimised UX" for Search and Check out
- Achieve a fast and highly-performing mobile web to decrease the loading time as close enough to 3 seconds
​
​
We believe in order to achieve those goals, we need to perform 3 initial steps to ensure smooth collaboration with the agile teams:
-
Involve teams to user labs to identify usability issues and UX insights from customers on the current mobile web. Make this process as collaborative.
-
Conduct Design Sprints with cross-functional teams to create prototypes of the optimized mobile UX Design. The prototypes should be closed to mobile native UX. (Two prototypes were created covering “search” and “check out” functionality)
-
Extend and adapt our design system to reflect the outcomes and ensure it is efficiently adopted across teams, to simplify future iteration.
-
Provide a modern development ecosystem optimized for the mobile web where teams can transclude their self-contained components seamlessly.
The mobile web check out redesign process from research, to design and development:
My research process (check out page)
1. Set objectives
To evaluate the usability of the current check out page on the mobile web
​
2. Recruit participants
Setting up profile for testing:
-
At least have used FlixBus in the past 6 months
-
Device to use when booking: Non FlixBus app users, because we want to target specifically people who are using the web, especially mobile web
-
Proficiency in using mobile phone for browsing on the internet
​
3. Usability testing
-
Preparing script with tasks for the participants to perform booking extras and paying the ticket
-
Alternately facilitating the usability test as moderator and observer with other researchers
-
Organise collaboration between researchers, designers and product managers who will attend the design sprint
4. Synthesis & recommendations
Overall, the experience on the check-out page was perceived well with no critical issues. However, some minor fixes and suggestions from the usability issues could be applied in order to enhance the ease of use and clarity of the information displayed. ​
​
5. Recommendations
Once they have been applied into the solution from design sprint, it should be tested again.
​
6. Learnings
-
Design sprint team decided to do a single page checkout combining PAX page, extras and payment which we believe makes an increased outcome of 4% CVR.
-
After the new prototype was created out of the design sprint, we did another test and still found some minor usability issues including account, login, extras, vouchers and mobile ticket. The next iteration needed.
​
​
​
