© 2018 Joann Feng

Street Food Mapper

WEB APP

Street Food Mapper started as a collaboration between myself and Peiran Qiu, a computer science student at Northeastern University, for her web development class. A front-end developer herself, Peiran wanted to focus on the engineering portion of the project and invited me to be the sole UX/UI designer to support her. The project had 8 weeks timeframe, by then the website needed to be fully functional. 

 

In Aug 2018, we successfully launched the Street Food Mapper website. Users can now find trucks and see their real-time status on the interactive map. Upon launching, Street Food Mapper was featured on the Product Hunt homepage and received more than 330 upvotes and much love from the PH community!

Challenge

A functional web app for 2 type of users

Collaborator

Peiran Qiu(Web Developer)

My Role

Product Design, Project Management, UX Research, Web & iOS design, Graphic Design

Constraints

8 Weeks

Problem Statement

 

Occasionally, food trucks change their locations or schedule. Even if the vendors update their websites and Twitter, that changes are not always reflected on Yelp or google maps directories immediately.  For a business that can move multiple times a day, tracking food trucks can be frustrating. Unhappy customers can also hurt food truck business' brand.​

Process Overview​

Gantt chart for planning and keeping track on the project progress

Research

 

Given the time constraints for the whole project, I had to be time-efficient in user research. I used Sales Safari method(observing on forums, articles, app store/website reviews, etc) to uncover the pain points from both the customers and the vendors for the following reasons:

Avoid Interruption

 

Customers and vendors are generally very busy and they might not be able to find time for interviews.

Faster ​

It's a faster research method to receive a greater amount of information.

Honest Answers

 

People are already writing frustrations, thoughts, and suggestions on the internet every day, I just had to harvest them. 

current solutions.jpg
user reviews on competitors.jpg
Pain Points and Opportunites

 

 

In short, the root pain points both the customers and vendors share in common is there has yet a product that offers consolidated and accurate(always updated) truck information. There are many existing products that aim to resolves this problem, but they all fall short in some ways. I decided not to invent something completely new, but rather take a close look at what people are using currently, what they think about them, and find ways to improve them.

Customer's Value

 

  • Accurate time and location info including trucks’ schedules and realtime status.

  • Truck information including photos, menus, popularity, and payment options etc.

  • Bookmark feature that can be quickly accessed.

Vendor's Value

 

  • Strengthen trust in brand by making schedule as updated and accessible as possible.

  • Minimize effort of updating truck status: update one single site and synchronize all others is ideal.

  • Increase exposure and sales

Design Goals
 

Create a web app that aggregates information from the scattered sources into a single destination, where users can search for all of the currently running food trucks using various criteria including food category, status, and the user’s bookmark list. Also create a portal for vendors to add business pages that connect to their existing business profiles on other sites.

Needs of Different Parties​

Daniel "the Foodie"

“I’m always on the look-out for the latest food trends and I like to let food take me onto the next adventure.”

Soh Eun "the Frequenter"

 

“I only want to know where the trucks are when they’re actually open, and I want to know about it in advance."

Gabriel "the Stumbler"

 

“I like to stroll around and discover unexpected new things."

Rosa "the Vendor"

 

“It is always a pain updating our schedule on multiple sites. For now we mainly use Twitter to inform customers our status."

User Journey

 

Based on the persona and the research, I studied the process of how they behave and think when trying to reach their goals.​

 

 

User Flows2.jpg
User Flow​

 

 

Mobile-first Approach

 

Knowing the end product needs to be responsive WebApp, I designed with the mobile-first approach, started sketching for the small screen, and then worked my way up to the desktop browser. The mobile-first approach puts a number of constraints such as screen width and bandwidth. Designing within these parameters forced me to prioritize content ruthlessly.

 

Features to prioritize for mobile:

1. Allowing users to search and browse food trucks' current location, opening status on the map or list.

2. Bookmarking and accessing bookmarks. That means log in/log out functionality.

Mobile Wireframe
Food Truck Mobile Wireframe.jpg
Website Wireframe
 

The mobile design became the basis for the website design. The web design has added functionality include vendor portal and a landing page for branding. I also made sure to design responsive layouts to optimize user experience across mobile and browser.

 

Web Wireframe.jpg

Home Page

Main.png

Truck Page

Truck Page 2.png

Customer Sign In / Sign Up

Web_Customer_Customer Log In.png
Customer Sign Up.png
Web Lo-Fi Prototype

Vendor Dashboard

Dashboard_No truck.png
Web_Vendor_Dashboard.png

Vendor Truck Page

Web_Vendor Sign Up_ Step 2.png

Vendor Sign in / Sign Up

Web_Vendor Log In.png
Web_Vendor_Sign Up.png
Testing the Water
 

Learning from many great mentors in building great products, one technique that people always use is to reach out to the potential users and the greater community early in the game, get their reaction, and use those feedback to improve your design.

It was 2 weeks before the deadline, and I was really hyped to try this out for Street Food Mapper. I was learning basic HTML and CSS, so, I quickly coded a teaser page with a countdown clock, put it up online as our temporary home page, and put it up to my social media. Since it was a quite mysterious teaser, my inbox did not get flooded with messages, only several people were asking me about what it was we were doing. 

Your Video Title
Graphic and Logo Design
 

Towards the end of the low fidelity design, as the developer wrapped up her back-end development and moved into the front-end using my design,  I switched to finalizing the visual identity of the site.

 

I decided to test the water with the public again. When my team cannot decide between design options on our own, I conducted votes on social media to get crowd opinions, making sure the graphical languages are intuitive and strong. This time, the voting was incredibly engaging and brought me great inspirations. I received a lot of responses, feedback, and suggestions, both from my designer and non-designer peers. It was amazing to make decisions with the help with people as well as creating a sense of community of building something interesting together.

Web Hi-Fi UI

 

Main.png
Truck Page.png
Sign In.png
Sign Up.png
Manage Password_A.png
Dashboard_No truck.png
Dashboard.png
Truck Page_ with Yelp connect.png
Truck Page_ Preview.png
Mobile UI
 

After I handed the specs to the developer, I went back to wrap up the high fidelity design for the mobile device. Some functionality that was designed at the wireframing phase were tweaked or removed, as the design evolved.

User Test​

 

5 users participated in the tests and were given the following tasks:

  • Find food trucks that you want to try and favorite them.

  • Find out what your favorited trucks are open now and get directions to it.

  • Create a new truck profile page and complete filling the information as a truck vendor.

Key Findings

4/5 users felt the integration of information from different sources into one place saves time.

5/5 users said the interactive map with search function and filters is easy to use to find truck options​

4/5 found the graphics and UI attractive and easy to navigate

4/5 users thought the twitter embed was to show promotions and was not meant to supply realtime status information.

2/5 users suggested that map adds a “near me” filter

3/5 users found themselves uncertain about where the logo at the top-left corner of the vendor pages will take them to.

What I learned

This product was developed and launched under constraints -- many decisions were made in consideration of feasibility in terms of time and resources we had during the time of development. To further improve the project, the critical next step is to interview with food truck vendors and customers to get a deeper evaluation of the product.