crEATe : Responsive mobile and web design
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
Wireframing
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
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 |
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)
User Testing
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:
Questions:
|
Previous User Editing Event
List of user tasks:
Questions:
|
Insights
A few things we learned from our user tests were:
|
A few things we decided to add to our design:
|
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. |