Objective
-
Address user complaints about the user experience and increase user satisfaction
-
Make other high priority improvements to improve the user experience
-
Shorten the steps required to make an order to minimize user drop-off
-
Add a new menu format for restaurants to provide menu customization and size options
Role
-
Lead Service Planner (UX, PM)
A service planner is a hybrid UX designer, project manager, and part product owner
Schedule
-
Kickoff in Late March 2017
-
Release in Early May 2017
Project Challenges
-
Confusing legacy features, structural problems, and weird edge cases resulting from frequent team changes.
-
No in-app user data to understand UX issues and performance.
-
Trying to fit in as many fixes with the limited time and engineers we had.
Research
Analyze current UX and user complaints
I started off by analyzing the existing flow and service structure to discover any critical and obvious usability problems. I also referred to the opinion of heavy users in the LINE Thai office and worked with the operation team to sort through CS complaint records and opinions on social media concerning the user experience.
Compare experience with competitors
Furthermore, I compared the overall user experience with similar apps in Thailand and abroad and measure the performance of our app, especially the number of steps needed to order. Through the comparisons, we discovered that our user experience was too time-consuming, confusing, and difficult to navigate through compared to other players in the market.
Uber Eats TH, Food Panda TH, Deliveroo, Yogiyo KR, Woowa Bros KR
Research current state of menus
The operation team regularly interviewed restaurant owners and found that many were in desperate need of a new menu format with options/toppings. And through follow up interviews and analyses of the current state of menus uploaded in our system we were able to better understand the limitation of our system
Furthermore, I analyzed the menu customization interface of other food delivery services in both Thailand and abroad for inspiration.
I also developed a habit of analyzing menus at restaurants in Thailand
Key Findings
Time-Consuming and Redundant
-
A minimum of 14 steps was required to make an order in our app, longer than all our competitors.
-
After choosing a restaurant, users had to go through an irrelevant restaurant info page before being able to access the menu page.
-
There was a lot of information repeated between the pages and low priority notices shown intrusively as popups.
A minimum of 14 steps needed to make an order
Bizarre Navigation Experience
-
The navigation experience was weirdly confusing due to the partial implementation of various features by past teams that were made without considering the impact they would have on the navigation of the app.
-
The most critical issue was that incomplete orders and the items added to the cart were being reset in certain back navigation cases.
Skips to home when back navigating from order form
Misleading and Unexpected Surprises
-
The coupon flow confused users by wrongly giving the impression that a coupon was already applied upon inputting the code, resulting in many users unintentionally ordering without a discount.
-
Certain functions and input fields that could be better grouped were dispersed across multiple pages, making the order experience seem long and tedious.
-
Certain functions were too hidden to ever be discovered, including a hidden popup with menu descriptions that much of the team never knew existed.
"What? We had menu descriptions?"
Inconsistent Menu Experience
-
There were 30,000 restaurants in our system with 4 different restaurant types and 9 different menu modules that could be used in any combination by the restaurant owners.
-
This resulted in disparate menu formats across restaurants.
Table classifying all menu module combinations
Dire Need for Customization Options
-
Thai menus often have a multitude of toppings and options, making customization a key part of the local culture (e.g. condiments & toppings on noodles).
-
Many restaurants resorted to uploading a long list of all option combinations as individual menus because the app didn't have a menu customization feature.
-
Restaurants have been voicing the need for menu options for a long time, some only willing to fully integrate with the platform when menu options are made available
An abundance of options
Design Approach
Reduce Steps and Redundancies
User Problems
-
Existing users may be confused if the design changes are too drastic
Approach
-
I made sure to avoid major structural changes and maintained the same sequence of tasks.
-
I reduced a step by prioritizing the menu page for easier to access the menu
-
I combined the order form and order confirmation pages to reduce a step and existing informational redundancies.
-
I integrated the information of certain low-priority notice popups into existing pages and showed important popups only when necessary to reduce modal intrusions.
-
We were able to reduce the number of pages accessed to make an order from 7 to 4 pages.
Natural and Coherent Navigation
User Problems
-
Confusing cart reset back navigation experience
-
Weird navigational experience and page structure
Approach
-
I streamlined the navigation structure of the food experience and made the back navigation button take users to the previous page and not skip to the home page.
-
I solved the issue of the cart unexpectedly resetting by raising the hierarchy of the cart as a universally accessible feature and by saving the added items in the cart while navigating.
-
Provided easy access to the restaurant's menu page in the cart page to encourage users to add more menus, especially when revisiting a saved cart after leaving the app.
-
I simplified the inconsistent use of close/back buttons and page transitions, making only the cart a modal page with a close button and the appropriate transition.
Higher Findability and Less Confusion
User Problems
-
Certain features being too hidden or unintuitive
-
Customers forgetting to apply a coupon due to confusing interaction feedback
Approach
-
Replaced the existing swipe gesture used to delete an item in the cart page with a separate delete button for the Android OS.
-
Moved the existing menu descriptions accessed through a hidden long-press popup to be shown below the menu names in the menu list.
-
Improved the coupon flow by omitting a confusing feedback that misleadingly gave the impression that a coupon code was applied when it really wasn't.
Cart Page Before
Cart Page After
Consistent and Flexible Menu Layout
User Problems/Considerations
-
Confusing variety of menu layouts resulting from unnecessary/redundant menu modules
-
Creating a new layout that would work with the existing restaurant/menu data types
Approach
-
I classified all the types of data and interface components used in the menu pages by each restaurant type.
-
I consolidated all the restaurant-related metadata to be shown in a uniform format by redefining the data constraints (i.e. text characters) and testing different layouts.
-
I simplified the design of the restaurant page to have a consistent layout and look across all restaurants.
-
I provided a consistent disclaimer section on the top of all restaurant menu pages to notify users of the varying order and delivery conditions across restaurants.
Consolidation of Menu Modules
Menu Options and Toppings
User Problem/Considerations
-
No menu customization feature for both the customer and restaurant app
-
Providing a consistent experience between restaurants menus with and without options
Approach
-
With the UI designers, I designed a menu item modal layer that has the flexibility to show only the name and price to a full page with an image, description, and menu options, allowing all restaurant menu types to have the same modal experience.
-
I designed a full feature menu customization function for the restaurant management app to group options, define the selection conditions of each group and limit the maximum number of options that can be added per item.
Menu Item Modal with Adaptive Sizing
Convenient Primary Action Button
User Problem/Considerations
-
The primary action button was shown in an inconsistent design/location within the page
-
Make it easier to recognize and tap the primary action button throughout the ordering process
Approach
-
I made the primary actions of add to cart, checkout and order confirmation at each step of the ordering process available as a bottom bar button for consistency and easy access.
-
With the visual designer in charge, we made the add to cart button rich with additional information, including the quantity and price amount.
Primary Action Button at Bottom of Screen
Prototyping and Testing
For this project I invested more of my time in creating prototypes to test the interactions with the visual designs proposed by the UI design teams. I also tested the prototypes internally and made changes accordingly, reiterating the process as needed.
The prototypes were helpful in discovering further improvements, defining the interaction requirements for engineers and visual designers.
Order with Shortcut
Order with Menu Options
Coupon Flow
Outcome
Reduction in user complaints
-
We accomplished the project goals to streamline the experience, simplify the interface and shorten the time expended by the user to make an order (from 7 to 4 pages)
-
We successfully reduced the number of customer complaints concerning the user experience, especially the issue with coupons not being applied to a food order.
-
By creating a flexible when consistent menu format we were able to make the menu experience consistent across the 40,000 restaurants in the platform.
LINE MAN Ad
Reflection
-
This project was one of the first opportunities for me to wholly focus on improving the user experience, allowing me to spend more time prototyping and testing designs internally, also giving me the opportunity to gain more in-depth UX design experience.
-
The process of finding all the usability issues and understanding the backend app structure was a surprisingly enjoyable experience, almost like a treasure hunt for UX issues.
-
Although it was easier to make drastic improvements in the user experience because the original state of the app was poor, I felt proud to have made an impact in the service that generated the most revenue in our platform at the time.
-
The food delivery service also increased transactions by 200% by the end of the year and went on to become the leading food delivery service for a while in Bangkok.