Hii everyone! Today I want to share my another mobile application design. I created this design while participating in a UI Design bootcamp.
Overview
In this design, I didn’t conduct in-depth UX research because the primary focus of the bootcamp I attended was to learn UI Design and practice using auto-layout in Figma. Therefore, on this page, I will do my best to explain the design I created and share the feedback from my mentor for my design.
Design System
Why Reddish Orange? Orange can give a mood boost and some people find it a comforting color. Orange, red and green are often used as colors related to food (restaurants, food applications, etc.)
Why Poppins? Poppins is really good for interface design because Its unanimous qualities and pleasant. Friendly feel are perfect for websites and apps. Poppins reads well in large headers and small text, as it has a good range of weights.
The Design
In this design, I implemented and created:
- Local Style: consisting of the colors and fonts I used to build the design.
- Components: including cards to construct the design.
- Auto-layout: to maintain design consistency.
Landing Page
When users open the application for the first time, the app will display its name and a quote. Then, the application will present the first page containing the user’s address, a search button, promotions, the app’s balance, and food recommendations.
Search Page
When user click on the “What food you wanna try today?” placeholder, the application will navigate to the search page. The search page includes food recommendations based on keywords, the user’s search history, and top food recommendations.
Search Result & Restaurant Profile
The result when the user presses the search button will be as shown in the image on the left. The application will display Top Recommendations first, followed by other results. When the user clicks on a restaurant (for example, the restaurant that is a Top Recommendation), the user will be taken to the profile of that restaurant.
The feedback from the mentor on this design is as follows:
- On the search result page, there is an excessive amount of information displayed, creating a crowded impression and potentially overwhelming the user.
- The font sizes need to be adjusted, as some appear too small.
Food Detail & Cart
When a user clicks on a particular food item, the application will display details about that food, along with a button to add it to the cart. On the Food Detail page, there will be buttons to increase or decrease the quantity of the selected food. A description feature will provide information about the food. The Categories feature is designed to allow users to order the food in different quantities (for example, per piece, per box, or per slice). The last feature is “Add Extra Ingredients,” allowing users to customize their orders by adding extra ingredients to the selected food item.
On the Cart Page, there is a Delivery Location feature that displays the delivery address. The order list shows the food/drinks that will be purchased. Payment details include the selected payment method. The Checkout button allows users to proceed with ordering the selected items.
Shortcomings in the Cart Page design include:
- The inclusion of a pick-up feature, allowing users to purchase food through the app and then pick it up directly from the restaurant.
- The incorporation of a discount feature to provide users with price reductions on selected food items.
Tracking Order
The Tracking Order page will automatically appear when the user has pressed the checkout button. This page serves to allow users to monitor the progress of their orders. On this page, users can view information about the assigned delivery person and engage in interactions with the delivery personnel.
Another Things to Discuss
In creating this design, we were required to generate a minimum of three pages. I ended up creating more than three, but there are still many elements that I haven’t added, such as:
- Chat Page: where users can interact with the delivery person.
- Top-up: when users want to add funds to the application. And so on.
- etc
General feedback from the mentor:
- My mentor mentioned that the color I chose tends to look more red, while I thought I had selected a darker shade of orange. This might be due to the fact that my laptop screen is not very sensitive to color variations.
That is all! Thank you so much :)
