As part of my CS 130 elective at Brown University, we were asked to design an interface for an emerging startup. The startup we chose is called 'Dahmakan', a food delivery service based in Kuala Lumpur, Malaysia.
My Role : UI/UX Designer, Visual Designer
The goal of the startup is to provide fresh, nutritious food, quickly and at low cost. The startup uses an efficient system by using expert chefs to prepare the healthy meals, while collaborating with engineers to ensure fast, low cost delivery.
Duration : 4 weeks
Design an app for Dahmakan that allows the user to carry out their intended task, while being easy-to-use and staying true to the brand.
While our group looked at the website to understand the company, I conducted my own brand and user research to gain a better understanding of the platform's needs and design aesthetic, so I could apply those to my prototypes. I learned about their average user, how the service functions and their color palette. I also looked at other food delivery apps to learn about their user flow and functionality.
Platform Key Features
In house chefs + packaging
Rotating limited daily menu
Prime membership feature
Live food tracking
Huge array of options and sub-menus
Clean, minimalistic aesthetic
Bright, bold, accent colors
Easy user flow
Food images are the focus points
Requires you to enter address before adding an item to cart
Each dish has a detailed description + ingredients list + user reviews
Messaging chat bot
Prime feature is not particularly advertised
Color Scheme :
Name : Prompt Pam
Age : 25
Location : Kuala Lumpur, Malaysia
Occupation : Consultant
Lunch Break : 45 minutes
Cooking Level : Beginner
Motivators : Likes quick, fresh meals she can purchase near the workplace, punctuality, loves spending lunch time to interact with coworkers.
Frustrations : Soggy and/or stale food, long queues at nearby restaurants, deciding where to eat everyday.
Ideation and Sketches
After we finished finalizing our designs, we started to create mockups for 8 different screens using the software Ux Pin :
Log in page : Lets existing users sign in, and new users sign up
Delivery location page : Prompts the user to enter their delivery zip code, to check if Dahmakan delivers in their location or not.
Main menu page : Lists the various menu options available varying by date, time and type of dish (i.e. mains, sides, desserts and drinks)
Contact us page : Provides contact information about Dahmakan.
About dish page : Lists more information about a particular dish (i.e. ingredients, detailed description, calories)
Cart page : Shows the user all the items in their cart, and an option to proceed to the checkout page.
Select Address : Allows the user to enter a new delivery address or select an existing one.
Checkout page : Allows the user to enter credit card information and complete the transaction.
Allows the user to check if the app can deliver, without having to carry out the entire process and find out at checkout.
If you're not in the delivery area, you can request to add it!
Allows the user to filter meals based on date, time of the day and type of meal.
Name of the dish, image, and a plus button to quickly add it to the cart .
The user can adjust the quantity of each dish added to the cart.
Allows the user to select a delivery address, day and time. Then they can proceed to checkout.
Shows you the filter settings in dish overview, to check for availability.
Provides a detailed description of the dish and other information such as and ingredients, calories, plus a big and bold add feature.
I designed the first two screens of the app above!
1. Find out more about and order a Vegetarian Pasta Bake
[Success: Yes, No]
2. Log out at the end
The user will be able to perform the given tasks easily since all the features needed to execute the task are in the user’s direct line of sight. In case of any errors while performing the given task, it is expected that the user will be able to quickly resume their activities without having to remember what they had to do to get to a certain state. Since everything is visible and easily accessible to the user, we expect that the user will be able to perform tasks efficiently with very little or no confusion. However, if there is confusion, it may be with the selecting a date and time function, as each day has a different menu.
This prototype doesn't yet have the screen changes when the date changes. Assume that you know that for each date that you choose, the menu changes, but you are ordering for the date and filter already selected.
1. Did you feel as though any options for food selection were missing?
2. How clear was the menu page? Would you like less information to be seen (for example, using a drop down menu instead of buttons for filtering the menu)?
3. Assuming that you saw that clicking on a different date on the menu screen displayed a different menu, does the date and time selection on the menu and check out make sense?
User Testing Overview
Random online users
Task - Learn about the pasta dish
Information architecture / clarity?
My Takeaways From the Feedback
We received feedback from 3 anonymous users. Since our prototype was very basic (limited screens), the users said they found it difficult as only certain buttons could be clicked. They also mentioned that the process of adding a dish to the cart was unclear, as the “+” button on our interface seemed arbitrary. The date of the order was also unclear for most users. The font size of the “Menu” page was too small for a user, and our prototype cart had more items than the task asked for, so users were confused about the additional items. On the positive side, users mentioned that they enjoyed the aesthetics of the app, and the color scheme. It was described as “clean cut and simple”.
Our hypothesis was partly true since users understood the task and knew how to carry it out, but was unsure if they succeeded in doing so. In terms of visibility, we succeeded for most screens but had issues with the main menu. As we predicted, users had an issue with the date and time section.
Based on user feedback, a few things we could
incorporate/change about the interface are as follows –
• Bigger font size
• Removal of “plus” button, and instead insert an “Add to cart” option
• A notification saying “your item has been added!” when the user adds a dish
• Selected address shows up on checkout page
• Checkout process shows taxes in total amount
• Delivery date and time clearly mentioned during checkout/add a physical calendar to make it more clear
The most successful part of our prototype appeared to be the uniform aesthetic, and simple layout. The user was not bombarded with information and the process of ordering a dish seems direct. Although, due to glitches/ bad transitions, it is unclear whether the user has been able to perform their task or not. Since we knew the sequence of the app we assumed the user would know what to do next in terms of which buttons to click; instead in our user testing, we should have mentioned more clearly what the user can press and cannot. It was challenging to include every fine detail, as these are things that the user notices, but may go unnoticed by the designer. Overall, the functionality of the app seems fine but we could work on small details that can make the user experience more smooth and rewarding.
Successes - uniform aesthetic, simple layout
Weaknesses - glitches, bad transitions, font size too small, '+' button is ambiguous, date of order not clear enough, menu page is too cluttered.