sando.lab

Mobile Ordering App

After completing parts 1-4 of Google’s UX Design program in 2022, it was time for the main event: my first ever attempt at designing a mobile app experience from start to finish. 

I love food. love looking at it, eating it, and talking about it. I knew that centering my project around food would keep me focused and excited about what I was doing. But in a world full of ordering apps, recipe apps, and killer food blogs, what could I do differently?

 

Contribution

  • User Interviews, Personas, and Journey Maps
  • Visual and UI Design
  • Wireframes and Mockups
  • Low- and High-Fidelity Prototypes
  • Usability Testing

The Problem

Like a lot of people in my circle of family and friends, I need to watch what I eat – but I’ve always found the process of finding and ordering good, tasty food that meets my nutritional needs cumbersome. Most ordering apps offer a mixed bag, and even fewer provide details on macro and micronutrients – sodium, saturated fat, fiber, and all that good stuff.

The Solution

Enter sando.lab – a hypothetical sandwich shop focused on feeding nutrition-conscious adults and hungry gym-goers alike. Sando.lab aims to provide the tools eaters need to choose healthy meals without skimping on flavor.

 

How It Works

The sando.lab app lets users set their unique preferences and needs right up front, filtering out the noise so that they can focus on what their taste buds crave. Food allergies and other dietary restrictions, as well as which nutrients to minimize or maximize, can be fine-tuned to narrow down sando.lab’s huge selection of over 100 sandwich options. 

Initial Research

I started by conducting a series of user interviews across the app’s demographic range, then crafted unique user personas based on my findings–including Jim, a 58-year-old accountant with high blood pressure, a busy lifestyle, and vision limitations, and Alicia, a 36-year old HR manager with a serious gym routine and an aversion to cooking at home. Next, I developed problem statements and built out user journey maps for both Jim and Alicia in order to identify opportunities to improve the personalized ordering experience.

 

Wireframes and Low-Fidelity Prototype

For the screens most central to the app experience, I developed multiple rapid wireframe iterations on paper, and combined the best ideas from each into one unified design. I built these designs out in Figma and fleshed out a few key details, then created a clickable prototype of the ordering process from intro screen to order confirmation.

User Research (Round 1)

At this point, I circled back to research and conducted a moderated study with a handful of users. It was fascinating to watch participants click through the prototype in ways I didn’t expect, in some cases cycling through screens a couple of times before being able to move forward. Here are a couple of examples of issues I was able to identify and address:

Menu Screen

Users expressed a high level of interest in building their own sandwiches from scratch. Given the uncertainty around which search terms they might use to find the “build your own” screen, I made sure this option always appeared at the top of the menu.

Some users expressed a desire to toggle between filtered and unfiltered menu states after setting their nutritional preferences–so I added a simple on/off toggle button just beneath the search bar.

 

Nutritional Needs Screen

Users were sometimes hesitant to click on the appropriate button because the language was too vague, particularly on the “Nutritional Needs” screen. To address this, I updated these elements with clearer language.

Users occasionally missed their intended target when tapping elements like buttons and checkboxes. I increased the space between interactive elements and enlarged buttons/CTAs to reduce incidence of misclicks.

User Research (Round 2)

With the first round of user feedback implemented and the high-fidelity prototype now complete, a second round of moderated studies revealed additional opportunities to optimize the app experience and help users navigate the ordering process more confidently. Here are a few examples of issues I identified and addressed in this round of research:

Location Search Screen

Users struggled with navigating the original, more minimalist interface of the "location search" screen. To clarify the available options, I added field labels and separated the auto-locate feature from the search field. I also removed the buttons for zoom functionality, opting instead for a more intuitive pinch and zoom map.

 

Menu Screen

Users instinctively looked for a search field, but they easily overlooked it in my first usability study. I moved it so that its proximity to the menu would make it easier to spot. I also adjusted the layout to accommodate larger, wider photos better suited to showcasing the products.

 

Menu Item Screen

Based on user feedback, I eliminated the “half wrap” and “whole wrap” options since these were confusing. I also changed the “size” and “bread” sections to a drop-down menu, added a larger window for imagery, and changed the “nutritional needs” labels from abbreviations to full words for clarity.

The Final Verdict

The sando.lab app delivered a lot of value for people with health concerns that require tracking more than just flat calories or fat content. Among the users interviewed, those with diabetes, pre-diabetes, and hypertension expressed the most interest in the app’s personalization features and its more detailed nutritional breakdowns.

Users expressed somewhat less interest in using the app’s features to optimize meals with particular workouts in mind, but due to the limited pool of interviewees – most of whom skewed less athletically inclined – further testing would be helpful before eliminating this demographic from the app’s intended user base. 

Key Learnings

I learned that even very valuable app features may need to be bypassed at times, and that my future designs will need to take this into account. For example: although users saw the value in the “nutritional needs” customization option, they wanted the flexibility to skip it in certain circumstances.

I also picked up a greater understanding of the role user research can play in visual branding. In this case, I developed the sando.lab visual brand prior to conducting user research, and for expediency’s sake I moved forward with it as I designed the app screens – but after seeing that the most enthusiastic demographic skewed older and less athletically inclined, I’m skeptical that the darker color scheme and playful language would resonate.

Next Steps

  • Design additional screens including “full nutrition facts” screen, “user account” screen, “change pickup location” screen, and others.
  • Fine-tune the “nutritional needs” user flow and interface with further rounds of research and revision, since this is a unique selling point for the app.
  • Conduct more user research to understand whether there is interest in the core features of the sando.lab app among athletes and avid gym-goers, as we originally assumed there would be.
  • Conduct research to determine whether the current visual brand resonates with the older, more health- and longevity-focused demographic who expressed the greatest interest in the app’s features.