I was asked to lead the update of the product design for a restaurant app that serves multiple SME F&B brands like Union Roastery. The app was designed as an off-the-shelf restaurant loyalty app for eateries to customize as their own. It allows their customers to use it in-store, at home for delivery and pickups, as well as earning loyalty rewards.
The problemThe challenge
The developed app lacked a strong focus on branding and user-centricity. Its application of UI component design was messy and inconsistent. Journeys and contents of the app put business requirements ahead of user-focused approach, resulting in a technical and transactional product.
The problem
While the app is serving its purpose by having all crucial features up and running, and transactions are being made without hiccups and errors, the adoption rate and app stickiness remain stagnant. After talking to the business and reviewing their recent findings, we realize that most users only visit the app when they are incentivized with cash value rewards.
To assess the need for a redesign, I assessed all journeys of the major features like Wallet, Rewards, Ordering, Membership to identify deterrence caused by usability, benchmarking them against heuristics and best practices to quickly identify UI and interaction enhancements needed. Then, found opportunities to infuse a few quick wins to boost the app’s stickiness in the form of added value and convenience.
The solution
Putting users first and things where they belong.
The redesigned home page now has a stronger content hierarchy with fewer distractions in UI implementation. Neutral colors are applied to the majority of the components to eliminate competition from the brand color.
The information architecture was repurposed to put things where they belong, and repositioned them to have a more humane real-world context. While the business was not willing to reduce content to reduce clutter, I made the content more digestible without compromising business needs.
The problem
Redundant information and transactional experience.
The business was too focused on providing their clients with more value by giving them more information. They thought that providing more data points to the users would mean more value for the client to opt in for their app solution.
The solution
Eliminate redundancy and introduce human centricity.
The app was being positioned as more of a transactional app than a lifestyle app, deterring active users interacting with the complex level of information and data.
Simplifying the flow without compromising business requirements is a tough act to balance, but doing it right will let them complement each other, grounding the wallet feature with a better sense of navigation and goals.
My objective was to show what’s needed for users to be kept informed and eliminate redundancy throughout the content and user journey. Placing things where they make sense for users will significantly reduce the app’s cognitive load while maximising efficiency of each user feature.
The problem
Business-focused design and inefficient flow.
There are screens that were conspicuously designed around business requirements like the order screens. The form fields were populated only for the business to capture data they needed without the user’s behavior in mind.
Flow of the journey were rather technical than enjoyable, secondary information like food category were taking primary real estates, and visual cues were misleading, like fields and buttons appear greyed out when they are interactive.
Poor and inconsistent design library.
There were inconsistencies across pages in UI application as well as overusing of mismatched treatments like dark shadows and dark tints. Texts are bound in individual boxes, typography are overly varied, causing visual clutter to the eye.
The goal is to have uniform aesthetics across pages by minimising unnecessary variations, while increasing legibility and breathability of the design.
The solution
Intuitive and natural pathways.
Most users spend a lot of time on other food delivery platforms in their lives, hence it’s important to know that they also prefer your site to work the same way as the other platforms they’re familiar with.
Creating resonance in the order experience will create more natural pathways, while adding convenience along the way contributes to an intuitive journey.
Establish basic style guide.
Ensuring every variation created for each UI component to share the same nature and interaction will be necessary and scalable to multiple applications. Illustrations, header banners, listings, typography rules, icon type and placements, spacings, card padding rules, button rules are few of many good tools to reinforce consistency and achieve unity in UI aesthetics.
