Other than itinerary planning, RTT also provides Travel Essentials services to complete the whole travelling experience.
Earlier I have shared on how we have worked on the redesign of Ready To Travel Trip Planner App (read more about it here).
Roles and Responsibilities
Competitive analysis, user journey sketching, wireframing, prototyping, and helping out in writing user test cases. In this project I also get to assist on creating consistent visual styles and interactions.
2018
Design: Creative Director, 2 UI Designers and me
Project & Engineer: 2 PMs and 10 Engineers on iOS, Android, CMS platforms
Our Challenges
RTT works with various travelling partners and is a reseller for services like PocketWifi Rental, Insurance, Lounge and Concierge. Each of them has their own set of business requirements. The most challenging part is to understand and put together all these different services and make the whole shopping experience seamless.
Let’s see what the current interface provides
First thing that we observed from the interface is that RTT Shop is hidden and only accessible when users tap on the side menu. There are plenty of current promotions going on but the interface is not showing anywhere until they tap into the main banner, making it difficult for users to know.
On top of that, services that are not available are still accessible, thus causing the confusion and irrelevancy.
“ How might we redesign a more cohesive buying and travel experience? ”
How do we get there?
We spent a good amount of time communicating with the various stakeholders to understand more about the businesses of their services.
Sketches and Flows
Based on the insights, we brainstormed and try to find the common points across all services. Main objective is to see which flow can fit in every one of them, so that we can keep the consistency. We sketched them out and put them together.
Through the session, we discovered a few common points. For example:
Departure Date and Return Date are the constant value throughout all service types to determine the price points.
First Name and Last Name are needed for all service types in order to proceed to checkout.
A few of many sketches to depict one of the flow.
Wireframing
Now that we’ve got an idea of how we wanted the flow, we went on to create a hi-fidelity wireframes using content as accurate as possible.
With this initial prototype, we had some internal testings and feasibility clarifications with the engineers before reaching our final version.
The Redesign
Touchpoint and design structure
From the business perspective, Shop is one of the most important touchpoint between RTT and the users. From the restructure of the IA, it only make sense for it to be part of the main navigation.
When planning the design structure, what we wanted to do is to
Make the Shop landing page work harder. We introduce cross-selling function based on relevance to the user’s upcoming trip. So they can just find the product in a single step.
Have consistent components and modules for all service categories, so the design structure can be more scalable.
Adding to Cart
With reference to the Hick’s Law, we can simplify choices by breaking down complex tasks into smaller steps to avoid overwhelming users.
As there are multiple traveller’s details fields to fulfil for services like Insurance, we sieved out only the core fields that will affect the price point. In this way we allow the users to add to cart straightaway by filling up minimum fields.
They can choose to continue shopping and then come back to add in the traveller’s details whenever they are ready.
Checkout process
From the interviews with stakeholders, one of the issues they faced were the number of reconciliations due to many wrong purchases. In the old interface, the checkout flow lacks of a review page, which we feel it is essential for users to check again on the details in their cart.
To make the journey better, we proposed to split the checkout flow into 3 main steps. Summary – Payment – Review
Summary
Users are able to edit whatever missing information, apply promo codes on this page. As some discounts are only applicable for certain service categories, having users to apply promo codes here will be appropriate.
Payment
Payment methods and billing address are added in this step. Credit card promo are straightaway applied here based on the type of credit card they chose.
Review
Lastly, a place for users to review and make sure the items and all discounts are applied correctly. This step is added to reduce the number of error purchases.
What’s next?
With this initial step, we can learn more about our users’ feedbacks and adaptability with real user testings. Client have intention to work with more merchants and introduce a few more services on the roadmap. It will be a constant iteration and improvements on the flows across all services.
Takeaways and learnings
Communication is the bridge between confusion and clarity. Working with different stakeholders and understanding the different pillars of their services takes a lot of listening, and making sure that we understand what, and why they are saying. Then we can respond appropriately and present more value to their concerns.