Challenge: Design a mobile ordering app for an Italian restaurant.
Solution: An interface that visually organizes data, and presents relevant options to personalize the user experience by saving time ordering food.
Research
Research Goals
Determine if users can complete core tasks within the low fidelity prototype of the food ordering and delivery app.
Determine if the app is difficult to use.
Research Questions
On average, how many times a month does a user order food through the app?
What frustrated users most about placing their order through the app?
What function is most valuable to users when ordering through the app?
What can we learn from the steps the users take to customize an order?
Is the updating information process easy for users?
Persona
Peter
Age: 54
Education: Finance
Hometown: Chicago, IL
Family: Married, 3 kids, dog
Occupation: Financial Analyst
Peter is a 54 year old male who is married with 3 kids and a dog. He currently works full time and really enjoys to cook. Peter doesn’t use food ordering apps very often and stated that he does it about one time per month or less.
User Journey Map
My goals by creating this user journey map was to understand the process a user had to take from launching the app all the way to eating their food. I also wanted to take a deeper look into understanding their feelings and find areas of improvement.
Design Process
Wireframes
For each page of the app, I sketched out five different layouts, and then a refined one. This wireframe is of the menu page.
A few examples of more refined paper wireframes before I created digital wireframes
Usability Testing
Low-fidelity prototype
Unmoderated Usability Study
Task 1: Open up the Bella Vita app and login to your account. (This step is given that you already have an account and are downloading and using the app for the first time).
Task 2: From the homepage, navigate to the menu and create a customized pasta dish for yourself to add to your cart and then, go to cart. Do your best to talk me through your thought process.
Follow up question: How easy do you feel it is to customize your own pasta dish the way that you like it?
Follow up question: What was easy and what was challenging about the process?
Task 3: If I said “add an appetizer to your order”, would you know what to do? Please try the out for me.
Follow up question: Could you please try that out for me?
Follow up question: Did you find anything confusing about that process?
Task 4: From the homepage, where would you go to change or update your address and payment method?
Final question: How do you feel about the Bella Vita app overall? What did you like and dislike about it?
Insights
Based on the theme that participants were unable to fully customize their product, an insight is to make it easier for participants to select and deselect options as they please.
Based on the theme that participants were annoyed that there was no order verification, an insight is to add a confirmation page, so they can verify or edit their address or payment method.
Based on the theme that participants want easier access to their account, an insight is to add an account/profile icon to the top of each page.
Final Iteration
Mockups
My goal was to allow users to see an image of the food as well as its name and price. I wanted the photos to be large enough to allow the users to tap on them easily.
Before Usability Study
After Usability Study
High-fidelity prototype