Context of the project
The client of the story: Ancon, wanted to come up with a comprehensive re-design for their food ordering platform which is already in use by 400+ tenants (Restaurants & bars).
Outdated UI and poor user experience were the main reasons behind this complete revamp. Because these 2 main reasons are the barriers for the increase of more restaurants and users getting on board.
Starting with client calls
I initiated the project with client discussions, focusing on understanding the reasons for the application redesign and assessing its current status.
Because it is crucial to get the exact requirement of the client about an application which is already in use, I conducted a few rounds of discussions with the client with the help of BA and PM, and we came across the main idea behind the redesign.
The need for a comprehensive app redesign primarily arises to address outdated designs and improve user experience in order to drive more users, And also to improve overall functionality, facilitate white label support and streamline the overall user journey
Defining the problem
Following the initial discussions with the client, I have defined the core problem of this new design requirement
The poor user experience and outdated user interface designs are obstacles preventing the expansion of customer base and impeding efforts to onboard more restaurants as tenants onto the platform.
Clarifying the parts of my task
Based on the discussions, revamping not just the UI, but also to elevating overall user experience of the application were my tasks to complete.
I was tasked with enhancing the overall user experience, which involved addressing all usability and other UX-related problems within the application.
Subsequently, I was responsible for doing a comprehensive UI design overhaul for the application.
Analysing the current application
As the initial step, before engaging with the client, BA, or the team, I began by reviewing and analysing the application to familiarise myself with it.
So I decided to do an in-depth analysis of the designs, user flows, functionalities, information architecture and interactions in the application.
Key things identified that needs to be improved in the overall application were,
Gathering insights from the current users
As the next step I straightly moved to have a look at feedbacks from the existing users. For that I actually used two approaches,
1
Information through existing customer inquiries (Through feedback from customer support)
2
Daily & infrequent user interviews ㅤ
1st Approach: Information through existing customer inquiries
So I initiated the 1st approach by contacting the customer support team of Ancon, to get information regarding inquiries from customers about the application's user experience. I also considered some of the technical inquiries, as they can directly impact the application's user experience.
Key takeaways are,
2nd Approach: Daily & infrequent user interviews ㅤ
Then with the help of the client and the team, I conducted some user interviews. We involved users varying from daily active users to infrequent users to understand what motivates or demotivates them from ordering food from our application.
Remote User interviews
Open-Ended Questions
Scenario Based Questions
I opted for an open-ended questionnaire approach, allowing users to respond freely in their own words. This method uncovers unexpected insights about the application flow.
Additionally, I incorporated scenario-based questions to explore specific user expectations in real-life situations, complementing my existing knowledge of areas that need addressing.
I used “Google Meet” as the meeting platform and then took all those interviews to “Dovetail” to organise and analyse all the data.
And some of the pain points raised were,
↑ Some of the pain points, raised
Follow-up usability testing
As a follow up step, for the user interviews, I conducted usability testing rounds with the same users. Additionally I recruited a very few users who were completely new to the application as well.
Remote Usability testing
Task Based
Think a loud testing
We used a combination of methods, involving both task-based testing where users worked on defined tasks and think-aloud testing where they expressed their thoughts, actions, and feelings. This approach provided more insightful feedback about the application from the users.
First I tasked them to, cover a overall flow, like
“How would you order, 2 Cheese burgers and, 1 Beef burger and also a latte, from the nearest Max outlet to you, and pay by Swish or Gift Card options ?”
Then I asked them to demonstrate few flow specific based tasks, like
How would you…
change the order type (Eat-in to delivery) when you are already in the middle of adding products?
search for restaurants in a specific area ?
add products to cart ?
change the delivery time ?
pay with card options ?
pay with a gift card or with your wallet ?
Organising all insights into an affinity map
Then as the next step, I organised the insights we gathered into an affinity map, allowing me to categorise findings under specific user flows. This helps me clearly identify the areas to focus on and begin my ideation process.
here is just a sneak peak of the affinity map
↑ Part of the affinity map
Ideating
Next, I just started to address every flow based scenarios and started to ideate the possible UI improvements and flow + functional changes in the application.
Ideating
Possible UI improvements
Application flow & functional changes
In this step, I alternated between using paper sketches and annotations and drawings of ideations on screenshots of existing application flows.
For scenarios where I wanted to maintain the current flow methods, I ideated directly on the existing application UIs. For areas where I had more creative freedom, I relied on paper sketches to generate ideas.
↑ An initial paper sketch
Wire-framing & evaluating
After sketches, as we usually do, I picked promising sketches and went through the details by creating the wireframes, after which I chose the best variant and worked it out in greater detail. In this step with wireframes, it was actually easy to discuss the solution with the product owner team.
In some cases I tend to create wireframe level prototypes also, in order to identify the most optimum solution.
Starting to design
Defining the styles
Before diving into UI designs, as is my usual practice, I prefer to establish a preliminary style guide for initial direction. This guide acts as a foundation, evolving as the design process progresses.
At this point, I had another meeting with the client to finalize the choice between the current color scheme and a new one. Their marketing team presented a rebranding concept, including fresh colors and a new logo, which I found quite appealing
Determining the necessity for a design system
We decided not to create a design system and instead focused on maintaining a UI element/component library for several reasons:
No Design System
but
UI Elements/Components Library
We decided not to create a design system and instead focused on maintaining a UI element/component library for several reasons
Fewer UI & interactions - Mainly having fewer unique UI components and interactions which don't need a complex design system
Only one designer - As the sole designer, detailed collaboration guidelines within a design system weren't required. I could maintain consistency without extensive documentation.
Quick changes & modifications - Without a design system I can do rapid changes just to the components, instead of changing a whole design system
Flexibility - Giving me the flexibility to make swift changes based on feedback, unrestricted by design system constraints.
Finalised UI Designs
Landing page - Centeredly positioned widget attracts more attention, given its crucial role in guiding the user's primary action and the page layout kept minimalistic, and the background image will be periodically updated.
↑ Home/landing page design
Outlet/Restaurant listing page - The newly added location widget and results title offer users flexibility in changing locations and refining searches & simplified outlet card improves visibility, showcasing cover images, logos, and information.
↑ Restaurant/outlet listing page
Restaurant Page - The menu structure was revamped to provide a clearer visualisation of levels and, the item card and layout were optimised to dynamically display more cards.
↑ Restaurant/Outlet page design
The Product Pop Up has been entirely redesigned into a vertical layout, featuring improved sectioning and highlighting essential details such as required selections and updated prices after modifications to product.
↑ Product pop-up design
Shopping Cart - The Cart has been transformed into a separate sliding or sticky panel (in larger screens), replacing the small sliding popover, allowing for product modifications directly within the cart.
↑ Shopping cart design
Interaction Example - Here's how the login option is integrated into the delivery address selection process.
↑ Encouraging to log-in, in address selection scenario
Interaction Example - Here's a rare scenario where selecting the available quantity from a partially out of stock product.
↑ Option selection of product out of scenario
Check-Out page - Allowing user to modify order or delivery details right from the checkout page
↑ Checkout page
Status Page - Allowing user to see the status of the food items or the entire order
↑ Order status view
Working with Engineers
I began the process of acquainting engineers with the design handoff process and tools as the initial step. Subsequently, I facilitated feedback looping sessions to ensure ongoing collaboration and refinement.
Throughout this project, as we were redesigning an existing application, I have consistently collaborated with developers right from the start. This ensures a harmonious balance between functional feasibility and design fidelity.
I provide comprehensive design documentation, along with specific demonstrations of interactions, micro-interactions, and behaviours through advanced prototypes tailored to specific scenarios.
Impact
New customer acquisition
Growth in returning users
What I've learned
Importance of retaining certain patterns from the legacy app during a redesign - I've learnt that, to avoid causing user confusion, it's crucial to maintain some familiarity in the design, especially when working on an existing applications.
Importance of knowing the limitations and constraints - Knowing what your product can't do is as important as knowing what it can. Recognising limitations eliminates confusion, allowing for a more focused pursuit of better design solution.
Recognising the value of early communication with engineers - I've discovered that collaborating from the start and maintaining ongoing dialogue facilitates the identification of functional feasibility limitations. This, in turn, enables us to craft more effective design solutions.
That's a wrap. Thank you for reading!
Other stories
