Food Truck Application Design

crEATe : Responsive mobile and web design

For this project, we utilized design research to create a responsive mobile and web application called 'crEATe'. crEATe allows food truck owners to create and host specialized events for their patrons.

Group Members:
So Young Han
Jason Li
Valerie Reiling
Pooja Casula

Link to Process Book

Storyboards + Scenarios

The design for our interactive website was inspired by and created from the ideas and storylines introduced in the following scenarios and storyboards. These deliverables were produced and shared with us by a separate team of design researches, who had collected and curated useful insights about food trucks and their owners, workers, and customers through a series of interviews and observations. We received four and we settled on one storyboard and scenario shown down below.

Scenario

Mary is a food truck owner who operates from 10:00-4:00 on most days. Her food truck is connected to a restaurant her family owns in Pittsburgh, and she mainly parks near CMU campus and sells to students. Mary uses the FoodTruck Web App daily to help her prepare the correct amount of food and keep a steady stream of customers coming to her truck. She knows she will be busy from 10:00-11:30am preparing the food and 11:30am-1:30pm due to lunch hour, but sometimes few customers come after 1:30. At mid-day, Mary realizes she prepared too much of the salt and pepper pork, and she doesn’t want it to go to waste. She uses the FoodTruck Web App to notify her customers that the salt and pepper pork is a discounted “Daily Special” to incentivise them to buy. At 1:45, Mary notices that there are especially few students coming to the truck. She uses the Web App to create a “Happy Hour” discount for the hours of 2:00-4:00pm during which customers who purchase food will either get a special discount or earn reward points. The FoodTruck Web App incentivised students to purchase the pork, which allowed it to sell out so no food was wasted; also, more students began to arrive after 2 to take advantage of the Happy Hour deal.

Storyboard

Needs Analysis

For this project, we analyzed the needs of food truck owners, customers, and workers. Using this analysis in addition to the insights from previously conducted design research, we chose to develop our responsive website with a focus on the owner.

We identified four pain points to focus on.

Connection: Owners are looking to find ways to further connect to their customers and increase customer loyalty.

Customer Turnout: Food truck owners would like to have a way to ensure steady business.

Creating a Lively Atmosphere: Owners who would like to create a fun atmosphere around their food trucks.

Social Interactions: Socializing between customers, workers, and among customers and truck staff are driving factors of food truck culture

Rough sketches

Our team roughly co-designed the screens that can serve the needs of the target user group we have selected based on the previous research.

Wireframing

Home

Creating New Event

Managing Events

Using the initial concepts for the various screens for the mobile interface, we outlined the workflow for how a potential user would interact with our design to carry out the following tasks:

Create a new event
Send a reminder for a created event
Edit a created a event

Initial Prototype

Our initial prototype was based on the design research done by a separate team and on our own insights garnered from researching event creation applications.

Research

Before designing our prototype, we collected samples of features we were considering to draw inspiration from for the actual design process. We primarily looked at event creating applications and how they were advertised on social media.

Persona

“I want to make my food truck a gathering place for people to come to enjoy good food and a good atmosphere.”

Age: 30
Gender: Male
Location: Pittsburgh, Pennsylvania
Job: Owner of Frank's Taco Truck

Connection with customers

Efficient communication with customers

Creating good food experiences

Lively atmosphere

Design

The core screens designed include (1) managing events, (2)creating events, and (3)choosing the social platform channels where they upload their posts about the events. For screen 1-1, we intended to expose the ‘create’ button with upcoming events users have created to be accessible on the first page. Also, users are able to look through the events they have created to keep on track(screen 1-2). They are open to revise and edit the post in crEATe (screen 1-3) with a simple access to choose the channel to advertise their posts (screen 1-4)

1-1. Home Screen View - emphasis on creating a new event

1-2. Viewing all Events

1-3. Event Details

1-4. Posting

User Testing

We conducted 5 usability tests in order to gain insights about how users will actually interact with the product. Are they doing what we intended through our design decision? What makes them confusing? What do they think the purpose of the product is?

Photo taken by So Young Han

For our user testing, we had volunteers carry out two separate scenarios: (1) where they were asked to imagine that they were a food truck owner using the app for the first time to create a new event (2) where they were to act as a food truck owner who had already created an event but realized the date had been entered incorrectly.
While performing these tasks, we asked the users to think aloud to describe their thought process as they interacted with the website.

New User Creating 1st Event

List of user tasks:

Create new account
Link social media
Find new event button
Set date and location
Enter event details
Pick which social to post to
Share the post

Questions:

Were there any buttons or tasks that were initially unclear?
Were there any buttons or features that were difficult to locate?
Are there any additional functions or features you think are missing?
Was it clear to you what the main purpose of this website is?

Previous User Editing Event

List of user tasks:

Login
Select event
Click “Update the Event”
Change date
Finalize changes

Questions:

While performing the task, did you think there was a clear way it could be performed more efficiently? I.e. did you think the steps that you performed were unnecessarily long or difficult?
Were there any buttons or features that were difficult to locate? Any that were difficult to read?
Were there any major points of confusion for you?

Insights

A few things we learned from our user tests were:

We could be more specific about what features our application has

The wording of certain buttons need to be clarified in order for their purpose to be salient

Users really liked the sleek design of the app

What exactly is the incentive to use this app to create an event compared to creating an event on Facebook?

A few things we decided to add to our design:

Change ‘Update Event’ button to ‘Save Changes’

Need to add ‘Back’ option to each screen

Add function to send reminder at a specific time before the event

Add function to see where other food trucks are located and if they are having events in the nearby area

Final Design

For the 2nd prototype, we mainly focused on applying the changes based on the usability testing with more refined visual design to make it look more organized and consistent. For screen 2-2, we added an icon for editing the post to make it more obvious. Also, based on the feedback, the button for ‘update the event’ is removed, but instead, we embedded saving changes within the editing process of each stage (2-3)

2-1. Home

2-2. Post details

2-3. Changes

2-4. Create (Date & Location)

2-5. Setting location

2-6. Choosing images

We believed that the event post include multiple information such as date, location. and pictures. Putting all the information at one screen would overwhelm users, so we divided each process. In order to let users to know their state, we put the state bar at the top.
In screen 2-5, we also added another layer of information; when users choose location, they are able to see other food truck users and their business openings on the selected date near the area they searched.