Designing a food ordering Mobile App — a UX case study

Andrey Herasymenko
UX Collective
Published in
5 min readDec 19, 2018

--

Over the last century, people’s eating habits have changed a lot. Technology has also contributed to the changes in consumer preference as their dependence on technology has moved them to do everything online including getting cooked meals delivered to their doorstep.

Virginia Woolf said: “One cannot think well, love well, sleep well, if one has not dined well”.

Probably, this is the one of the reason why the mobile applications for ordering food online are so popular nowadays and became great source of ideas for UI/UX designers.

This case study describes my process of designing the app from the idea of it to the final stage.

Challenge

I found that factors contributing to the popularity of online food ordering were: lack of time to prepare food, availability of variety, rewards and cash-backs. It led me to think of convenient and more attractive app for users in order to meet their expectations more precisely while ordering food online.

Task

Create UI/UX design of Mob App for ordering food online.

Problem Definition

The mobile aggregator is an application that combines various thematic platforms in order to increase their level of sales and ensure the convenience of the choice of dishes and drinks by users. A distinctive feature of the application is a single design, user-friendly interface.

I decided to create competing app where to make an order should be as simple as few clicks on mobile device. And it should be easy to understand and informative about the options and choices the users have.

Process

I’ve started the process with competitive research and I identified top three competitors. Analyzing and comparing the content of their apps helped me to determine the direction of development for FeedMe application.

Further, to build empathy with users, I started off with a set of casual interviews. This resulted in a preliminary set of requirements and creating User Personas.

Interviews helped me to discover list of main requests of the users:

• Quality of the service

• Good choice of listed restaurants

• Delivery/Take away option

• Priсe criterion

• Reviews of other users

When I had a better understanding of user’s needs I’ve made Business strategy diagram.

Wireframes

Wireframes are used early in the development process to establish the basic structure of an app before visual design and content is added. In the ideation phase I created wireframes presenting information architecture of the future layout.

UI Design

Choosing colors for designs in general is not easy. So why can’t we just choose colors for our projects based on how we feel about them or based on the trends? I’ve become more aware that knowing color theory, preferences and background of the client, culture of users and comprehension of your audience and competitors is the best way to choose right color for your project.

Researching the competition is the best way to avoid unintentional plagiarism. It will give you an idea of common color threads that run through the other companies (whether they’re using correct colors or not) and it will show you what kind of direction to avoid to ensure that you don’t create something identical.

Competitor’s Apps

FoodOnClick
Talabat
Zomato

Also I went through some interesting ideas on Pinterest and made a board with them for visualizing.

Then I did analysis of colors, their perception and influence. The orange is a warm color. If you want to create an atmosphere of warmth and friendliness, you can safely choose orange. In addition, orange can add feelings of confidence and vitality, as well as stimulate the appetite. Orange should be used for products and services that are designed for a wide audience, as it creates the impression of low prices. This is how I came up with the mood board.

Mood Board

Finally, after all researches and analysis were done I focused on designing all the screens through which a user will move, and created the visual elements — and their interactive properties — that facilitate this movement. I used things like patterns, spacing and color to guide the user and designed visual, interactive elements that respond in a way that feels natural to the user.

Prototype

Reflection

Working on this project helped me learn that user research is crucial for the whole process of design application. Responsiveness is another important point in the UI/UX design. When the app shows the user immediate consequences of their action, there is a more personal connection.

There are many people who support the idea that digital products of today should be minimalist and purely functional. However, my experience and practice shows that people want to both solve the problems and feel aesthetic satisfaction using apps. The balance of these things was my responsibility as UI/UX designer on this project.

What do you think about this project? I would be happy to hear a feedback from you. Get in touch for work inquiries, any UI/UX Design topics or just to say “hi” at andriy.herasymenko@gmail.com or at LinkedIn. And you can check my website andreyherasymenko.com for more projects.

More Projects

UI/UX Design of Mobile app for Photographers — LightM

GarageShop — a UX case study

--

--