Project Overview
The Problem
Busy users don’t have a lot of time to order and wait for their food to be delivered.
The Goal
Create an app that helps users order their food in just a few steps.
The Product
Porco Rosso is a Gourmet Sandwich Shop located in a major city. Porco Rosso strives to deliver high quality sandwiches and beverages. They target customers like college students and workers with busy schedules.
My Role
UX designer designing an app for Proco Rosso from conception to delivery.
Responsabilities
Conducting interviews, papers and digital wire framing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
Project duration
October, 2021 to November, 2021
Understanding the user
I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. Primary user group identified through research was students and working adults who don’t have much time for lunch.
This user groups confirmed initial assumptions about Porco Rosso customers, but research also relvealed that time was not the only factor limiting users. Other user problems included obligations, interests, or challenges that make it difficult to go tu restaurant in-person.
User pain points
Time
Students and working adults are too busy to commute to a restaurant or prepare a meal.
Process
Some apps take too many steps in the process of ordering food
Precision
Users need a precise tracking system for their delivery
Persona & problem statement
Annie is a busy Project Manager who needs an easy and quick option for ordering high quality food because she has short lunch breaks.
User journey map
Mapping Annie’s user journey revealed how helpful it would be for users to have access to a dedicated Gourmet Sandwich Ordering app for Porco Rosso.
Starting the desing
Paper wireframes
Taking the time to draft iteration of each of the screen of the app on paper ensured that the elements hat made it to digital wireframes would be well-suited to address user pain points. For the home screen, I prioritized a quick and easy ordering process to help users save time.
Digital wireframes
As the initial design phase continued, I made sure to base screen design on feedback findings from the user research. This lead to the elimination of custom made sandwiches, and the creation of a very neat menu display and a button to re-make previous orders.
Usability study: findings
I conducted two rounds of usability studies. Findings from the first study help guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.
1. Menu
Users want a easy to navigate menu
2. Tracking
Users want to know when their food is being delivered
3. Introduction
First time users need a quick introduction to the app
Refining the desing
Mockups
Early designs allowed for some customization, but after the usability studies, I added additional options to the Delivery Tracker. I also revised the design so users see the exact moment they can meet up with their delivery person.
The second usability study revealed confusion with the checkout flow. To make it easier for users, the Cart was upgraded with more features to edit their orders without having to go back to the menu. Users can add more items or eliminate them with one tap.
High-fidelity Prototype
The final high-fidelity prototype
presented cleaner user flows
for creating an order,
proceeding to payment and
tracking the order. It also met
users needs for an option to
get notifications or allowing
calls from the delivery person.
View the Porco Rosso
high-fidelity prototype.
Final Mockups
Takeaways
Impact:
The app makes users get their food in a way that doesn’t affect their busy lives. It can be customized in many ways to fit the needs of different users.
What I learned:
While designing the Porco Rosso app, I learned that the process of creating an app can take different turns and it’s a very unpredictable journey, but in the end, when it makes the user’s life easier, I feel like I’ve achieved my goal.