UX/UI Case Study

Kutz

Haircuts anytime, anywhere, any place.

Tools:

Role:

Introduction

As the clock ticks down to an upcoming trip, the whirlwind of tasks and responsibilities can quickly become overwhelming.  Amidst the chaos of packing and finalizing travel plans, the thought of squeezing in a much-needed haircut can seem daunting.  Sometimes impossible.  Recognizing this common struggle many of us go through, Kutz has taken the opportunity into finding a solution. Little did they know they would revolutionize the haircut industry.

What is Kutz?

Kutz is a mobile platform that serves as a bridge between individuals seeking haircuts and professional barbers/stylists. For users in search of haircuts, Kutz offers them the control of scheduling and customizing their haircuts by choosing the time, location, and preferred stylist. Additionally, for barbers and stylists, Kutz offers a streamlined approach to managing appointments, attracting new clients, and displaying their skills, ultimately supporting the growth of their clientele and business. Overall, Kutz has created a comprehensive solution that benefits both clients and their barbers/stylists, enhancing the overall haircut experience for all involved.

User Research

To initiate the project, I conducted extensive research on haircut-related data available on the internet. The majority of the data encountered was quantitative, providing valuable insights into the trends and preferences of individuals in the market. Among the plethora of data analyzed, four specific graphs stood out as particularly noteworthy, offering compelling information that shaped the direction of the project.

Key Insights

Statistics reveal that over half of Americans receive haircuts multiple times a year. However, in recent years, there has been a decline in the number of barbershops and barber professionals. This imbalance between supply and demand has led to a shortage of options for individuals seeking grooming services. As a result, it could lead to increased competition among remaining establishments, higher prices for consumers, and challenges in accessing timely and satisfactory haircuts.

Affinity Mapping

I sent out a survey and carefully selected 5 participants that matched user demographics. I then conducted 30-minute qualitative interviews with each of them, during which I encouraged users to share their past experiences and describe a typical haircut visit.

I created the Affinity Map below with the notes I took from the interviews. I coded them onto sticky notes, organized them by similarities, and created themes accordingly. Doing this enabled me to take a step back and broaden my perspective, giving a complete view of what the interviews looked like as a whole. Seeing the bigger picture gives me a chance to ideate better solutions I might have missed if I were just focusing on individual details.

Empathy Mapping

Having an empathy map serves as a valuable tool as it highlights the potential contradictions between what users think, say, do, and feel. This visual representation helps bridge the gap between the user's emotions, thoughts, needs, and behaviors, allowing us to gain a deeper understanding of their true motivations, concerns, and experiences so that we may be able to tailor our strategies and solutions more effectively.

Personas

To ensure I remained focused on the target audience, I created two primary representations of our users - "Austineezy," representing individuals seeking haircuts, and "Jack Jack," representing hair stylists. These personas serve as a reference point to better understand the needs, preferences, and behaviors of target users during the design process. It is important to note that these personas are not real individuals, but synthesized versions based on observations and analyses of the participants in the interviews.

Most Viable Product (MVP)

Based on User Research, I've arranged the spreadsheet below that categorizes our users, their needs, and their objectives. This helps pinpoint the main challenges our users face and directs our team's focus on developing solutions. Each item in the spreadsheet has been ranked from highest priority to lowest - MVP, followed by level 2, then 3. For the design to be ready for product launch, it's crucial to include all MVP features and elements in the application.

Competitive Research

To gain insights from competitors and spark user-centric ideas, I explored three apps within the same sector as Kutz - Uber, Supercuts, and The Cut. By closely examining and evaluating competitor apps, we can identify what works well, areas that need improvement, and user preferences. This analysis will assist us in shaping the design and development of the Kutz app to better ensure its competitive edge and user-friendliness.

I analyzed 5 key elements from each app to find features that could enhance the development of the Kutz app. These elements were grouped into categories such as beneficial features, visual problems, minor concerns, significant issues, and catastrophic flaws.

  1. Positive findings - branding throughout the app is top notch

  2. Cosmetic issue - learning curve for using the app is high

  3. Minor issue - navigation is somewhat confusing and not self explained

  4. Major issue - too many interactions/buttons calling for your attention at once

  5. Catastrophic issue - visual hierarchy hard to distinguish

