MOBILE APP FOR A CUSTOM SANDWICH SHOP
As part of Google's UI/UX certificate, I was tasked with creating prototypes for a mobile app for a sandwich shop. From research to revisions, I went through each step of the iterative design process to build towards a functional solution.
After receiving the prompt, the first step was to begin fleshing out the target users of the app. I thought about who would be the target audience of our app -- most people looking for a quick, healthy, and "hit the spot" bite to eat -- and drafted two personas based on that.
These user personas helped to draft detail-view and big-picture user journeys, where I walked through the pain points these users would experience when trying to order lunch, and in ordering from other shops.
 User Persona 1 |  User Persona 2 |
|---|
COMPETITIVE AUDIT
Before drafting an app, it's important to ensure we're not wasting anyone's time by rebuilding the wheel. A competitive audit helped me to find what sort of applications and restaurants already existed on the market, as well as what these applications lacked.
This audit helped me realize that, among the fast food sandwich apps, none had a live-update feature like other food types, like pizza restaurants. Additionally, calories, ingredient lists, and running totals were often hard to find per ingredient.
PAPER & DIGITAL WIREFRAMES
I took to paper to iterate upon the major screens I wanted in the app, which allowed me to quickly decide between designs that worked and didn't work before investing time into digital versions.
After working on several versions, I took the best of each and created low-fidelity wireframes in Figma.
LOW FIDELITY MOCKUPS
After creating base wireframes, I started building upon them to create low fidelity mockups with more fleshed-out visuals and minimal functionality. This first draft was necessary to then run user-studies on, to see what could be improved.
USABILITY STUDY
The most important part of the design process is incorporating feedback from the users. To do this, I conducted a usability study where I gave five users several prompts to follow and had them narrate their thoughts allowed as they traversed. This gave me valuable information on where my initial design failed:
Study participants were left anonymous for confidentiality reasons.
Participant 2
"I think you should be able to customize for each section [of a prebuilt sandwich right next to the listed ingredient. Having to scroll down to the bottom makes me feel like I can't customize."
Participant 5
"I'd love if it highlighted when I made a selection. Add feedback when an option is clicked; I couldn't tell if it was registering that I was selecting an item or not."
Participant 5
"The hardest part for me was adding to the cart." "I feel like it doesn't show me what I'm actually ordering, and I can't tell if I added it properly."
MOCKUP IMPROVEMENTS
Taking into account the feedback from my users, I adjusted the screens and connections to create an improved user flow.
As I move forward with this project, these refined mockups will allow me to efficiently apply brand styles to the components and add more specific interactions and animations.
VISUALS
Now that low-fidelity prototypes were done, it was time to move onto the next stage - visual design. I considered fonts, color palettes and contexts, icon and button styles, and more (photo treatment, language, etc).
BUILD OUT
After the tests, the next step was to apply this styling to the rest of the prototype screens.