UX/UI design for the application of a restaurant chain
Research
Work on the project began with research.
Qualitative research was carried out, namely interviews with the store owner to precisely define the objectives of this project, identify strengths and weaknesses and identify potential users of the product. And a questionnaire survey to identify customer problems.
Some results of the survey and answers to the interview can be seen in the presentation. These studies helped to identify the customers' needs and problems to be solved by the developed product.
The research also included an analysis of competitors, highlighting the advantages and disadvantages of competing applications. Particular attention was paid to user feedback: What did users like about the product and what triggered negative feelings. Most users wanted a fast, simple and easy-to-use application.
Aims of the project
The most important objectives were identified following an interview with the business owner and a questionnaire. They are presented in the presentation below.
Users
In order to describe the potential users more precisely, a stakeholder map was created based on the research data.
Based on the stakeholder map and the research results, personas were developed, i.e. product users with a range of needs and problems that the product to be developed is intended to solve.
Creating a persona helped to see the product through their eyes.
Information architecture
The information architecture of the application was developed on the basis of character portraits and problem solutions. Whether the character will be able to fulfill their needs and solve problems in detail, and whether everything has been considered according to the goals of the project. If the information architecture looks coherent and it will be easy to create a user-friendly application, the user will be able to quickly interact with the information on the screens.
Warframes
Warframes were created in the first design phase of the application screens. The information architecture was taken as a basis and the necessary information was added to the screen.
A CJM was created to visualize how the customer interacts with the product. The table can be seen in the presentation. With it, it was possible to roughly recognize the user's emotions. And to track how the customer uses the product and how likely they are to solve their problems.
Color and typography
After all the research, refining the characters, creating the warframes and filling out the CJM, we worked on choosing colors and fonts, aligning objects and text to the grid, adding photos of food and icons to help the user find the information they need on the screen more quickly.
A shade of green was chosen as the base color. This is the color of leaves, which is associated with good nutrition. The other colors were chosen according to the principle of harmony and coherence.
Screens
In the presentation, you will see ready-made application screens with colors and selected fonts.
Interactive elements such as buttons and toggle switches are highlighted in the main color.
A neutral color is used for the overall background of the app so that the dishes on the menu stand out from the menu itself, the description and the price.
The main screen of the app is the menu. Here you will find the filter, sorting, search bar, menu sections by category, popular dishes and current restaurant chain discounts.
The dishes page shows all the information the customer needs about the composition, nutritional value, weight, price and cooking time. Here you can also add a dish to your favorites and rate it.
In the personal profile, you will find information about the user's addresses, added payment cards and accumulated bonuses. From your personal profile, you can quickly access your favorite dishes and place an order. You can also delete a dish from this section by clicking on the heart.
The restaurant screen contains information about the restaurant, its rating and customer reviews. On this screen you can make a reservation at a specific restaurant. This booking is displayed in the user's personal booking history.
Presentation of the project
