Redesigning an app for a more user-focused experience.
What is Famous Fadez?
Famous Fadez is a barber shop chain based in Illinois. The first shop to open was located in Hanover Park, IL, and opened in 2010. Throughout the years the business has experienced amazing growth. Famous Fadez now has 5 locations and is working on opening up its 6th. I was asked to refresh their app while also keeping a familiar feel for long-time users.
-
UX Designer
UI Designer
User Researcher
Graphic Designer
-
4 Weeks
-
Figma
Adobe Illustrator
Whimsical
-
Research
Interviews
Persona
Primary Research
Define
Feature Set
Information Architecture
User Flow
Design
Sketches
Hi-Fi Screens
Test & Iteration
Prototyping
Usability Test
Problem
Famous Fadez currently has an app but it was created in 2016. The app has only been updated for their new locations and new barbers but has not been through any major changes. The design feels outdated and lacks crucial information that new users may need to make an informed barber selection.
Challenges
Famous Fadez has a lot of clients using their current app for booking their reservations. I need to create the new design while keeping the overall feel and flow of their current product. This keeps pain points to a minimum while long-time users transition to the new design.
Goal
My goal for this project is to design the new app with both new users and long-time users in mind. I want to be able to help new users make an informed decision while using their app, while also enhancing the experience for long-time users.
Research
🔍
Research 🔍
Objective
I want to understand how a potential new client determines how to choose a new barber. This entails of determining the factors that would go into their thought process before making a decision. I also want to discover what features a client would need, new or old, from the app to enhance their overall experience.
Methodology
I conducted 1-on-1 interviews with 6 participants. The participants were both users of the current Famous Fadez app as well as participants who have never heard of the barber chain. This would allow me to understand what users may like or dislike with the Famous Fadez app as well as the other products the participants may be using.
What did we uncover?
I wanted to understand the process that people took to book a haircut from their current barbers. There were a lot of different variations, but all interview participants used an app of some kind to book their current appointments. This information would benefit me during the interview since I would be designing on the same playing field.
“The guy that I ended up going to had like 500+ reviews, and obviously that means a lot when you’re looking at new barbers and stuff.”
When asked how the participants felt when visiting a new barber, 60% stated that they feel nervous. I need to be able to add things into my design to try and minimize this for potential new users. I want to be able to reassure the users that they are making an informed decision with their selection.
“There’s always a little bit of nerves going to a new barber...”
Many barbers have certain styles that they may specialize in. I wanted to showcase this in the design somehow to assist potential new users in their barber selection. I wanted to determine if people knew hairstyle terms or if a list of specialties would seem foreign to them.
Given the results from the interviews, I determined that I would need to add icons to assist in showcasing the specialties.
“I would just be like “yeah” and end up really sad because that not what I wanted, like at all.”
I wanted to understand how users requested what style of haircut to get. Since most interview participants did not know every hairstyle term, there had to be another method of requesting. I discovered that 40% of interview participants request what to get by showing the barber a photo. I will add an easy way for users to do this in the app.
“No, it’s like learning a Starbucks drink, like I really don’t know. I’m just saying all these words.”
Who are we doing this for?
I analyzed my 1-on-1 interviews to create a potential new user persona. This persona has needs and pain points crafted by the personalities and emotions captured during my 1-on-1 interviews.
What do we have to work with?
Before even thinking about how I wanted to design the new app, I needed to familiarize myself with the current app. This would allow me to understand the flow that current users need to take to book a new appointment.
Landing page
Location selection
Barber selection
Service selection
Date selection
Information input
Define
✍️
Define ✍️
Features to be featured.
Since Famous Fadez has had an app for years, it was important to keep key features that long-time users have been used to having. It is also equally, if not more important to add new features that may help benefit the user experience.
Let’s reorganize.
It was important for me to lay out the sitemap for Famous Fadez’s current app before developing a new sitemap. This would allow me to keep certain things grouped as they are currently. This helps with ensuring new pain points do not arise with long-time users.
Feng shui.
When theorizing how to lay out the new app design for Famous Fadez, I opted to use a navigation bar. This allows users to easily change “tabs” while navigating the new app. The current site plan does not allow users to easily backtrack while navigating the app.
How do we get there?
To help work out the interactions from screen to screen while navigating the new app, I decided it would be best to develop a user flow. This flow shows the path a potential user would take to book a haircut appointment while using the new app design. Creating this assists me in determining what screens to create to provide stakeholders with an MVP.
Design
✏️
Design ✏️
Time to get some ideas down.
I started the design process by sketching low-fidelity wireframes of key screens users would encounter. I chose to do this on my iPad for cleanliness as well as easily being able to transform the sketches into high-fidelity screens.
Home
Location
Barber cards
Service selection
How does this look?
Based on the sketches produced, I decided to move forward and create high-fidelity mockups for key screens. These screens would then be reviewed by myself as well as stakeholders to determine if we should move forward with the design.
Home
Location selection
Barber selection
Filters
Barber selected state
Service selected state
Scratch that, this is better.
After reviewing the initial high-fidelity mockups, I felt like we should iterate upon the concept. The flow is where it needs to be, but the design felt outdated and too similar to their original app design and the stakeholders agreed. We decided a more modern approach would suit the new app much better.
The '‘book appointment’ CTA now resides in the navigation bar rather than at the top of the home screen. This puts it in the optimal click zone, which it was not in before. While users navigate the booking process, the header now stays locked while the user scrolls each screen.
The landing page received a large rework. The barber cards now display featured photos as well as a few of their specialties. The cards also now scroll vertically rather than horizontally.
Home
The map location cards now expand to display the location information. The expansion also reveals a CTA rather than having one appear from the bottom of the screen. The background of the cards has also been removed to display a more elegant feel.
Location selection
The barber cards have received a full redesign. They now highlight featured photos that the barber chooses to showcase. Their specialties have also been complimented with icons to assist in relaying the information. The barber’s Instagrams are now immediately on display.
Barber selection
Filters
The filter list now slides up from the navigation bar rather than being on a separate page.
Users can now easily apply or disable filters while navigating the list of barbers. This is thanks to the locked header.
Filtered barbers
The service selections also received the same treatment as the locations. The selections now expand to reveal more details as well as a select CTA.
Service selected state
Test & Iteration
🧪
Test & Iteration 🧪
Let’s try this out.
After approval of the high-fidelity screens from myself as well as the stakeholders, I went ahead and created an interactive prototype for booking a new appointment.
Once the prototype was completed, I ran a usability test with 5 participants. The participants were tasked with:
Starting the process for booking a new appointment
Filtering the barber results
Setting a reminder to rebook an appointment
Did anyone fail?
The usability testing went successfully. All participants were able to fully complete the prototype without asking how to do certain tasks. There were a few potential problem areas though that I would like to iterate upon to make the overall design flow even better.
All participants were able to complete the usability test without any major snags.
When I asked users to filter the barbers after they had browsed the selection screen, 80% of them scrolled back to the top to do so. The filter selection was placed in the locked header, so there would have been no need to scroll back to the top. I needed to determine a way to highlight the filter selection for users.
On the home screen, the specialties icons were placed directly on the featured photos. This caused them to be difficult to see depending on the image behind them.
When participants were tasked with selecting a location, most of them selected the text beneath the map. 20% of participants tried to select the location on the map instead.
Time to make some changes.
With the data acquired from the usability test, it was time to make some revisions to the design. The changes that needed to be made were very minimal but would help enhance the overall user experience while using the new app.
At first, I experimented with placing the specialties underneath the avatar image like on the main barber cards. This made the cards seem too long and each barber’s card took up too much space. I opted to remove the specialties completely instead. The barbers on the home page are for immediate availability. If users are in that much of a rush, they most likely wouldn’t care to know the barber specialties. Instead, users would make their initial decision based on the featured photos and reviews.
I allowed the map icons to be clickable for users to select a location. This caused a different issue to arise. If a user were to select Schaumburg, they would not see the card expand and would not know how to select the location to move forward. To fix this issue, I made the non-selected cards collapse. I also added an exit icon in case the user accidentally made the wrong choice.
Since the filter selector seemed to be buried in the header, I had to figure out a way to showcase the icon. I opted to use a floating action icon for this. Users will be able to more easily locate the filter selector and continue with their booking process.
I also decided to add some quality-of-life changes during my iteration process. One of them was to add a radio icon on the service selection screen.
Meet the MVP
Well, now what?
The stakeholders are currently focusing on opening their 2 newest locations. Once these locations are opened, it may be time to move forward with the project. The next steps would consist of fully flushing out the app and all the secondary screens. Once the design is finished, I will need to create some more usability tests to work out any kinks throughout the rest of the app. This all depends on their budget and how the new locations perform after they open.