Role

UX/UI Designer

Product

Responsive Website

Duration

November to December 2023

Tools

Figma & Optimal Workshop

OVERVIEW

Curly Coiffure is a black female-owned business based out of Dallas, TX. The vision of Curly Coiffure is to enhance the beauty of curly hair and melanated skin. It initially started as a service-based business, but has since transitioned to selling hair oils and butters.

In my recent project with Curly Coiffure, I addressed a common challenge faced by our online shoppers and existing customers. Many found it daunting to choose the right products and navigate through our website efficiently.

Stepping in as the sole designer and researcher, I took charge of a comprehensive website redesign. My goal was to simplify the product discovery process and provide personalized recommendations, ensuring a seamless and enjoyable shopping experience. By leveraging my expertise, I not only tackled the pain points of our target users but also elevated the overall accessibility and user-friendliness of Curly Coiffure's online platform.

PROBLEM

The current website design at Curly Coiffure hinders efficient product selection and navigation, affecting customer satisfaction, retention, and potentially leading to decreased sales in the highly competitive online beauty market.

The current inefficiencies in product selection and website navigation have a direct impact on customer satisfaction and retention. Customers may become frustrated, leading to potential abandonment of the site and, consequently, a decrease in sales and brand loyalty. Addressing this problem is not just a user experience enhancement; it is a strategic imperative for sustaining Curly Coiffure's competitive edge in the dynamic online beauty market.

user interviews

Users emphasized that authentic reviews, clear communication, and minimalist design drew them to their favorite brands.

I interviewed 5 online shoppers. I wanted to learn more about what users like about their favorite brands so that I could replicate that experience for Curly Coiffure’s customers. I also wanted to get users’ opinions of the current website. The research was directed toward the following objectives:

Learn more about what users love about their favorite online retail brand websites.
Draw a comparison between the UX with those brands and the UX with Curly Coiffure’s website.
Gain an understanding of users’ pain points when shopping online.
Grasp what helps users meet the goals vs. what hinders them when shopping online.

I was able to achieve my research because the questions I gave me insight into what users liked and what the current website could do better. I learned that users place a premium on authentic reviews, clear website communication, and minimalism in design.

customer journey map

The customer journey map highlighted key opportunities to address the negative aspects of a user’s experience with the brand, particularly in the research and decision-making process.

I created a customer journey map to better understand the process that customers go through pre- and post- purchase. I wanted to use this method, rather than an empathy or affinity map this time, because I thought it would help me learn about the sentiments of people as they interact with a brand from start to finish. As a result, I got a glimpse into the potential emotions, expectations, goals, and thoughts of users. This exercise was really helpful as I could think about tending to the negative parts of the user’s experience, particularly as it pertains to the research & decision-making process.

POV/HMW statements

Users want personalized shopping experiences that guide them to make the best choices. How might we create that experience for our users?

I made point of view (POV) and “how might we” (HMW) statements. Both types of statements helped clarify the type of user and the type of problem I was creating a solution for. The POV I decided upon was about a decision conscious online shopper who wants a personalized shopping journey that guides them through choices. I chose the HMW “How might we create a personalized and trustworthy shopping experience for users?” I learned that sometimes simpler statements and HMWs are better than overly complex ones.

sitemap

Information architecture is shaped by the objectives of the website.

I set out to create a sitemap based off of a card sorting exercise. I made 60 cards because I thought that was the required number, however not all of the cards were necessary.

I ended up going back to the drawing board to recreate the original sitemap, then list out the goals of the website, and finally redesign the sitemap. In this way, I was able to make sure that structure and function aligned. The result was a more organized website. I learned that card sorting should be done after some initial evaluation of the needs of the website and only elements that you actually plan to use should be included.

low fidelity wireframes

Utilizing low-fidelity wireframes enabled me to engage in layout discussions with the owner without the distraction of lower-priority elements such as color, typography, and images.

