'Wich Way?
'Wich Way? marks my initial venture into UX Design. The project began with the prompt of designing a food review app specifically for sandwich shops, propelling me on a transformative UX journey. As my first project, 'Wich Way? is not perfect, but it's an excellent portrayal of the design journey, including which steps I followed to achieve my goals. Because of that, this case study (although a bit more lengthy) showcases all of the major and most important steps taken to design a dedicated mobile app using UX Design.
Project Overview
Project Type
Roles and Responsibilities
Date
Tools
A dedicated mobile app
Project was a homework assignment with the prompt "design a food review app for sandwich shops"
Sole UX designer
Research
Design
User testing
Wireframing and mockups
Prototyping
November 2022 to January 2023
Figma
Jamboard
Google Officespace
The Design Journey
Empathize
Define
Ideate
Design
Test
-
User interviews
-
User needs/goals
-
Empathy maps
-
Pain points
-
User personas
-
Problem statements
-
Journey maps
-
Competitive audits
-
Brainstorming
-
Storyboards
-
Paper wireframes
-
Sitemaps
-
Digital wireframes
-
Low fidelity prototypes
-
Mockups
-
Style guide
-
High fidelity prototypes
-
Usability testing
-
Affinity diagrams
-
Iteration and redesign
The Problems and Goals
Many people have reading barriers. Therefore, I wanted to create a restaurant review app that made it easier and faster for users to both read and write reviews by reducing the amount of words that users needed to write to get their point across. My main idea going into this project was to continue to let users rate restaurants on the classic 5 star scale, but to break that scale into multiple categories instead of just one overall rating.
Empathize- User interviews summary
Using pre-generated user profiles, I conducted interviews to determine users’ potential needs and pain points. From there, I created empathy maps to better understand the common goals and frustrations that might unite different users. This allowed me to create two different personas- one for a busy on-the-go mom and the other for a young foodie who needs an easier way to find new sandwich shops.
The following slides focus on the “foodie” persona. This type of user has a focus on finding the best and most interesting sandwich shops, and how to compare the shops head-to-head. There’s also a focus on accessibility for non-English speakers as well as people who may have reading impairments.
Pain points
Comparison
Too Wordy
Accessibility
Most food review apps do not have a way to compare different restaurants on specific qualities of their food or service
Review apps tend to have a focus on written reviews, which makes it hard for non-English speakers and people who have reading difficulties to find what they need
Some review apps have small fonts and many do not have proper text-to-speech readers for people with reading impairments.
Define- Personas and Journey Maps
Kai is one of the two personas I came up with. The other persona focused on a busy on-the-go mom named Laura. For the sake of time, this case study will focus on Kai, who's persona was much more aligned with my goals for the app.
Problem statement: Kai is an adventurous foodie who needs a simpler, less wordy way to look at food reviews because they are dyslexic and not a native English speaker.
Thanks to the detailed persona, the journey map was easy to define and therefore empathize with. This type of user can be especially relevant in a multicultural and multilingual city such as Montreal, where I currently live.
Ideate- Competitive Audit and Paper Wireframes
The the competitors I examined were Yelp, Yellow Pages, and Trip Advisor. Through my research, I found that no other review app consistently used my idea of split reviews, though some apps (Yellow pages and Yelp) did occasionally have it for some restaurants (but strangely, not all). This could possibly give my app an advantage on the market.
The other interesting discovery to me was how few of the apps were compatible with screen readers. After turning on my phone's screen reading ability, I found out that only Yelp had it fully optimized.
If you'd like to see the audit in more details, click here.
Since this ws my first time making paper wireframes, I tried to draw inspiration from apps that I use. I played around with different types of menus in different locations, as well as different content for the main search page.
Eventually, I placed stars next to features that I liked, with the last wireframe combining all my favorite features. This became my basis for my first digital wireframes.
Design- Digital Wireframes
When making the wireframes, I tried to think back to my personas and research goals. My main goal had to do with accessibility- I wanted to convey as much information as possible to the user, while limiting the reading that needed to be done. Because traditional food reviews rely a lot on peoples' written comments, I needed to think of features that would help to minimize the need for this reliance.
This version of the search page is the result of the final paper wireframe seen above.
Some of these feature (such as the checkbox filter) were added because my research goals had a focus on accessibility, which I wanted to extend outside of the app and into the real word, including options such as if a restaurant is wheelchair accessible or if it accommodates for different diets.
Users can check off which qualities that they want in to search for in sandwich shop, such as outdoor terraces, to-go options, or wheelchair accessibility.
The "rating type" was meant as a way for users to change their search results and rank the restaurants by either the best overall scores, or by best taste, service, or atmosphere
The research goal also highlighted giving users as much information as possible about the sandwich shops while (ideally) reducing the amount of comments that they need to read. Here we do this by splitting reviews into 4 categories, and also having icons for certain filter options.
The main feature of the app is the star reviews being broken down into several categories. This will allow users to gain more information faster about a shop without needing to read everyone’s comments about a place.
Users can select favorite features that they like in a shop (ex. Wheelchair accessible or outdoor terrace available) and quickly see if those features are available at a shop. The preferred features can be changed at the profile or in the search page (see previous slide)
First Test and Revisions
My first test was performed with family members, so I know that the answers may be biased (since they might have wanted to avoid hurting my feelings). That being said, I still got a lot of excellent feedback!
After the test, my first step was to write all of their feedback down and categorize it based on themes. This helped me figure out what issues needed to be immediately addressed, and what was slightly less important.
All of the information was organized using post it notes, with each color representing different users. Post-its that had the same opinions were stacked, but off-set so that I could still see how many people shared these opinions.This method makes the affinity diagram easy to use and understand.
3 out of 5 users did not notice the one of the search field, and 3 users thought that it was too small.
4 users had trouble clicking on the shops and 4 users either did not notice the bottom icons or did not know what they meant.
Based on these results, these were the top 3 changes that I wanted to make with the revision.
P0- “Search by name” field was not visible enough
P0- All users had difficulty clicking on the shop buttons to view more information
P1- Many users did not understand the icons in the hotbar
As seen in the affinity diagram, users had trouble finding the “Search by name” bar. For some users, it was because the font was too small. For others, it was because it was too separate from the other search option. This was taken into account with my redesign.
Now each search button will bring the users to a dedicated search page to avoid confusion.
Before
After
When selecting a shop, users also tended to click the middle section of the shop details instead of clicking the shop name or the shop image (the original clickable spots). Some users also noted wanting options to go straight to the reviews, so this was taken into consideration in the redesign. Now, users have a larger click field, can have multiple options for accessing a shop page, and they also have a way to see reviews directly.
After
Before
Design- Mockups
The biggest challenge for me of making the mockups was deciding on design elements. I will admit that I don't (yet!) have formal training in design, though I've always been creative and enjoyed artistic past times. I did also want to push myself creatively. I knew that I could play it safe, by going with a minimalist, modern design, but since this was my first project, I wanted to have a little fun with it too.
Theme: I wanted the app to feel friendly and inviting, and remind people of sandwich shops. Because of that, one of the thematic elements that I created was a chalkboard, which not only can be seen on the login page, but was also used throughout the app for different purposes, such as writing reviews.
Colors: Again, I wanted the app to feel friendly and inviting, but also have some thematic elements. I wanted all the colors used to be reminiscent of sandwich elements.
The beige background as well as the darker brown of the wood were meant to remind people of sandwich bread, with the two shades representing the crust and crumb.
Green, which was the main color used for many components, is often associated with freshness. It is also often visible when looking at pictures of savory sandwiches, either due to lettuce or other green veggies.
Other elements: Buttons and many components had rounded edges, again to convey friendliness.
For the typeface, I mostly used Open Sans, which I chose after doing some research on which type faces had the best legibility, and seeing which ones were available on Figma. I liked how clear and legible it was, while also not looking too formal and stiff.
I also sparingly used Chalkduster, to add a litle bit of a fun thematic element to the app. It was only used on the chalkboard
Second Test and Revisions
The second test was done with 5 new users, to avoid biases with users already being familiar with the app. Other than that, the test was mostly the same, with the same questions, prompts and tasks. The only changes included removing a question that had not provide useful data on the last test and to add a couple questions about the design choices of the app.
Based on these results, these were the top 3 changes that I wanted to make with the revision.
P0- “Search by filter” page was confusing and too long
P0- “Search by Rating type” field was confusing and not intuitive
P1- 2 users requested pre-written reviews
The most pressing and important changes that needed to happen were on this search page.
For one, there were too many options in the search page, which made it too long and confusing, especially the section "search by rating type." This "search by rating type" drop down was moved to the search results page. This ultimately made a lot more sense, as users would be able to modify and sort their results, similar to sorting results by price on a shopping page.
Additionally, I got rid of the instructions and changed it to a page title instead. This change also better aligns with my research goals of reducing how much reading there is to do on the page.
These two simple changes reduced the page length by 280 pixels! That's almost 50% of the screen size that I designed for (an iPhone SE).
Before
1105 pixel height
After
825 pixel height
An additional change that I made was to add some comment buttons. This would allow users to go through the review process faster, but also avoid writing if they want or need to, both of which aligns with my research goals.
Before
After
Conclusion and Takeaway
This project taught me the fundamentals of UX Design and how to use Figma. I was able to take a suggestion from a randomized prompt and take it through every step of the UX journey until it became the final project that you see can now. I do know there's still plenty of room to improve though!
For starters, I would modify some of the design decisions that I made. Accessibility would need to be put more front and center. Accessibility was the original driving force behind this app, and therefore considerations will need to be taken across the board. This includes (but is not limited to) changing the colors to be more accessibility friendly, as well as adding a Settings and a Help page.
Additionally, sandwich shop owners need to be able to log in to create and edit their shop pages. This would be a vital feature that the app would need before it could function, and would save the app money in the long run. I think this project has potential as a review app for all restaurants, though, not just sandwich shops! Obviously, if that were to happen, though, there would need to be more changes to the design theme and some of the features. Alternatively, it would make a good review app for cafes with much fewer changes needed.