Merchant App Redesign
Redesigned the one-stop restaurant management app, contributing to a 116% increase in restaurant subscriptions.
MY ROLE
I led the redesign of the app and worked closely with stakeholders, product team and the development team. I was the solo designer responsible for the hands-on UX/UI work, managing every aspect from initial concept through to design implementation. I also initiated a design library to set a foundation for a cohesive experience across both iOS and Android platforms.
DURATION
May - August 2017
BACKGROUND
Established in 1999, OpenRice is the #1 most popular food dining platform in Hong Kong, providing the most comprehensive and up-to-date restaurant information, F&B content and dining services. It has listed over 20,000 restaurants and 5.4 millions registered users.
Openrice Biz was launched in 2016 as a B2B merchant platform specially developed for restaurant owners and staff. The Merchant App (MA) serves as a one-stop management tool for all daily restaurant tasks, helping restaurants with their digital transformation needs.
It is crucial to consider that all features can be subscribed to separately. Therefore restaurants need to be clearly informed about which features they have subscribed to or which have expired. A promotion section for new features should be included as well.
STAKEHOLDERS INTERVIEW
We organised meetings with senior management, product team and marketing team to outline the roadmap for product features over the next 2-3 years. Our goal with this revamp is to ensure our designs are robust enough to accommodate all upcoming product updates, minimising the need for another major redesign in the near future.
Tech’s Perspective : Confusions on IA, user roles, and notifications settings.
Previous App Design - Dashboard & Sidemenu
Insights :
Frequently Used: Creating booking offers, creating coupons, verifying diner’s offers (scanning QR codes).
Frequently Ignored: Check inbox / notifications
USER SURVEY
We conducted user research to drive our decision making on UI change. We sent out a Google Form survey to existing users, including restaurant owners and staff, to gather their ratings and comments on various features of the Merchant App.
Tech’s Perspective : Confusions on IA, user roles, and notifications settings.
RESEARCH
We have to take consideration that all features can be subscribed separately, i.e. restaurant should be informed which features they have subscribed or expired. A promotion section for new features should be presented as well.
RESEARCH ON APP REVIEWS
Negative reviews on the app store highlighted confusion about the restaurant registration process. Users cannot register their own accounts through the app as all restaurant subscriptions are handled by our sales team. The previous design featured a login page as the initial screen and didn’t show any registration details, which frustrated users who downloaded the Merchant App directly from the app store. We will address this issue in the redesign to improve the user experience.
Tech’s Perspective : Confusions on IA, user roles, and notifications settings.
My Role
Solely responsible for all the hands-on UX/UI end-to-end design process, from initial concept to design implementation. Aaaaaaaaa aaaaaaaaaaaa aaaaaaa aaaaaaaaaaaaaa aaaaaaa aaaaaaaaaa aaaaaaaa aaaaaaa aaaaaaaaaa aaaaaaa aaaaaaaaaa aaaaaaaa
Date
May - August 2017
USER FLOW
To improve the user experience upon launching the app, I suggested including a brief description of Openrice Biz to help users understand what the app offers and how it can benefit their business. I also recommended incorporating a walkthrough that highlights our key services, plus adding a prominent shortcut for new users to get in touch with our sales team for account registration.
Users’ Perspective : Confusions on UX copy and clickable area/buttons.
Tech’s Perspective : Confusions on IA, user roles, and notifications settings.
IDEATE
My Role
Solely responsible for all the hands-on UX/UI end-to-end design process, from initial concept to design implementation. Aaaaaaaaa aaaaaaaaaaaa aaaaaaa aaaaaaaaaaaaaa aaaaaaa aaaaaaaaaa aaaaaaaa aaaaaaa aaaaaaaaaa aaaaaaa aaaaaaaaaa aaaaaaaa
Date
May - August 2017
DESIGN PROCESS
Openrice was initially launched in Hong Kong in 1999 as a local web dining guide, and later developed into a one-stop online platform (web and app) with various dining features, such as restaurant reviews, photo uploads, reservations, discount vouchers, etc. Nowadays OpenRice has over 20,000 recorded restaurants and 5.4 millions registered users. It’s the #1 most popular dining platform in Hong Kong.
Openrice Biz was launched in 2016 as a B2B merchant platform specially developed for restaurant owners and employees. The Merchant App (MA) aims to be a one-stop management tool for all daily restaurant tasks, helping restaurants with their digital transformation need.
Insights :
Action taken the most : Create booking offer / Create coupon / Verify diner’s offer (scan QR code)
Action taken the least : Check inbox / notifications
DEFINE USER ROLES
There are 3 user roles in the Merchant App, each with different permissions to view and edit features:
-
Staff: For waiters and waitresses. This role includes rights for daily operations such as confirming reservations and validating offers.
-
Admin: For senior members or restaurant managers. This role includes all Staff rights, plus additional capabilities like creating offers and viewing restaurant statistics.
-
Corp Admin: For restaurant owners. This role encompasses all Staff and Admin rights, plus financial and billing functionalities.
To help the development team understand all user permissions, I created a specification document summarising all interactions and permissions for these three roles. This document also facilitated discussions on any constraints we needed to consider when designing the final UI.
Insights :
Action taken the most : Create booking offer / Create coupon / Verify diner’s offer (scan QR code)
Action taken the least : Check inbox / notifications
WIREFRAMES
Based on the defined user roles, I have created quick wireframes to facilitate discussions with all parties. These wireframes feature modular design in various options to provide a overview of our app's structure. This help prioritise and define the app's features without the distraction of visual design elements, ensuring that the focus remains on user experience and flow.
DESIGN
My Role
Solely responsible for all the hands-on UX/UI end-to-end design process, from initial concept to design implementation. Aaaaaaaaa aaaaaaaaaaaa aaaaaaa aaaaaaaaaaaaaa aaaaaaa aaaaaaaaaa aaaaaaaa aaaaaaa aaaaaaaaaa aaaaaaa aaaaaaaaaa aaaaaaaa
Date
May - August 2017
HIGH FIDELITY MOCKUP
High-fidelity mockups offer a realistic portrayal of the redesigned app with details like typography, colour schemes, imagery, buttons and menus etc. This helps all involved parties to visualise the final product more accurately and allows for thorough testing of design and functionality.
Users’ Perspective : Confusions on UX copy and clickable area/buttons.
Tech’s Perspective : Confusions on IA, user roles, and notifications settings.
My Role
Solely responsible for all the hands-on UX/UI end-to-end design process, from initial concept to design implementation. Aaaaaaaaa aaaaaaaaaaaa aaaaaaa aaaaaaaaaaaaaa aaaaaaa aaaaaaaaaa aaaaaaaa aaaaaaa aaaaaaaaaa aaaaaaa aaaaaaaaaa aaaaaaaa
Date
May - August 2017
LOW FIDELITY PROTOTYPE
I used low-fidelity prototypes to facilitate quick iteration, focus on conceptual ideas and gather early user feedback. This serve as a communication tool between stakeholders, developers and other team members, and are ideal for user testing and validating ideas without getting bogged down in the details. This serve as a foundation before investing in high-fidelity designs.
Tech’s Perspective : Confusions on IA, user roles, and notifications settings.
Insights :
Action taken the most : Create booking offer / Create coupon / Verify diner’s offer (scan QR code)
Action taken the least : Check inbox / notifications
DESIGN ITERATION
xxxxx xxxxxxxxxx xxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx xxxxx xxxxxxxxxx xxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx
Tech’s Perspective : Confusions on IA, user roles, and notifications settings.
Insights :
Action taken the most : Create booking offer / Create coupon / Verify diner’s offer (scan QR code)
Action taken the least : Check inbox / notifications
UI LIBRARY
I started building the UI and component library to maintain consistent design elements across all platforms. This library is an essential foundation to ensure our design system is reusable, scalable, efficient and cohesive. Our goal is to streamline the design and development process by reducing repetitive work in the future.
Tech’s Perspective : Confusions on IA, user roles, and notifications settings.
Dashboard view as of 2021
There were over 10 new restaurant services featured and a new marketing promotion section was added. The redesign has proven to be effective for supporting new business extensions over the years.
RESULT
After the redesign was launched, we received positive feedback from users noting that the new dashboard is much more intuitive and clear. The restaurant subscriptions rate have significantly increased over time as well.
In 2019, over 14,000 restaurants have subscribed to at least one of our services. This has covered nearly 90% of the restaurant industry in Hong Kong.
View More Works
Merging legacy systems with modern solutions to elevate restaurant management to the next level.
Seamless integration of online and offline experiences for the dining industry.
Revitalising the brand Identity and enhancing digital presence with a modern UX/UI approach.
THE PROBLEMS
-
Inadequate Design for Future Features: The initial app design was launched a year ago. It was primarily focused on restaurant reservations, therefore the dashboard is unable to support the new features planned in the roadmap.
-
User Experience Issues: Ambiguities in UX copy and unclear clickable areas/buttons are causing confusion for new restaurant staff, impacting their ability to use the app effectively.
-
Role Confusion: Unclear user roles are complicating the development of Information Architecture (IA) and the implementation of push notifications.
-
Limited Growth Potential: The current design and structure struggle to accommodate future business growth and expansion.
THE GOALS
-
Implement a modular design framework that allows easy integration and scaling of new features.
-
Develop user-centric and role-specific dashboards and interfaces that cater to the unique needs of different user roles, simplifying their interactions with the app.
-
Clearly define and document user roles and permissions. This should be reflected in the app's IA to ensure that users understand their capabilities and limitations.
-
Plan for scalability in both the design and technical infrastructure, ensuring that the app can support a growing user base and expanding business operations.