Case Study:
The Crafty Corndog | Mobile App Design Concept
Project Overview
The Product:
The Crafty Corndog is a regional food truck located in metropolitan Boston. They serve artisanal corn dogs and side dishes, and allow users to customize orders by offering a wide variety of gourmet toppings. They offer a small spectrum of competitive pricing. The Crafty Corndog targets customers like commuters and workers who need a quick and fast lunch option.
Project Duration: August 2021 to September 2021.
The Problem: Busy workers and commuters lack the time necessary to prepare a meal, and want a unique lunch option to break up their routine.
The Goal: Design an app for The Crafty Corndog that allows users to easily order gourmet artisan corndogs and pick them up from the food truck.
My Role: UX designer designing an app for The Crafty Corndog from concept to delivery.
My Responsibilities: Designing with empathy and without bias. Planning & conducting user research, interviews, & surveys. Synthesizing & diagramming interview & usability study data to form insights. Composing wireframes, building design systems, & creating prototypes via Figma & Adobe Xd. Iterating on designs & progressing user research.
Understanding the User
• User Research
• Pain Points
• Personas
• User Journey Map
User Research
Summary:
I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. A primary user group identified through research was working adults who don’t have time to cook meals. This user group confirmed initial assumptions about The Crafty Corndog’s customers, but research also revealed that time was not the only factor limiting users from cooking at home. Other user problems included obligations, interests, or challenges that make it difficult to get groceries for cooking or go to restaurants in-person.
Pain Points
Time: Working adults are too busy to spend time on meal prep.
Accessibility: Design an app for The Crafty Corndog that allows users to easily order gourmet artisan corndogs and pick them up from the food truck.
IA: Design an app for The Crafty Corndog that allows users to easily order gourmet artisan corndogs and pick them up from the food truck.
Personas
Jake Jones
Problem Statement:
Jake is a busy contractor
who needs a quick and inexpensive lunch option because he is trying to keep to a budget and doesn’t always have time to cook.
Nancy Lam
Problem Statement:
Nancy is a busy office manager
who needs a quick and and easy lunch option because she doesn’t always have time to take a full lunch break.
User Journey Map
Jake’s Journey:
Mapping Jake’s user journey revealed how helpful it would be for users to have access to a dedicated app to order in advance from the food truck.
Starting the Design
• Sitemap
• User Flow
• Paper Wireframes
• Digital Wireframes
• Low-fi Prototype
• Usability Studies
Sitemap
Mapping the Design:
I made sure to consider the users journey when constructing the initial sitemap. My research suggested that most users would prefer to browse customization options before they place an order, so I structured the site around that option.
User Flow
Calculating the Flow:
Planning the user flow revealed that the ordering process would ideally be linear to allow for the best user experience. I decided that users would have the choice of either building an order from scratch, or selecting pre-determined menu items.
Paper Wireframes
Planning the App:
Taking the time to draft iterations of each screen of the app on paper ensured that the elements that 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.
Stars were used to mark the elements of each sketch that would be used in the initial digital wireframes.
Digital Wireframes
Clarifying the App:
As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research.
Digital Wireframes
Enhancing the App:
Easy navigation was a key user need to address in the designs in addition to equipping the app to work with assistive technologies.
Low-fi Prototype
Connecting the App:
Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was building and ordering a corndog, so the prototype could be used in a usability study.
View the Crafty Corndog
Usability Study: Findings
Testing the App:
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.
Round 1 Findings
Users want to order quickly
Users want more topping customization options
Users want a delivery option
Round 2 Findings
The checkout process has no way to delete items
Users want to be able to re-order
Users want to customize the map
Refining the Design
• Design System
• Mockups
• Hi-fi Prototype
• Accessibility
Design System
Creating the Assets:
The food truck is an impulse-driven business model, so I designed art assets and chose colors that leaned toward a fun and friendly aesthetic.
I chose sans-serif industrial looking fonts that seemed fitting with a food truck "lunch casual" atmosphere.
Mockups
Optimizing the App:
Early designs allowed for some customization,
but after the usability studies, I added a more robust topping list. I also revised the design so users see all the customization options by scrolling.
Mockups
Improving the App:
The second usability study revealed the users frustration with no option to delete items from their order. To address this issue and streamline the ordering flow, I added an edit and delete button to the order summary screen. I also added a prompt screen to confirm item deletion.
Hi-fi Prototype
Finalizing the App:
The final hi-fidelity prototype presented cleaner user flows for customizing a corndog and sending the order to the truck. It also met user needs for editing their map type as well as more customization.
View the Crafty Corndog
Accessibility Considerations
Provided access to users who are vision impaired through adding alt text to images for screen readers.
Used icons to help make navigation easier, and allowed map type customization (walking, public T, ect).
Used detailed imagery for corndogs and toppings to help all users better understand the designs.
Going Forward
• Takeaways
• Next Steps
Takeaways
Impact:
The app makes users feel like The Crafty Corndog really thinks about how to meet their needs.
One quote from peer feedback:
“The app made it so easy and fun to pick my order! I would definitely use this app as a go-to for a fast and convenient lunch.”
What I learned:
While designing the Crafty Corndog app, I learned that the first ideas for the app are really only the beginning of the process. Usability studies and peer feedback influenced each iteration of the app’s designs. I plan to continue testing the app and add features for the truck to also use the app for order processing.
Next Steps
Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.
Conduct more user research to determine how the app will function on the side of the food truck - will there be a separate app that the food truck uses to process orders on their end?
Let's Connect!
I really appreciate your time reviewing my work on the Crafty Corndog app!
If you’d like to see more or get in touch, my contact information is provided below.
e-mail: hillmcmail@gmail.com
website: www.hillmcl.art
Thank You!