Caption: A page from the responsive web application that shows the business page for the Little Lotus restaurant.
Fall 2019 | 5 Weeks
"How might we connect hungry patrons to food trucks that fit their needs and restrictions?"
With a market worth over $1 billion and 6.8 percent growth from the past five years, the food truck market is thriving, offering customers quality meals centered around convenience. However, patrons often do not know which trucks fit their needs and constraints, given that an area can have many trucks.
In this team project with members Evelyn Yu, Ruwen You, and Sprina Wu, we designed a responsive web application that centralizes information, such as cuisine served and opening hours, into one spot where patrons can access. With varying patron constraints in mind, users can dine good while having time, dietary and/or budgetary needs met.
This project was done for the Interaction Design Overview Course (05-392) at Carnegie Mellon. To skip directly to the final deliverable, please click here.
In this project, I was a User Experience Designer and worked alongside my teammates each step of the way, from interpreting interview notes to creating the many iterations of the application. Majority of the tasks we did involved the following: experience design (including wireframing and prototyping) and conducting think alouds for usability testing.
To kick off the project, we were given food truck user research (observations, interviews, affinity diagrams, personas) from another team. We were asked to use their insights to shape our design. The diagram on the bottom left shows some examples of customers we are targeting.
Since we did not conduct the research ourselves (since the research we've conducted was handed off to another group), we used a Venn diagram to synthesize information given + better understand the three key players in the food truck market: patrons, owners, and employees.
Customers are interested in...
Truck owners are interested in...
Employees are interested in...
Some commonalities the groups share is...
Caption: Personas of three individuals who are patrons of food trucks
Caption: Venn diagram used to synthesize information from the previous team's research. Most of what's in the diagram is written above.
Given that there were three key players in the field, we decided to focus on designing the application for customers since the research we received had more interviews and information regarding those who patronize food trucks. With that in mind, we started sketching our application on paper. We designed for mobile first since it is easier to scale up than the scale down.
Caption: Initial black-white sketches of the application. Given that customers prioritize quality, convenience, and/or cost, we decided to focus on fleshing out our filter function.
Following our black and white sketch, we created more pages for search, ﬁlter, and navigation. In this stage we converted our original sketch into a wireframe with interactive task ﬂows using Adobe XD. This will make user testing much smoother.
Using the think-aloud protocol, we tested our low-fidelity prototype with five other individuals. We asked users to think aloud as they performed the following tasks:
Here is a summary on what we did well/not-so-well at this stage:
With verbal feedback and observational feedback from the think-alouds, in addition to advice from the instructor, we made changes to the following areas to mitigate confusions and create a more continuous flow:
Caption: Previous wireframes with areas of improvements boxed in yellow.
Caption: Tutorial screen shown to users when they enter application. Useful in understanding what the truck icons represent.
Following these changes, we decided to create desktop prototypes, in addition to mobile ones, of the web application. Though panels of the final responsive web application are shown below, an interactive desktop version of the prototype can be accessed here. The mobile interactive version of the prototype can be accessed here.
If given more time to complete the project, we would add the following features:
Overall, the project taught me the importance of user testing since different sets of eyes understand features differently. For instance, the lack of explanation for any number we included confused those that tested our wireframes. Explanations, especially on tutorials and legends, should be straightforward as well, since users want to gain the information in a quick and easy manner.
As a team, we learned how to pitch a product as a team and design a presentation to fit that pitch. Because we received research results from a different team, we learned how to aggregate valuable data from unfamiliar research results to develop a design direction and product idea.