June - Aug 2021
I was contracted to work on the client project Just Trip for WeBOOST Australia. Working as the sole designer, I closely collaborated with the client, project manager, and development team throughout the entire process. Our main goal was to transform the existing WeChat Mini Program into native mobile apps with significantly enhanced usability and accessibility, while also giving the user interface a modern, clean makeover.
酱游Just Trip is bilingual travel app that enables you to travel the world on your own by offering in-depths guides, maps populated with thousands of places, GPS navigation(online & offline), in-app booking, user generated routes, etc!
• Overall UX Improvement
• Increased audience reach
• Native iOS/Android experience
• New feature integrations
As the sole UX/UI designer for the project, I worked closely with the client and the project manager and developers from WeBOOST. I was responsible for:
• UX Audit of the existing app
• Secondary research
• Wireframes
• Hi-fidelity UI design
• Prototyping
• A Scalable Design system
• Design handoff
• App store submission screenshots design
• 5-star rating in Apple App Store
• 5k+ downloads in Google Play Store
Install the app and see for yourself!
As a travel app that provides in-depth guides to travellers, one of the features that both first time users and return users will use often is the ability to select an initial city to explore as well as to switch between cities.
UX Audit and Redesign: Detailed comparison
• Selection not saved - Users would have to select a city every time they opened the program;
• Switch made difficult - Users have to exit the program and re-launch it if they wished to switch to another city;
• Poor hierarchy - Name of current city was only as important as the next title, causing confusion to users when they scrolled down;
• Low contrast - Card design did not meet accessibility standard
• Flexible navigation - It allows users to quickly switch between cities from homepage;
• Intuitive revisit - It saves user’s city selection and load homepage directly when they return;
• Clear hierarchy - It gives the city name the focus it deserves and differentiate it from the rest;
• Accessibility - I solved the overall contrast issue by redesigning the city card
• Grouping by country - It helps users quickly scan and locate any country/city and it accommodates more cities without scrolling;
• Dynamic search - Users can search by country or city name and the result will be shown dynamically, saving them precious time in this step;
• Empty state prompt - Engage users by prompting them to suggest a new location when they can’t find what they’re looking for
The central feature of this travel application is its map, which displays numerous points of interest (POIs), routes for users to view and follow, and in-app navigation that can help save users significant amounts of time. The POIs are categorised using a two-tier classification system, and the primary challenge is to present them effectively, increase their discoverability, and facilitate easy viewing of the POIs that interest users.
UX Audit and Redesign: Detailed comparison
• App Navigation - Routes and categories of POIs were placed in different components for better distinction;
• Category Menu - The redesign incorporated a side panel to accommodate sub-categories under each category, assisting with filtering and minimising scrolling to discover all sub-categories;
• Menu Item(POI) - Thumbnails were added to each POI, making the entire list much more digestible and scannable;
• Quick Save - A feature was added that enables users to quick save/favourite the POI they find interesting without leaving the page;
• Map Pin - Map pins were revamped with category-based color and icon coding, featuring a pin-shaped design that enhances visual appeal and facilitates ease of tapping. The selected pin was also intentionally differentiated with a branded appearance;
• Bottom POI Card - The new layout increases overall readability and includes a "Take Me There" button to simplify navigation and save user effort.
Users will be able to save routes that are hand-picked by the internal team, as well as create their own customised routes by editing saved POIs. This feature is made possible by the app's navigation system, providing users with the flexibility and convenience to explore areas of interest to them.
By saving and editing routes, users can make their experience more personalised and enjoyable, allowing them to revisit favourite spots or discover new ones along the way.
UX Audit and Redesign: Detailed comparison
• Informative Route Card - Instead of merely displaying the route title and thumbnail, the new card is much more informative, which helps users make a decision without tapping into it;
• CTA always accessible - In the Route Details Page, the CTA was pushed to the bottom(non-sticky) on the previous version; we made sure the bottom button group is sticky and always accessible;
• Numbered POIs on Route Preview - The order of POIs to be explored within a route is made much clearer by numbering the map pins, as well as having a zoomed-in pin to represent the selected pin;
• Edit Page - A drag handle was added for re-ordering; Unselect/Select All was made available to make the experience more intuitive; selection count helps users keep count of what has been selected; Add POI feature was enabled during this process giving it much more flexibility;
• Suggested Walk Name - When a user is creating a new walk, the app would suggest a name for the walk based on the POIs within it, reducing friction in the journey.
POI(Point of Interest) details page is the backbone of this product. It provides so much more than just a name. Users will be able to not only learn the basic info of the POI and/or listen to a voiceover of what makes the place unique without leaving the app, but also explore them in map, save them to lists, customise travel routes with them.
What makes them vital to the business is that users can even book a tour in the app with Just Trip’s tourism solution partners.
UX Audit and Redesign: Detailed comparison
• Cluttered interface - On the bottom part of the image, the POI basic info and two action buttons are cramped together;
• Low readability - Text size and line height were too small;
• Unbalanced element - The image was taking up too much space vertically, making the page feel unbalanced and causing other info to be pushed down;
• Deprioritized CTA placement - Emphasis should be placed on encouraging users to explore the POI or save it for later;
• Misplaced emphasis - At this point, the primary focus was not on prompting users to leave a comment.
• Book (a tour) button - Button has been changed to floating, which is hide-able when a tour is not available; it doesn’t impact the layout of other elements; a different colour for differentiation;
• Sticky CTA group - Placement of buttons more accessible; microcopy improved; cater for two use cases (i.e. preview on map & immediate navigation);
• Saved to list - New placement makes it always accessible; increases engagement;
• Comment Prompt - More encouraging with the use of avatar, input field and microcopy;
• Leave a comment modal - Labels improved to reduce confusion;
• Share popup - Custom icon to align with branding; increase engagement by offering two options
Just Trip prides itself on the depth of content it provides to the users. One of the main goals of this project is to restructure the overall navigation and the homepage so that users can see the depth of content and functionality as soon as they open the app.
UX Audit and Redesign: Detailed comparison
• Navigation tab bar - Confusing copy; lack of visual cues(icons) which is a common practice;
• Top tabbed views - Visual distinction from the bottom nav bar was too small, causing confusion
• Information architecture - The layout required too much manual tapping and horizontal scrolling, which had negative impact on discoverability;
• “Recently viewed” section - It took up valuable space above the fold; the content was not city-specific;
• “What’s On” section - It was not hidden when there was no content in some cities, leaving users staring at a blank section wondering what was wrong;
• Low contrast - Card design did not meet accessibility standard
• Native tab bar - A native mobile tab bar with icons as visual cues that users are familiar with;
• Horizontally scrollable tabs - It minimises the need to tap and scroll horizontally. Users just keep scrolling down and the current section they are viewing is reflected automatically in the scrollable tab. It presents the users the depth of content with the least friction;
• Content strategy - The client restructured the overall content; the section name, order, articles within each section for each city are all configurable in CMS, making it very flexible and adaptive;
• Site search - It enables users to search the app’s rich content, increasing content discoverability;
• Accessibility - A dark gradient overlay is in place to make sure the contrast of text on image is high;
• Separate history section - “Recently viewed” has been moved to its own tab in Profile Page, and content is grouped according to its own category. They couldn’t be city-specific though, restricted by technical constraints and project timeline
The profile page serves as a central hub for users, allowing them to manage their favourite places, create personalised routes, view their previous comments, access viewed resources, check notifications, and manage various settings related to their account.
UX Audit and Redesign: Detailed comparison
I started the project by analysing and evaluating the user experience of the then WeChat mini program. By identifying its usability issues, design inconsistency and areas for improvement, I gained understandings of the user experience which helped inform me the next steps of the project. Examples of the audit findings could be found in the previous section.
Research was conducted on competitors in the field with the goal of identifying their strengths and weakness. I also drew insights from other sources to gain insights into the problem space, which helped me implement best practices in UX.
Guided by the findings in the previous steps and the project brief, I produced several iterations of UX wireframes which defined the user flows, information architecture and screen layouts of the application.
Once the team has agreed on the UX wireframes, the next step was to explore the visual design of the app. That involves defining the overall look and feel of the app and creates a consistent visual language that reflects the brand and enhances user experience. I proposed an updated colour palette while adhering to the existing brand colours.
Having laid the groundwork, I delivered a set of high-fidelity, pixel perfect UI designs that were both user-friendly and aesthetically pleasing. Modifications to the user flows and layout were observed if that was deemed necessary.
A scalable design system that’s customised for the project was organised and delivered once the complete set of UI designs had been approved. I’m always committed to preparing a clear documentation and design system for the dev team so they’d be able to spend their time doing what they do best.
I was working closely with the dev team from WeBOOST Australia during development and provided support when required. Upon the launch of the app, I followed the guidelines by Apple App Store and Google Play Store respectively and designed the screenshots for the app. It was one of the most exciting moment as the app was finally ready to welcome its users.
It's understood that the design of these screenshots has undergone some updates by the time of the writing of this case study.
It has been a great journey working on this project. We are glad to see the product has seen positive feedback since its launch on the Apple App Store and Google Play Store. The app has received a 5-star rating on the Apple App Store and has been downloaded over 5,000 times on the Google Play Store, indicating a strong positive response from users.
The most significant improvement has been in the user experience, with users frequently commenting on how easy the app is to use. This has resulted in increased user engagement and satisfaction, leading to higher retention rates and increased usage of the app.
I'm excited to discover how I can help. Send me a message now and let's get started!
