SFood Truck

Provides a platform to connect food truck owners and customers


Role: UI/UX designer
Tools: Adobe XD, AI, PS, Sketch, AE,
Duration: Spring 2021
UI_icon
UI/UX DESIGN

PROJECT'S PROCESS

1. Research
Data, Customer, Problem,Introduction,
Competitors, Solution,
Key Words

2. Branding
Logo, Branding, Guideline, Typograph, Collateral

3. UI / UX Design
Website/APP Initial Structure, Personas, User Task Flow

4. Proof of Concept
Icons, Website Wireframe/ UI,
APP Wireframe/UI,
APP UI, Mock Up,
User Task Flow Video
5. Advertise
Signboard,
Social Media,
Logo Video Promotion

6. Conclusion
Conclusion



01 /

CHAPTER

RESEARCH

Research

Data
San Francisco data on food trucks: base on data from 2019
431 approved permits for mobile food facility.
At least 184 active food trucks - most are small operations that do not have the means or know-how to promote themselves and communicate to customers.
Customer
San Francisco data on market for food trucks: base on data from 2019 and most recent census
Young, white collar working professionals in SF downtown and financial districts  - seeking fast, convenient, and  inexpensive food option for lunch. Most probable demographic would be age 25-35. Tourists to SF - 26.2 million visitors in SF in 2019.
Problems to customer:
Due to the mobile nature of food trucks, customers often don’t know where a particular food truck is or which food trucks are near them.
Problems to Food Truck Owner:
Food trucks are typically small operations. They  do not have the means or know-how to promote themselves and communicate to customers.

Introduction

San Francisco has many unique and great tasting food trucks. The problem is finding them.
SFood Truck is an App that connects the various food trucks in SF with the people who like them. The App will show a list of food trucks that regularly travel in SF. A user of the App can select a food truck and see its traveling schedule and menu.
Users can also search for food truck near a particular location or of a particular food type.

Competitors

Only some genuary information on this website, customer can’t reserve the order. Also, most information are old and not upgraded.
Website only, no mobile App, only a few food trucks are listed, each food truck has an introduction but no menu, location and schedule not accurate.

Solution

1. Create an App to provide a platform to connect food trucks and their (potential) customers.
2. People searching for food trucks can find the location/schedule of their favorite food truck or which food trucks are at a certain location.  
3. Customer can leave reviews, comments, or share their experiences.
4. The food truck owners can promote their business, show their schedules and menus, connect with customers.
5. Create some physic sign and advertise to promote the platform. QR code provide to download the App.

Key words

02 /

CHAPTER

BRANDING

LOGO

Brand Guidelines: Logo

Our logo in full form. It has been  carefully crafted, and should be  used with consideration throughout
our whole design system.

Brand Guidelines: Construction Details

The clear space around the wordmark is defined by the “S”. This clear space allows for ample
breathing room and should always be accounted for in any layout.

Brand Guidelines: DO

Always maintain the integrity of the logo by using  purposeful placement
with high contrast to the background.

Brand Guidelines: DON'T

Compromise legibility by using the logo with vibrant colors, using the logo with low contrast
backgrounds placing the logo  over busy backgrounds, changing it’s original  construction.

Typography

Collateral

03 /

CHAPTER

UI/UX DESIGN

Website Initial Structure

APP Initial Structure

Personas

Person 1
BIO:
Young white-collar professional,
working  in SF downtown,  financial district, just started her career
PAIN POINT:
As a busy professional/workaholic, time is always short for Tina. No time to go to a restaurant for lunch, but doesn’t want to just get junk food either. Food truck lunch is an ideal solution - fast, convenient, inexpensive, yet still offers quality and variety. But how would Tina find the food trucks that has the food she likes?
Person 2
BIO:
Self guided tourist in SF. Prefers to explore the city by himself, enjoys beautiful scenery and local culture and culinary experiences.
PAIN POINT:
Either grabbing a bite near a scenic site or landmark, or trying a different culinary experience, food truck is a must try for Sam.
But, being a visitor, how can Sam find the food trucks that are near his location?
Person 3
BIO:
Food truck owner,
Enjoys cooking
PAIN POINT:
Running a food truck is a tough and time consuming business. But just making great food is not enough, John would like to do more despite not been very tech savvy.
Is there one place/platform where he can promote his food truck, publish his schedule and menus, take orders, and connect with his customers and fans?

User Task Flow

04 /

CHAPTER

PROOF OF CONCEPT

Icons

Website Wireframe

Website UI

APP Wireframe

APP UI

APP UI Mock UP

Clickable User Task Flow & Video Mockup

05 /

CHAPTER

ADVERTISE

Signboard

Social Media

SFood Truck APP Video Promotion

06 /

CHAPTER

CONCULTION

SFood Truck is an App that connects the various food trucks in SF with the people who like them. The App will show a list of food trucks that regularly travel in SF. A user of the App can select a food truck and see its traveling schedule and menu. Users can also search for food truck near a particular location or of a particular food type.
SCROLL TO TOP

Interested in working with me?