Nico's Tacos
Project for Google UX Design Professional Certicifate
Background
This project began as a generated design prompt in the Coursera Google UX Professional Course. It read, "Design a nutrition calculating app for a Taco Truck". This was right up my alley, considering I am a former fitness and wellness professional. Not only would I wonder the types of nutrients in foods from restaurants, food trucks, taco trucks, etc, I would also regularly teach clients on how to accurately read labels, count macros and just generally make the best nutrition choices they could when eating out. So when I saw this prompt, I thought it would be the perfect first UX project!
Solution
The Nico's Taco Truck mobile app! An app that includes a nutrition calculator and gives users the ability to create custom orders based on their fildered nutrition, allergin, or caloric needs.
Goal
Design a mobile application for a taco truck that gives users the ability to create custom orders based on ingredients chosen and receive real time nutrition/allergen/caloric content information regarding their selection.
Problem
When ordering food, not knowing the nutrients and/or ingredients can make it difficult for individuals with certain conditions, allergies or nutrition needs to feel confident in their food choices.
My role: UX/UI Design/ Research/ Branding/ Wireframing/ Prototyping/ Testing
Design Tool: Figma
The Process
Empathize
User research
Pain Points
1.
User Research
I conducted interviews to better understand the audience I am creating the app for. In conclusion I was able to identify common pain points and determine the primary user groups for the application. This gave me a great base to create my personas in the next phase of the design process.
User Identified Pain Points
Time
Accessability
Usability
It can be hard for working adults with families that have certain nutritional needs have the time and ability to make all meals for their families every day.
Most taco and food trucks have no transparency in their nutritional information, so it’s hard to know what your ingesting.
Transitioning from waiting in line to using an app to order can have a learning curve which may frustrate some users unfamiliar with the technology.
Define
Personas
Problem statements
User journey maps
2.
Persona and Journey
Problem Statement
Leslie is a busy, working, mother of 3 children who needs to know the nutrition content of the food she and her family consumes from the Taco Truck because she is diabetic, and her children have food allergies and she doesn’t have time to make all of their meals.
Leslie's Journey
Mapping Leslie’s user journey revealed how helpful it would be able to individually select ingredients or allergens to omit from her menu using a mobile application.
Ideate
Identify key competitors
Competative audit
User flow
Storyboards
3.
Competitive Audit and Analysis
Key Competitors
Myfitnesspal
Chipotle
MyPlate
STRENGTHS
WEAKNESSES
STRENGTHS
STRENGTHS
WEAKNESSES
WEAKNESSES
Brand recognition
Huge food database
Easy to add new foods
Easy to track specific nutirion needs
Offers premium tracking options
Multiple languages
Immediate paywall
Takes away previously free features
No vetting of user created foods in database
Brand recognition
Easy user flow
Ability to edit ingredients
Real time calorie and macro updates
Save meals and orders
Live track of orders
Offers rewards
Frequent app crashes
No ability to split payment
Location services sometimes chooses further Chipotle location
Incorrect items recieved
Government program
Fully responsive app
Includes food database
Multiple languages
Immediate paywall
Not a lot of features
Small database
Unable to add new foods with free version
Starting the Design Process
User flow
At the beginning of the design process, I created the initial user flow. This flow would adapt and change as the design progressed, but served as a great starting point!
App Navigation
Based on the user flow, I designed this simple site map that is functional and easy to navigate.
Storyboards
I created storyboards to map out different scenarious for needing the app to better determine the flow and features.
Prototype
Wireframes
Prototypes
4.
Wireframes
Sketching up several paper wireframe options gave me a good idea of how the application could function prior to building the prototypes digitally.
Paper Wireframes
Lo-Fi Wireframes
During the initial design phase, I wanted to make sure nutrition preferences and customization was front and center based on user research and feedback of the designs.
Lo-Fi Prototype
This low fidelity prototype shows the initial design idea with multiple connecting screens and menu items and the ability to complete a user flow thru many pathways.
Test
Usability testing
Final mockups
Completed prototype
5.
Usability Studies
Mockups
Early designs had multiple different menu options which could confuse or overwhelm the users. I decided to simplify the main menu page, but emphasize those menu options in the customization section of the app.
I switched from radio buttons to checkboxes for the customization section to go along with generally accepted design guidelines as radio buttons are typically used for selecting only one option from a list. I also separated the Allergies into its own section.
Users loved that the different options were front and center, but they also felt there was too many options. I cleaned up the menu while also simplifying the navigation menus at the top and the bottom while also adding in a second font and a logo to help differentiate and bring awareness to the branding.
Final Mockups
Hi-Fi Prototype
The final prototype presented a more fluid user flow, less menus, simplified customization and more refined components to allow for a better user experience.
Accessability
Language
Vision
Users can choose language of choice upon the initial set up of the application.
An adjustable audio component to read aloud text. Text size can be increased for better viewing along with zoom options.
Responsive Web Design
The second project for the Google UX Design project was to optimize a desktop website for the same prompt as the mobile application.