Uber is a platform where those who drive and deliver can connect with riders, eaters, and restaurants. They are the #1 ride sharing service around. Although they have nothing to do with he haircut industry, I believe we could learn a lot from their innovations and apply some of it to our app.

  1. Positive findings - can use the app without having to sign in

  2. Cosmetic issue - icons and buttons aren’t consistent

  3. Minor issue - results information architecture mediocre at best

  4. Major issue - map locations either take a long time to load or app crashes

  5. Catastrophic issue - no back button, hard to find out where you are

Supercuts is a hair salon franchise with more than 2,400 locations across the United States. They have highly trained stylists using high quality hair care products all at an affordable price

The Cut is the #1 barber booking app. They are a mobile platform for barbers and clients modernizing the barbershop experience. Their app helps barbers get discovered by new clients, book appointments, and run their business.

  1. Positive findings - search field options are plenty and specific

  2. Cosmetic issue - coupon icon seems like a waste of space

  3. Minor issue - home screen is amateur/boring

  4. Major issue - weak brand presence throughout the app

  5. Catastrophic issue - information architecture unbalanced

Site Map

Before designing any kind of screens, creating a site map is crucial as it provides a clear roadmap for the app's structure and content organization.  It helps in visualizing the user flow, ensuring that all necessary features are included and properly linked.  This early planning stage sets a strong foundation for the design and development process, promoting efficiency and coherence in the final product.

I leveraged insights from my competitive analysis to structure Kutz's site map, organizing top-level pages and subpages, and made sure to include all essential features identified as MVPs from the problem statements.  This approach will streamline the process of designing screen interfaces, saving time and ensuring seamless integration of key features into the app's design.

User Flows

User flows visually represent the paths users take to accomplish specific tasks within the app, helping us anticipate user needs and design a user-friendly experience. By mapping out these user journeys, we gain insights into user behaviors and preferences, guiding the development of features that cater to our target users. As a result, 2 user flows were created - Bob, a frequent haircut customer, and Dan, a barber who cuts hair.

Sketches & Wireframes

Based on the user flows I developed, I started sketching preliminary designs for each of the screens in the flows. I found that sketching is an efficient way to quickly translate concepts from my mind to paper, especially given the frequent changes in ideas during the design process. After refining the sketches through a few iterations, I used Figma to transform the sketches into wireframes for a more detailed representation of the design.

Style Guide

I created a style guide to maintain consistency in the design system and present the brand professionally. Having a guide to follow helps us uphold a unified and polished brand image while ensuring that the design aligns with the needs and preferences of our target users and meets usability standards.

Colors

As a personal project, I chose the color purple to symbolize creativity and imagination for the Kutz app. Building on this choice, I opted for a triad color scheme to introduce contrast to the numerous photos that would be used by Kutz's users. My goal was to infuse the app with a lively and vibrant atmosphere while maintaining a sense of harmony and balance in the overall design. I took advantage of the resource coolors.co to help me decide the exact color palate to go with for the app.

Font

Roboto has dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesques distort their letterforms to force a right rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width.

Typography

Iconography

Prototyping

I integrated the visual elements specified in my style guide, such as fonts, typography, colors, icons, images, copy, and calls-to-action, into my wireframes and elevated them to high-fidelity. By leveraging the functionality of Figma, I was able to efficiently add interactive components to the screens, allowing them for immediate testing. This process provided me a preview of the app’s visual aesthetics and functionality by simulating real life user interaction with the interface.

Usability Testing

Before testing, I distributed surveys and selected 5 participants who closely matched Kutz’s target demographics. The primary objectives were to assess the users' ability to complete tasks, identify key screens within the interfaces, and evaluate their understanding of the core concepts of the Kutz app. The sessions were conducted via Zoom screen share, where users were encouraged to think out loud throughout the process.

The spreadsheet below outlines the data from my usability test notes, detailing user issues, problem priority, and potential solution suggestions.

Prioritizing the Critical and Major issues is crucial as they directly impact the fundamental tasks of the user experience. For obvious reasons, these issues are given priority for immediate resolution, while Minor and Normal issues are deferred for future iterations, as they are considered non-essential for the Minimum Viable Product (MVP).

This focused approach ensures that resources are directed towards resolving the most critical issues first, paving the way for future ongoing improvements for the product's usability and functionality.

Conclusion

Kutz is an innovative idea that promises to revolutionize the haircut industry by offering a unique blend of convenience and modern technology for personalized and professional barber services. The app benefits both customers and barbers by providing convenient appointments and expanding client opportunities, catering to the evolving needs of today's modern world. With its innovative approach to customer-centric control and focus, Kutz distinguishes itself from traditional barbershops, positioning itself as a promising contender in the industry.