Problem

Most of the available tools on the market, such as Google maps, Yelp, Roaming Hunger, and Street Food (food truck apps) allow for food truck searching but do not have menus or preordering capabilities.

Solution

Based on competitive analysis, user research and survey results, I came up with a list of features and the app structure. With Curbside Eats, customers can view all the food trucks in the area, filter by rating and preferred cuisine, select a food truck, read other customers reviews, view menu, and customize their order. They can also access previous transactions and rate a food truck.

View clickable Prototype

Process

User Surveys

In my role as a UX, UI, and visual designer, I was involved in every stage of the project. Although I had an idea how to solve the problem, I needed to get a better understanding of my users. I started my research with a user survey and crafted a few questions, using conditional logic, to understand how often then dine out, how they find out about new dining experiences, and how often they browse online to find a place to eat. I also wanted to know if they would consider eating at a food truck and what is important for them to select that truck. My data analysis is based on the summary of potential users, crafted as series of charts, graphs and text. Some of the key insights include:

  • 73% of the audience purchases a meal to go often or sometimes, with majority browsing often to find a place to eat.
  • 31% of the potential users find out about new dining experiences based on friend’s recommendation, but 19% of the respondents rely on online reviews
  • 63% of the respondents will look at current ratings and customer reviews, if they plan to dine out at a place they have never been before.
  • 19% of the people would leave a rating and/or review for their new dining experience.
  • 63% of the participants use a social account (Facebook or Twitter) to register on other sites.
Survey results
Personas

Although I was equipped with comprehensive customer data, I conducted follow up interviews with a few of the participants to understand better their behavior. Creating personas based on these interviews helped me understand the users' goals, behaviors and their interaction with the application.

Personas
User stories and user flows

Based on both the business requirements and my research, I crafted a list of user stories for new and returning users to prioritize the app’s features for MVP and later updates, which further helped me with developing the user flows. This is a diagram showing the userflow for placing an order from a new user:

Userflow for placing an order
Low fidelity and high fidelity wireframes

As a result of the user surveys and interviews, it was clear that in addition to the outlined functionality, Curbside Eats had to have a good navigation, intuitive and easy to use UI. In order to display content placement and determine the best content structure, I used Balsamiq to create low-fidelity wireframes. My main goal was to create intuitive and easy-to-use user interface. I used these wireframes as sketches and a place to start and focus on navigation, while applying hierarchy to each page. After the initial low fidelity wireframes were completed, I continued with the high fidelity wireframes and the exact sizes for each element.

Wireframes
Low fidelity Wireframes
Brand identity and style guide

After some sketching, exploring different directions, and collecting user's feedback, I chose the final logo and a color scheme. My intention was to establish a good feel, convey speed, enthusiasm, happiness, and determination. Prior to using the new color scheme, I ran a color preference test and the majority of the participants chose the monocromatic scheme, which completely changed the chosen colors for the user interfaces.

Style guide
Clickable prototype and usability testing

Using the the clickable prototype, I conducted both in person and remote usability tests. In order to make the locator more visible, I made revisions to the map, as suggested by a user during the testing. I also used the data from the preference tests for making changes to the initial color scheme and design decisions for a loading screen.

View clickable Prototype
Survey results

Conclusion

To maximise impact and reach, I followed strictly the iOS Human Interface Guidelines. This also speeds up the development and ensures that the app users are familiar with all the components and interaction. During the user testing, all participants moved through the interface with ease. Survey results and user testing helped me for decisions such as customizing the order, making the locator on the map more visible, and choosing monochromatic color scheme. One thing that I would change, if time allows, is using fully-functional clickable prototype, which will minimize the limitations of prototyping.