Food Delivery
eCommerce Platform.

Food Delivery eCommerce Platform Cieden

Project Plan

Task

Conduct market and user research to create the best UX for the mobile application and website based on pains and needs of the end-user

Team

Project Manager, UX/UI Designer, UX Researcher (part-time)

Duration

4 months

Scope

UX research, usability testing and UX/UI design of mobile app & website

Result

UX research report on a Miro board; usability testing with a clickable prototype

Overview

This client is one of the South East Asia premier online shopping destinations.

Cieden collaborated with stakeholders to understand business requirements, gathered general user data, analyzed user behavior, and conducted competitor research using Google Analytics and Hotjar.

We also created a user survey and user interview scripts to validate initial hypotheses and develop a UX strategy based on the results. Following that, we defined the project scope, created a feature prioritization map, and developed the information architecture and wireframes for usability testing. We performed usability testing to validate our design and made changes based on the findings. After the testing iteration, we finalized the mobile app design and the website, both desktop and mobile
responsive versions.

The main issues that we turned into solid UX solutions were connected with the search and filtering, reordering the goods from the completed order, saved item discoverability, replacements for goods,
and checkout steps.

Benefits

Challenges

  • The client understands the importance of UX research methods and is ready to validate ideas to decrease the level of uncertainty
  • Technical specialists’ on the client’s side helped our team understand the technical restrictions and possibilities
  • Because of the client's confidence in the team, we also collaborated on a redesign of the Application for Internal Employees
  • Different mental models of local users, so some UX patterns do not work for them as we expected (usability testing insight)
  • To understand the real user pains and jobs, to challenge the initial idea of the app's functionality, and to cast aside the bias created based on the client's research

Discovery

It's unnecessary to build a mobile app based solely on our assumptions about user needs. We need to dig deeper and conduct research based on the goals and context of the user. What if our users could complete their tasks via the existing website? What if creating the mobile app would be only a waste of time and money? And what exactly are we trying to solve?

Cieden's team, alongside the client, was focused on creating the best user experience possible. Firstly, we used Google Analytics and Hotjar to learn more about the users and how they behave. We then generated scenarios for user interviews and surveys to validate our initial hypothesis about user needs and analyzed competitor features to conduct market research. All the obtained results and insights led the team to several design hypotheses.

Google Analytics & Hotjar Analysis

We conducted a Google Analytics and Hotjar analysis in order to gain a better understanding of who our users are, what devices and browsers they use, their geographic location, social democracy, and psychography, as well as how they interact with the current website.

As a result, we anticipated making initial assumptions about how we could improve the current experience with design solutions.

Food Delivery eCommerce Platform Cieden

Survey - Quantitative Research

We reached out to our customers to gather quantitative data to see what functionality our clients use to make orders on the website and whether there are any pain points in the process.

Armed with our initial assumptions only, we've recruited and surveyed clients to define their pains and their "painkillers". That way we removed our own bias and based our further decisions on actual data.

User Interviews - Qualitative Research

Qualitative research helps to collect detailed information on topics we are interested in as designers.

We decided to use it to research and discover problems as well as opportunities that people face during online and offline grocery shopping. Mainly, we wanted to dig deeper into user experience, pains, and tasks that underlie their behavior and habits.

Competitor Research

None of the applications we evaluated contain the functionality to replace items (it was one of the hypotheses we tested) or a simple and always available search with suggestions. We did, however, find repeatable patterns and determined the so-called “quality standard”.

Prioritized Feature List

We prioritized the information gathered during the research phase based on user needs, implementation complexity, and impact on business goals.

Information Architecture

We gained an understanding of user actions, flows, and scenarios after completing the discovery phase. Following that, we created an information architecture to organize content so that users can quickly adapt to product functionality and find what they need.

Food Delivery eCommerce Platform Cieden

Usability Testing

Following the creation of the interface solutions, the best practice is to use the prototype to observe how users complete tasks to validate ideas, identify areas of confusion, and improve the overall user experience.

The team developed a testing session plan based on the main functionality and created flows for these scenarios using the prototype's wireframes. After everything was ready for the testing session, the team was divided into a testing facilitator, note-taker, and observer. Then people from our TA were recruited for the testing.

During testing, the team discovered which features are not expected by the TA, which features are missing, and which features work well.

Food Delivery eCommerce Platform Cieden

Visual Design

At this stage, the team managed to combine the brand style and colors with CAG compliance for better readability. In particular, we have applied predictable and recognizable UI patterns (e.g. a contextual menu on the left or pop-up windows with discount offers), included text alternatives for most critical non-textual elements, and provided a user with clear UX to help them determine their position on the platform, navigate, and search the needed content.

Food Delivery eCommerce Platform Cieden

Find Best Products with Convenient Filters

Following the best practices of online shopping adopted in e-marketing SaaS, we have designed an advanced search algorithm with an opportunity to filter goods by category, including the availability of discounts, brand, product type, weight, and price. We have placed the filters section on the left-hand side in line with the usability patterns established for this element. Particular attention was paid to the design of a product card, that had to be enough informative but visually attractive and easy to read at the same time.

Food Delivery eCommerce Platform Cieden

Check Product Information

The checkout phase is the most critical point of the purchasing process. At the moment of cashing out, a user often changes their mind about buying some products, realizes they ordered more than can afford to pay for, or simply remembers they forgot to include something important. We have resolved this problem by implementing a smart replacement feature, letting a customer choose any other item instead of a current one without the need to get back to the shop.

Food Delivery eCommerce Platform Cieden

Add Product to Cart


Another useful tool for managing the shopping card without getting back is an opportunity to add any quantity of a chosen product. This can be done by multiplying its number within a special field in front of every item. The total price is automatically adjusted in real-time mode.

Food Delivery eCommerce Platform Cieden

Make a Purchase

Food Delivery eCommerce Platform Cieden
Food Delivery eCommerce Platform Cieden
Food Delivery eCommerce Platform Cieden

Mobile app

Responsiveness to different devices and screens is a “must-have” of high-grade digital product design, no questions asked. We have managed to dispose of much smaller space of the mobile format without any deterioration in the quality of user experience. While product cards or the checkout form turned out to become a bit more minimalistic, they still comprised all the meaningful data and actionable elements.

Food Delivery eCommerce Platform Cieden
Food Delivery eCommerce Platform Cieden
Food Delivery eCommerce Platform Cieden

Design System

To ensure consistency in the project implementation, the team developed a huge design system which is the single source of truth. Grouping all elements and components for all platforms within a project so that the teams can work together to create a product. By utilizing a collection of repeatable components, we create an exceptional user experience.

Food Delivery eCommerce Platform Cieden

Cieden went above and beyond just delivering the final piece (Figma designs), as they really took it upon themselves to understand our users' challenges, the actual use cases for the features we wanted. They challenged our thinking to create the best user experience.

They managed to break down our complex business processes into VERY clear, and actionable solutions that can easily be understood by all stakeholders in the operations team.

It seems like you can throw them any complex design issue across any industry and they will find a way to get it.

Map
prev. 
next

Meditation App

start your project with us.

Getting in touch
is easy .
Thank you for your message. It has been sent