Street Food Mapper
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!
A functional web app for 2 type of users
Product Design, Project Management, UX Research, Web & iOS design, Graphic Design
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.
Gantt chart for planning and keeping track on the project progress
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:
Customers and vendors are generally very busy and they might not be able to find time for interviews.
It's a faster research method to receive a greater amount of information.
People are already writing frustrations, thoughts, and suggestions on the internet every day, I just had to harvest them.
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.
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.
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
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."
Based on the persona and the research, I studied the process of how they behave and think when trying to reach their goals.
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.
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 Lo-Fi Prototype
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.
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.
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.
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.
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.