I conducted interviews and created a survey to understand users' needs. The primary user group identified through research was the restaurant chain’s customers.
The initial assumption was that customers only need to know when their orders arrive, but research revealed that customers want to track their orders route and estimate themselves when it comes. Users also want to know more details about their order shipping process, including the shipper contact.
Online survey, interviews
After receiving feedback from user research, I gathered the data, synthesized users' pain points, and came up with the principal goal statements for the tracking app. Our sushi order tracking app will let users follow the shipper's position on the map; in which people who are in inconvenient situations to contact the driver by monitoring the driver's location through GPS. We will measure effectiveness by how many users use the shipper route tracking feature.
Sometimes users are in an inconvenient situation to pick up a call from the shipper. Customers don’t know where the shipper is on the delivery route.
The ordered food online apps aren’t equipped with multiple languages.
There is no shipper's contact. Customers have to contact the restaurant to know when the order arrives.
I also drew personas based on some groups of participants to empathize with users and create user experience stories which form the basis for the design process in the next step. Based on the research, there were two forms of the users' group. The first one is foreigners who face language barriers. The second one is busy individuals who order food online frequently via an app and have some issues tracking their orders because most apps don't offer enough information.
After the personas step, I created two user journey maps to focus on how specific personas think and feel at every step of the journey. This step benefits a designer by reducing the bias they might have and identifying improvement opportunities.
Next, I gathered the problem statements, looked at the personas to grasp the user's needs, and started digging into the paper wireframes phase. With each screen, I made five sketches. Playing around with papers is exciting, but I didn't let myself dive into it too long. I set a timer for about 3-5 min for each screen drawing. After I was done with all sketches for all screens, it's come to the evaluation and selection stage. I graded from 1-5 stars for each section or screen, then combined the most excellent parts into one final screen.
Taking the time to draft iterations of each screen of the app on paper helped develop lots of ideas. I prioritized displaying the user orders today and the delivering orders on top for the home screen.
Following the paper wireframes step, I transferred all paper wireframes into digital wireframes using Figma. Early user research revealed that customers want to see their ongoing orders first, so I displayed all the orders with the status delivered on top of the screen. I also added a search function in which users want to search for their order by shipper name or phone number if they have lots of ongoing orders. This app also supports multiple languages, and the icon for switching between languages was placed on the top bar, so users can switch to their desired language on every screen they go to. Finally, I added one bottom bar for an easy path in navigation; users can come to their order list from any screen.
Next, in the designing mockups stage, a sticker sheet was created to reuse the design elements on many screens and save time. I chose an orange color to present the app's logo color and the call-to-action buttons. Because orange is energetic, it will inspire users about the transition, the delivery of delicious sushi orders. I applied the 60-30-10 color principle to the visual design step. So, I picked the green color to highlight and emphasize elements, and the remaining will place white and black shades.
From the mockups and digital wireframes, I linked the relational screens to make low-fidelity and high-fidelity prototypes ready for the usability studies phase. I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.
Users want the tracking route icon shouldn’t be hidden.
Users want more cues for the ongoing order list.
Users want bigger symbols for navigation.
The call-to-action color is inconsistent.
Shipper phone and name text are small.
Early design hid the calling shipper and tracking route features in the floating hamburger menu button. Therefore, after the first usability study, I revised the buttons to be visible on the bottom of the screen to replace the bottom bar.
The second usability study revealed that some text having call-in-action orange color in the order details page misled users. Users thought clicking on the orange phone number could call the shipper. So I updated all the orange text to green.
After the first usability study, I gathered participants' feedback to develop insights. Based on the insights, I iterated, updated my mockups. After that, I conducted my second round of usability study. The second study showed that most users felt comfortable with the working flow, and no one had any obstacle to completing their tasks. However, some suggestions regardings highlighted text color confused users, so I reformed the phone text color from orange to a green shade.
The app satisfies Suzi restaurant chain customers by addressing their needs and saving their efforts.
One quote from peer feedback:
"These are great features, I often have to call a restaurant to check is my order on the way."
While designing the Suzi app, I learned that empathizing with users and understanding their needs is crucial to driving you through the design process. In addition, iteration design steps after usability studies improve your design to be more comprehensive.