STREET FOOD GUIDE

Snack Street was my Final Thesis project before receiving my Masters in Web Design and New Media.

There are plenty of travel, food, and review apps available like Yelp and TripAdvisor. Those apps are great to help users decide where to eat but rarely do we see a guide about what to eat. Snack Street identifies local, authentic dishes specific to a country or region. No more wondering what a dish is and whether its safe to eat. Snack Street will provide all the information travelers need, allowing users to spend more time enjoying their trip and less time researching.

Screenshots

Before wireframing, designing, or coding, it’s important to understand why we’re even building this product in the first place. Despite being my thesis project, I still had to create a product that people would actually want to use.

When I travel, food is a top priority especially food local to the region. For me, it’s easy to look up places to eat on Yelp or TripAdvisor, but once there, its hard to know what to order. Using this as a start, I went out and talked to people to see what their pain points were when it came to traveling and eating authentic food.

Street food consistently emerged as the best means of getting local, authentic food. However, cleanliness, water safety, and ordering difficulties also came to mind when traveling in a foreign country.

CONCEPT MAP

I wrote down pain points on post-its as well as possible solutions (features) to those problems. Seeing everything layed out helped visually organize, and consolidate ideas.

Concept Map

WIREFRAMES

I then created quick wireframe sketches to get a better sense of the product’s structure and non-linear task flows.

Sketched Wireframes

MARKET COMPARISON

I accessed the market to see what products are already available and where Snack Street can stand out from the competition.

Competitive Analysis

USER RESEARCH

Researched potential target audience based on age, frequency of travel, vacation days used, and annual income.

User Research
User Research

USER SURVEY

Sent out online surveys to get quantitative data on age and travel frequency in relation to food thoughts and concerns while traveling overseas.

User Survey

TARGET AUDIENCE

Based on research and user survey results, primary target audience will use smartphones and apps regularly, plans to travel 5+ days overseas for vacation, and is from the United States. Age range will be 18-34 years old and has an income of $75,000.

Three user personas were created to help validate design decisions. It gave a person, a story, and real-life goals behind all the statistics and data collection.

TASK FLOW 1

Task Flow 1
  • Motivation: Research.
  • Goals: Create a list of dishes to try and reference food safety tips.

TASK FLOW 2

Task Flow 2
  • Motivation: Authenticity.
  • Goals: Find authentic local food in the area and order the food in country’s native language.

TASK FLOW 3

Task Flow 3
  • Motivation: Adventure.
  • Goals: Identify food via camera feature in app.

PROOF OF CONCEPT

Refined digital wireframes were made to ensure the user task flows were as smooth and seamless as possible. Low-fidelity wireframes makes it easier to test assumptions without investing a ton of time and effort into them.

Low-Fidelty Wireframes
Low-Fidelty Wireframes 2
Low-Fidelty Wireframes 3
Low-Fidelty Wireframes 4
Low-Fidelty Wireframes 5
Low-Fidelty Wireframes 6
Low-Fidelty Wireframes 7
User Testing Results

PROTOTYPE

Built a prototype with HTML, Sass, AngularJS, and the Ionic Framework. Prototype testing focuses on the experience. You immediately get feedback on usability and flow when observing the user interacting with the product right in front of you.

USER TESTING

Iterative Testing. I tested whenever I could. As soon as I had a sequence of steps working in my prototype I would put it in front of users and see how they interacted with it.

Observations: Navigation was fairly straightforward. Users knew when to swipe with the pagination at the bottom of the screen. Noticed users attempting to click keywords as if they were links. Translation card wording was confusing. Words “loved” vs “liked” are inconsistent and testers thought they meant two different things.

User Testing Results

Modifications: Issues with back button had to be removed and replaced with global menu. Keywords on dish screen were restyled to look less like buttons. Fixed inconsistencies with wording e.g. “liked” and “loved”, all were replaced with “loved.” Reworded translation card so it’s clear what each tab represents.

Technology

HTML, SASS, JavaScript
Ionic (AngularJS + Cordova)
User Research, UI/UX Design, User Testing, IxD Design, Front-End Development