Project Overview

Summary
I am working with a client who wants to create a website for people who style little boys with long type 3 & 4 hair. The website will serve as inspiration but she will not be providing any services.

Roles and Responsibilities
I served as a UX researcher, interaction designer and usability analyst. I used the Google Suite, Trello, Zoom and Figma to conduct, create and document interviews, competitive analysis, personas, surveys, user maps, sketches, usability tests, wireframes and prototypes.

Problem
My client is commissioning me for this project because she has had trouble finding hairstyles for her long haired son. Hair and children’s styling websites are primarily catering to girls. There needs to be an alternative for boys.

Audience
People who care for style little boys’ hair (type 3-4)
Hair Stylists
Parents
Caregivers/Babysitters
Relatives

Solution
I created a low fidelity prototype for a website that highlights little boy hairstyles, not girls! I have turned my client’s frustration into a creation that will later serve as an inspiration!

The Process

Discovery & Research
Client Interview
I started off by getting to know my client and what she wanted. As it turned out, her idea was very developed. It was just an idea, it didn’t seem like much thought was put past that. But over several phone calls, texts, emails and zoom meetings. We were able to develop her idea of displaying her son’s hairstyles to an inspirational website in the making.

 

Avenir Light is a clean and stylish font favored by designers. It's easy on the eyes and a great go to font for titles, paragraphs & more.

Competitive Analysis

Competing websites were focusing on little girls’ hair, mixing hair care and styling with other topics, and/or poorly organized.

Proto-Persona
Link to Proto-Persona on Figma

Through the client interview and competitive analysis, I was able to create a proto-person that embodied the user we were looking for: Nicole!

Journey Map
Link to Journey Map on Figma

Next, I decided to dig deeper into Nicole’s story and fabricate how she might stumble onto FrizzKid.com and what she might do on the site.

Empathy Map
Link to Empathy Map on Figma
As I followed Nicole’s journey I was able to better determine how she would be feeling before, during and after visiting our site. Also, thanks to a user survey that was conducted I was able to gain more insight into real peoples’ feelings.


User Persona
Link to User Persona on Figma

With a much better idea of the user, I was able create an ideal blend of concerns and pain points, resulting in Brianna! Someone is not only new to styling type 3 & 4 hair, but also has hair that is not even remotely similar to the boy she is styling.

Proto-Persona
Link to Proto-Persona on Figma
Through the client interview and competitive analysis, I was able to create a proto-person that embodied the user we were looking for: Nicole!

User Storyboard

At this point I had a better idea of what our user was going to be looking for when reaching Frizzkid.com as well as what my client wanted the user to get from the experience.

Sketches

I began to iterate several different versions of what I wanted the most important page to look like. In my opinion, this was the page that showed and taught the user how to execute the hairstyle, the entire goal of the website. With feedback from the client and stakeholders, I improved the page from the first sketch to the second.

Final Thoughts

It was a struggle getting the client to trust me at some points, even asking if I or any of the users would steal her idea. I learned how important it is to build rapport right from the start. Although she was happy with the end product, I was very adamant that this baby of hers would have to grow with the times, adding new and trendy haircuts and even consider adding a few feminine styles to be more inclusive. Most of these evolutions are going to slowly come with time and nurturing of the site. However, my immediate recommendations and final thoughts were as follows:

 

  • I coined the name FrizzKid. If she is not feeling it, do not hesitate to change it, it is her baby!

 

  • Think about asking professional hairstylists to suggest/add new hairstyles in exchange for exposure on the website.

 

  • Categorize the hair products page. 

 

  • Create a logo and slogan.

 

  • Ask the web developer to consider minor animation elements.

Information Architecture

Wireframe
Link to Wireframe on Figma

User Survey

Link to User Survey on Google Forms

The survey was key to creating the User Persona, Brianna, and finding people for the usability test.

Usability Testing/Interviews

I was lucky enough to have a multitude of people test the low fidelity prototype in person and do an interview with each. These 2 young ladies really stood out, as one is a professional in the hair field and the other is a mother that struggles to comb her son’s growing locks.

Brand Development
Style Tile
Link to Style Tile in Figma

Although I was commissioned for a low fidelity prototype only, the client's excitement led to us having a discussion about what the future may have in store for FrizzKid and possible color schemes, which was fun. After seeing this poster promoting a local Orange Festival, I preemptively created a style tile with elements of typography.

Accessibility
Using a Chrome plugin called Google Colour Contrast checker, I was able to determine which colors best served as a background for both black and white typography.

Prototype
Low Fidelity Website Prototype
FrizzKid Low Fidelity Prototype on Figma

Mobile Paper Prototype
Link to Video of Paper Prototype

High Fidelity Prototype (WIP)

Link to WIP Prototype

FRIZZKID WEBSITE