Process Book

Team 3

Jenny Han, Aiden Lee, Matthew Liu, Lorraine Zhang

Table of Contents Initial Wireframe Prototypes 2

Summary of User Testing 5

Findings From Interviews 12

Changes Based on Findings 13

Link to click-thru prototype (Mobile & Desktop) 19

1

Initial Wireframe Prototypes

Our initial wireframes focused on the mobile website. In order to solve the issues we

found through our user testing, we decided to incorporate select features for better user

experience. An account page where the user could save dietary preferences as well as payment

information allowed for users to find food trucks while on specific diets and pay without cash at

trucks. A map was added to allow users to see the different locations that the food trucks were

relative to their location, allowing the users to be able to choose trucks based on distance as

well as the menu. Also, suggested food categories that refreshed based on previous food

preferences allow users to find new food trucks in the area. Finally, a menu attached to each

food truck allowed users to choose what truck to eat before going to the physical location of

the truck. The specific food truck page also has information on working hours, location, and

direction on how to get to the food truck.

These are the first two screens of the prototype. The blue boxes indicate touchable

areas. The loading screen is the logo of the website and the first screen after is a sign in page.

2

After logging in, the user can pick which suggested food category they would like to eat.

Or, they could search for a specific type of food. After picking a category, the user can select a

truck to look closer at the menu, hours, and location.

After picking a specific food truck, the user can look at the location as well as selecting

menu items to order ahead of time to pick up.

3

Finally, the user can update account information to specify to the users’ dietary needs.

Also, the user can upload card information for a cashless checkout. This allows users to filter

food options as well as pay in advance.

The wireframe used for user testing is linked:

https://invis.io/TAQP2QANG8R#/348834713_Jenny_Shared_A_Drawing_With_You_2

4

Summary of User Testing

Our user research data was based on the test of logging in/signing up, searching for a

cuisine, placing an order to a food truck, and changing the dietary restrictions of the user. After

testing the behavior flow with four different people with think aloud studies, we found various

areas that needed improvement and found some areas that really worked with ease.

At the beginning of the flow, the logging in and signing up was pretty intuitive. People

were somewhat confused by how to sign up because the features of adding a keypad and being

able to input values had not yet been set up. Otherwise, the overall flow worked. One user

commented on whether or not he could make an order without having an account, which is a

feature that we should consider adding in order to satisfy users that do not want to save

personal information such as payment. While the users were using the signup screen, we also

realized that there should be an easy way to input a credit card and toggle dietary restrictions,

not just email and password. These features will be added in the next iteration.

The second step was to search for a cuisine. The main question we had was how we

chose the categories for the boxes. Something to consider in future iterations would be

choosing relevant or broad food categories. Also, enabling the search bar with keyboard input

would make the interaction with the search page more smooth. Another input we had from this

part of the flow was that the search screen had no way of going back to the account page. The

way we show a menu bar is something our team needs to consider and being able to access

personal information page or other settings from every page on the website except for the

login/signup.

Summary

● Use Figma/all same tool so that wireframes look the same

● Make a button to go back from a personal account (setting)

● Make icon buttons to be more clear for users

● Modify “search all” button

● All buttons should be clickable

5

6

7

8

9

10

11

Findings From Interviews

Based on the interviews, our main feedback was that some of the iconographies were

confusing and the mobile website felt too much like an app rather than a responsive website.

People were confused about some of the functionality of the website, especially how to pick a

restaurant and placing an order. Some confusion was recorded as well in how to change some

of the account information. Also, we noticed that each of the screens and interfaces were not

consistent with each other, leading confusion for users.

We also found that many times, users do not want to sign in to look for food trucks. The

initial prototype forced users to sign in in order to use any part of the app. Users emphasized

that they would rather have an optional account setup page rather than it be mandatory. Also,

users stated that they would like more clear iconography and a map to better highlight the

location of trucks. People also wanted a record of past orders to refer back to, as well as a more

clear indication of whether the order had been placed or not.

12

Solutions Based on Findings

We decided to change a few things to make the interaction feel more like a responsive

website rather than an application. Instead of a menu bar on the bottom, we placed a menu

icon at the top of the screen near the logo, with similar options but hidden by default. We also

replaced the icons for each option with text in the menu. We included a map of the user

location and nearby restaurants and made some functionality, such as basic food truck search,

accessible without logging in. Seeing past and current orders is also an added feature in the

final prototype. A few examples of the changes made are as follows.

(Left is Desktop version, and right is mobile version)

In the home screen, searching and food categories are still functional. The food

categories update based on user’s food preferences and serve as suggestions on what cuisines

the user might like. A map was added to better locate the food trucks in close proximity to the

user. This makes it easier for users to understand the location of food trucks.

13

(Left is Desktop version, and right is mobile version)

Based on the feedback from the user study, we added a map and directions to

the food location to allow users to better access where the truck is in relation to their

current location and how to get to food trucks from their current locations. Reviews

were added to allow users to better gauge the food truck popularity. Also, a section of

the menu was created to make it easier to read and placing an order is clear to find for

better user experience.

14

Before ordering foods, the user now sees a screen that

will indicate pick up time as well as the address of food

trucks. The selected items are also highlighted and can be

changed based on user preference. After everything is

confirmed, the user can place the order and pick it up

during the selected frame.

15

(Left is Desktop version, and right is mobile version)

This is an example of the active and past order page. This way the user can see what

orders they made and what orders they made previously in case they wanted to reorder. This

was a direct response to users being confused over whether or not the order went through or

not in the user study.

16

This is the updated menu bar for the phone screens. Instead of having a menu bar at the

bottom, the left side of the “trvck” logo will have a collapsible menu bar that will show three

options for navigation. Making the menu bar have words instead of logos was a direct response

to the confusing iconography feedback from the user study in the initial prototype.

17

(Left is Desktop version, and right is mobile version)

This is the account page where the user can change the dietary preferences as well as

payment information. This page stayed mostly the same because the users stated that they

liked the account page in the initial prototype. Confusion originally was minimized by cleaner

layouts and labeled top menu bar categories.

18

Conclusions

From this activity, we learned how to understand users’ needs and pain points based on

observations, interviews, and personas. Then we studied how to design a responsive website

based on requirements and specifications. Also, we learned how to develop and modify a

prototype better with the user study (think-aloud method). At the end, with continuous

iterations, we learned how to build a prototype of a responsive website that could incorporate

users’ needs in holistic aspects.

Link to click-thru prototype (Mobile & Desktop)

Mobile -- https://invis.io/N9R4JXDA46P#/353500378_Copy_Of_Copy_Of_Brunch_-1- Desktop -- https://invis.io/9PR4JX13QN7#/353501487_Jenny_Website_Search_Page_View_1

19