My Role

My Role

Sole UX designer: Initial Research, UI & Interaction design, Prototyping, Usability testing

Sole UX designer: Initial Research, UI & Interaction design, Prototyping, Usability testing

Team

Team

10+ Multi diverse agile team comprised of BA, Dev, QA and PM

10+ Multi diverse agile team comprised of BA, Dev, QA and PM

Client

Client

Ancon: One of Sweden’s leading Point-of-Sale providers for restaurants and bars

Ancon: One of Sweden’s leading Point-of-Sale providers for restaurants and bars

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,

Lack of the user controllability and the freedom for the user

Lack of the user controllability and the freedom for the user

Poor information architecture

Poor information architecture

Lack of interaction feedback mechanisms

Lack of interaction feedback mechanisms

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

↑ An initial paper sketch

↑ On UI annotation sample

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

51%

51%

51%

New customer acquisition

29%

29%

29%

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!

All designs, images & logos featured in these case studies are protected by copyright and are the intellectual property of Ancon AB & Calcey Technologies.

Copy Email

Email Copied

© 2023 All rights reserved by Ashan Ginige
All designs, images & logos featured in these case studies are protected by copyright and are the intellectual property of their respective companies.

Copy Email

Email Copied

© 2023 All rights reserved by Ashan Ginige
All designs, images & logos featured in these case studies are protected by copyright and are the intellectual property of their respective companies.