Overview
For this assignment, my partner, Garrett Powell, and I were tasked to think of an app idea we could execute in the design process. Then, we went through 3 iterations of that process and refined our concept until we presented our final design at the end of the semester. (Note that each document is much larger than the screenshot can show.)
Ideation
When talking with my partner about potential ideas, we landed on a Restaurant Picker app. We thought of our own lives and the lives of others to realize that people are indecisive. Either by themselves, in a group, or at the workplace, people need help deciding where to eat. We decided to create an app that would collect the user's dietary preferences and favorite restaurants to make a catered spinner that would randomly select a restaurant for them to go to. This feature can also be applied in group settings, combining the preferences and favorites of multiple people and making a group spinner.
UX Design
Whiteboard Mockups
Next, we iterated on whiteboard mockups for each screen on the mobile app. We reviewed many designs of how the spinner and main screen should look. After a couple of hours of sketching, we finally decided on a look that would be simple and intuitive for the user to use. You can view some of these mockups below.
Tasks
While going through the whiteboarding process, we developed three tasks for the users to do when we moved to the user testing stage. We also calculated the GOMS times for each task to understand better how simple or complex these tasks would be for a user who would be well-oriented with the app. You can view them below.
Task 1 - Create dietary prefs and add restaurants:
Log in
Add dietary preferences
Peanut
Add restaurants
Chipotle
Red Robin
PF Changs
Roll Shack
The Flipping Egg
Mooyah
Spin the wheel
GOMS: 11.6
Task 2 - Add friends and create a group spinner:
Tap New
Create a group spinner
Add Friends
Stacy
John
Click Next
Edit Spinner
Add spinner name
“Friends”
Add friends to spinner
Add Stacy to group
Add John to group
Click save
Spin the wheel
GOMS: 6.82
Task 3 - Edit prefs, add and remove restaurants:
Edit their spinner
Add new dietary restriction
Add gluten sensitivity
Fix restaurant errors
Add new restaurants
Look at the restaurant menu and confirm options are available
Look at apps
Add restaurant
Go back to the restaurant's view
Save new prefs
Spin the wheel
GOMS: 7.63
Initial Figma Mockups
At last, I began to make first-round mockups in Figma. Using the tasks as a template to help structure the app, we created a simple layout where we took inspiration from other apps that used bubbly tabs as things the users could click on. As well as making the appearance appear clean and free from distractions. After completing this first round, we presented to the class our progress and received feedback about our initial mockups and the tasks we decided to go with.
Second Round of Figma Mockups After User Testing
After receiving feedback from our professor and peers, we began our first round of user testing to grasp our app's usability better. Below is a mix of before and after for some of our screens, comments made by our users, and reasons why we revised.
In our User testing, we also recorded the time it took for our testers to complete each task and compared it to the GOMS we calculated. Overall, the GOMS times we calculated were very inaccurate to how testers respond to the tasks, so we aimed to receive them, go back to our mockups, and improve processes that could make the user take less time.
Second Round Review
After going through the first round of user testing, we received consistent feedback on multiple aspects of our mockups. For example, adding people to a group spinner confused some users after they had to add people to the app and then add them to the spinner. Users thought they were accomplishing the same actions twice. Another example was users were confused about adding a new restaurant when editing their spinner. Lastly, we received comments about making the spinner have clear affordances using better signifiers.
In class, we also learned and created a journey map for our app, describing the process we saw when doing user testing to revise our mockups for the future. (See below)
Third (and Final) Round of Figma Mockups After User Testing
We were still inaccurate after revising our GOMS times from the previous testing. This shows that our Mental Model for adding a restaurant was still wrong, and our users were confused about adding friends twice. We also got new feedback regarding other buttons that were not utilized in the testing, like the hamburger icon and the friend's tab at the bottom. As well as some conflicting suggestions about navigating out of the restaurant view from the menu in Task 3.
We also got some positive feedback from our users. Here are some quotes:
“I think it’s a very simple interface”
“I would totally use this. This is a really cool app.”
“I like the animations for selecting stuff”
“I really like this as an idea so I can make spinners to decide for my friends and then for my family.”
“I think it is a very useful app”
Going into our final revisions for this project, this feedback told us that we nailed simplicity and were conventional. The App was easy to use, had good mapping, and the grouping was intuitive.
Final Edits (and Gifs of the Tasks)
Feedback and Reflection
After completing this project, we presented our final process to the class. Creating a story about how we got from the seed to the sapling we are now.
Some feedback from our professor and peers was about the features we could add to this idea. Some included a pop-up to display the logo of the restaurant when the spinner lands on one and to have the menu available to be looked at when a restaurant is selected.
If this app were fully functional, I would like to add the implementation of the Hamburger tab. We didn't utilize it, but we have it as a way for users to view their profiles and edit their dietary preferences.
Overall, this project was very insightful on how the design process works and doing multiple rounds of user testing and iterations. If you want to see it in more detail the mockups I did with my partner, here is the Figma Link.