An order management and takeout app for a local food truck
KAMI FOOD TRUCK
ROLE
UX and UI Designer
TIMELINE
10 weeks
SKILLS
Product Strategy
User Research
Interaction Design
Visual Design
TOOLS
Figma, Adobe Illustrator, Trello, Miro
DELIVERABLES
Mobile UI Design and Prototype
AT-A-GLANCE
We undertook the challenge of enhancing Atomworks, a leading 3DS certification platform from Taiwan, by reimagining its user experience and interface to cater to developers' needs, resulting in improved visual clarity, streamlined workflows, and a user-friendly dark mode.
A need for alternative cheap food ordering experience
Amidst the rise of expensive food delivery, food trucks offer an appealing solution due to their quality and proximity. However, challenges arise from unclear locations and a slow, unorganized ordering process, prompting a need to streamline the food truck experience.
THE OPPORTUNITY
How might we optimize Atomworks testing software to enhance developers' efficiency in managing work streams?
An app with
Intuitive product-window system
Scannable, comprehensible UI
THE APPROACH
UNDERSTANDING THE AUDIENCE
Through online surveys and on-site interviews with Kami’s owner and staff, we come to understand their services, vision, unique selling points, its needs and limitations. Despite no direct Korean food rivals on Drexel's campus, competition arises from neighboring trucks due to lunchtime popularity and prime location amid heavy foot traffic.
IDEATE
To better understand the need for a food truck app, we brainstormed features to address user issues, using NUF (New, Useful, Feasible) analysis to generate diverse ideas and rank them in terms of priority in the chart below.
2. Define
PERSONA
We compile how customers say, think, do and feel about their experience to identify their 3 major pain points.
• "I'm late for class standing in line"
Kami, being the sole Korean food truck on campus, experiences a rush during lunch hours. Customers often wait up to 15 minutes to order and another 20 minutes for their food, which can be quite time-consuming, especially given that they usually have just a one-hour lunch break.
• “I get confused whether there’s an actual line at Kami or not because it’s too crowded around the truck."
Positioned right on the sidewalk, Kami can quickly become crowded with just a few people waiting for their food.
• “I'm unsure if my order is ready because my name can get lost in the busy line."
Without a system to track orders, customers are compelled to stay attentive to verbal order announcements, leading to confusion for both customers and staff.
JOURNEY MAP
With a diverse set of ideas from this ideation stage and recollection of the user personas and empathy map, we created a journey map and defined the main user task flow of a typical ordering food process of a Kami customer.
3. Ideate
IDEATION
To better understand the need for a food truck app, we brainstormed features to address user issues, using NUF (New, Useful, Feasible) analysis to generate diverse ideas and rank them in terms of priority in the chart below.
MINI CHALLENGE
Decide on Login Page placement
During sketching, we tackled the challenge of login page placement in the user flow. After crafting two user flows and surveying 10 users, we decided to position the sign up/login page as the initial landing screen for enhanced intuitiveness. Additionally, we incorporated a "Continue as a guest" option to streamline usage for infrequent users.
4,5. Prototype ⇄ Test
PAPER PROTOTYPE
For our paper prototype, we prioritize intuitive navigation and information hierarchy. We map out the main sections of the website, such as the menu, location, and contact details, to ensure easy access to essential information for our users.
REBRANDING
Introducing colors and typography to the mid-fidelity prototype, we undertook a rebrand inspired by Korean food colors. I led the branding decisions as the main UI designer, incorporating feedback from the team.
Kami App UI Design incorporates a color palette with retained Kami’s original red hues with added vibrancy, typography influenced by Hangul's geometric shapes, engaging custom icons and curated imagery, as well as established button styles with interaction states.
FINAL DESIGN
Goal 1
Optimize the speed and simplicity of placing orders
We created distinct user flows in our high-fidelity wireframes for both account-based logins and guest users, resulting in a significantly streamlined ordering process compared to our original design.
Goal 2
Facilitate Staff-Customer communication
We've introduced a notification bar that tracks order progress and estimated travel time to the food truck, eliminating the need for customers to stay constantly attentive.
Goal 3
Stay updated on location and opening hours
Additionally, we incorporated features such as order favoriting, reviewing recent orders, and a location-hours tab offering directions to Kami via their phone's map app.
LESSON LEARNED
Holistic Learning from Real-World Design Challenges
Engaging in real-world problem solving, I gained insights into collaborative teamwork, practical solutions, and iterative design processes through hands-on experiences.
FUTURE CONSIDERATIONS
Functional App Development
Given time, we'd want to delve into actual app development, moving beyond the conceptual stage.
Expanding App Scope
Considering the diverse range of food trucks nearby, a single app encompassing all could replace multiple downloads. However, this would contrast with Kami's authentic, branded experience. Evaluating this concept's advantages and disadvantages is a crucial future step.