Post on 26-Sep-2020
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