I made low fidelity wireframes so that I could have the basic layout of the website mapped out. While there was a lot of effort involved up front in starting out with digital wireframes, I feel like these help me to move more smoothly into my high-fidelity wireframes. As a result, I was able to get a concrete look at the elements that I wanted the site to include and could even show the wireframes to the business owner so that they could provide input before things became more concrete. I relied a little too much on pre-fabricated elements this time, but going forward I think that I will tailor them so that they will be truer to the final product.

high fidelity wireframes

Refining the finer details in the high-fidelity wireframes empowered me to showcase a product to both the client and customers that not only adheres to the brand identity but also enhances the original concept.

The next step was the high-fidelity wireframes. I made these so that I would have something to present to the client and customers. I also wanted to start adding the icons and imagery and see how everything would combine. Ultimately it ended up coming together well and staying true to the owner’s vision while also being an improvement upon the original. I learned about the importance of taking some creative license, while also staying consistent with branding.

USABILITY TESTING

Quick and early feedback provided by usability testing can allow more rapid improvements to the product.

I started usability testing about midway through the high-fidelity creation process. This was the first time I started usability testing before everything looked the way I wanted it to. I had to ask questions about how users would potentially navigate the website, rather than time and check errors as they actually navigated it as I had on previous projects. I took this approach because I knew I would have to make a lot of changes based on feedback, so it was important to get the feedback from users as soon as possible. As a result, I was able to get more information on how things should work and look before everything was solidified. I learned the importance of testing quickly and early.

priority revisions

Minor changes to the purchasing flow created increased sales opportunities.

I made revisions based on the feedback I received during the usability testing. I wanted to make sure that the functionality and appearance of the website met users’ expectations. Some of the changes that users mentioned were editing the review section to make sure they were shorter and larger, including a shop or product section in the header, making the newsletter sign up more prominent, and keeping functionality consistent when purchasing items. I made sure to make edits based on these points. In particular the item purchase needed to be corrected. The original version didn’t have a view cart option after the quick add process because it was meant to bring users to a quicker purchase decision, however that method was creating confusion and leaving out an additional product recommendation opportunity. For this reason, I added another step in the flow which would show the second added product and list out more recommendations. As a result, I was able to show off more products and reinforce the purpose of the website changes—to drive more purchases. I learned that consistency is key when bringing a user flow to life and that users will be able to spot differences easily.

THE SOLUTION

Prominent product recommendations and reviews help users make informed decisions based on feedback that they can trust. Optimally the website will allow for recommendations based on products the user has already selected and learn the users’ preferences as they shop. One example of this would be: if a user selects the orange lavender hair & body butter, then the honey & shea and citrus butters will be recommended as a result. If they select the tea tree oil, then the other oils will be presented. Similar scents will also be presented based on what has already been chosen in the past.

RESULTS

One-hundred percent of users agreed that the website was clearer and products were more centralized. They also enjoyed the clean, modern aesthetic. 100% of users were able to complete the purchasing task. When the website redesign gets launched I will look into whether people sign up for the newsletter and coupon, how many products are being purchased, and whether the product recommendation engine is actually encouraging people to add an additional item to their cart. The purpose of the website is to increase sales, so that would be the main focus. I would also regularly check reviews and customer satisfaction.

The redesign gave the website more direction and focus. Originally the owner braided hair and much of her website was showing this service, rather than her products. Now the products take center stage and the branding is clearer.

lessons

I learned what it is like to work with multiple stakeholders—both customers and a business owner. The importance of collaboration really came through. This experience felt somewhat like the add a feature project because there were some elements that I had to include to remain true to the owner’s intent, but it was also somewhat like the end to end application project because I did have a lot of creative license. I think it is all about balance when designing for stakeholders. You have to stay true to business goals and balance user needs. You also have to keep in mind that everyone has a different agenda and priorities. My focus was on creating an engaging user experience, but the owner wanted me to help her increase sales as well. Ultimately, I think we will be able to accomplish both goals.