Bolder Brows

UX/UI Case Study

Bolder Brows is a Microblading company located in Sacramento, California, and Richland, Washington. They have been mainly doing their business through social media sites like Instagram and Facebook. That worked initially, but they are looking to expand to the Richland area here in Washington, so they want a website that users can find in search, look professional, and represent their brand. Bolder Brows will offer new services soon, so they want also to add a booking and checkout system so clients can immediately book appointments and pay themselves without having to contact them through other means to schedule.

Company

Bolder Brows

Year

2020

Role

UX Designer
Visual Designer
Web Developer

My Role

I was the sole UX/Visual Designer and Web Developer for this project. I had to conduct all meetings through Zoom because the client lives in Sacramento, California. I did all of the project phases remotely.

The total length of this project from beginning to end was about one and a half months. Because I was the only one working on this project, I had to fill many roles. I conducted the user research, planned and facilitated stakeholder meetings, the visual design, and the actual site's development.

When it came to the visual design, the client did not have any set branding or visual language. I had a lot of freedom when it came to that. Though this was not a full-on branding project, I did have to develop a visual language for the site that they can build off when they decide to get their branding done later.

The Problem

Bolder Brows did not have an official website. They handled all of their bookings and communications through their social media like Facebook and Instagram. This worked for Bolder Brows initially, but they are looking to streamline their booking process and have it all in one place. They also want to have a more professional presence online to match the quality of the services they offer.

The Goal

To create a high-quality professional website that will visually represent the service level they provide, invoke a sense of confidence in the business, a booking system where clients can book an appointment and pay right from the site.

Understanding the Users

To get to know the target audience for the site, I had to do a lot of research. I am not familiar with this industry, so I first researched what microblading is and why people are interested in getting this procedure done. The business owner was also a great help in giving me insight into the clients they get. Another thing I did was interview some of my friends that fit the target demographics of the company. I took all of the information that I gathered through this process and used it to create personas.

Crystal Diaz

28, Marketing
Sacramento, California

Persona

Crystal is a marketing manager at an up and coming agency. She loves her job and the impact that she can have on brands. Her career is fast past paced, and she brings her A-game daily. She also wants to look her best but would like to save time where she can in the morning to get a few extra minutes of sleep before she gets up for the day.

Goals

  • Save time in her morning routine
  • Keep looking her best
  • Feel confident even without putting on makeup
  • Finding a place in her area that is affordable yet reputable
  • An easy way to book an appointment whether she is on her phone or laptop
  • Would like information on microblading because this is her first time so she is a little nervous

Pain Points

  • Most websites are clunky to use and take her off the site to complete a transaction
  • Unable to even book online and is required to call to set up an apoointment
  • Cant find reviews from people who have had a microblading procedure at a specific place
  • Tired of doing her eyebrows
  • Hates having to draw in her eyebrows even when she doesnt want to wear makeup

“I have been thinking about getting microblading done on my eyebrows. I hate having to do my eyebrows every morning, whether I wear makeup or not. Because if I don't,​ they are non-existent. I have friends who have done it and love their results, but I am still a little nervous.”

Breaking Down the Process

Diving Deeper Into the Problem

After learning about the business and the problems, they wanted to solve with this website's development. I did an in-depth competitive analysis of other microblading business in California and Washington to see how they solved these problems. I wanted to know how they represented their brand, presented their work, the type of vocabulary they used, and how they handled forms and scheduling appointments.

This is a list of the data that I compiled with how other microblading businesses or similar businesses address these problems.

Ideating a Solution

After this research, I felt that I understood what users expect and look for when trying to find a microblading artist to book. Also, there were specific experiences I felt like I could improve on when building this site.

It is important not to lead the user away from the site when going through the booking process. So I wanted to find a platform that would allow me to integrate their booking form directly into a page on the site. It also provides a complete and straightforward back end for the business owner to keep up with her appointments and clients.

I looked at different booking platforms, and I narrowed it down to three platforms that I felt would work best for potential clients, the goals for the site and the business owner. These platforms were Square, Jot Form, and Setmore.

Square - This was the most common platform that I saw used among microblading sites and even salons. My client even had a square account and was using it to book from their Instagram account. I decided not to choose this platform because they did not have an option to embed the booking API directly into the web page.

JotForm - Had the most flexible integration options and also supported multiple payment platforms, including Square. I decided not to choose this one because the back end was not as easy to use for my client as there was no built-in calendar for booking appointments or automatically keep track of clients. All the information collected from the forms would have to be organized manually as it would just send all the data contained in an email.

Setmore - This is the platform I decided to go with because it allows my client to take payments through Square still. It also has a built-in calendar that is automatically updated when a user makes an appointment. A customer profile is generated with each scheduled appointment so employees can quickly get a hold of their customer if they need to. I was also able to embed the API directly into the site though I did have to compromise as I could only do it through an iFrame. Setmore still provided the user with a great experience when booking while still being the best solution for my client.

Information Architecture

This is the first draft of my information architecture after meeting with the client and listening to what they wanted to see.

Information Architecture Final Iteration

This is the final structure of which I built the site. After researching and looking at it from the user's perspective, I felt like the draft needed to be reworked and simplified. The client wanted people to refer to the FAQ page before reaching out to her through email.

I decided to bring the FAQ top-level instead of grouping it with the about page. I also decided to group the services and the booking page, instead of having them both at the top level. That way was redundant and confusing to users visiting the page. This final layout is simple and more streamlined for a better user experience.

Wireframes

After meeting the client and presenting mood boards, we landed in a definite direction. From there, I developed some wireframes, and these are the ones that the Client and I landed on.

High Fidelity Mockups

After getting content and color into the wireframes, it was necessary to make adjustments. The client had some changes, and I also advocated for some because some weren't working out with the real content in place.

I wanted to create a sense of depth to add visual interest to the minimalist design. I added geometric shapes and layered the content over them with some parallax scrolling animations. The geometric shapes fit well with the brand since the type of service offered is all about precision and clear, crisp lines.

What I Learned

I learned a lot from this project. I now have a better understanding of how long it takes for me to design a develop a full website. I pushed my development skills further with this project, and now I have a better understanding of working with animations and my development tools. Setting up remote client meetings and presenting my work, and advocating for my design choices are the skills I got to sharpen.

There are parts of the design that I would implement differently, knowing what I know now. That way, I could have prevented some troubleshooting.

Visit the Bolder Brows Website