.png){kind=small}
I Am Divine Hair Care
Website Redesign | Desktop and Mobile
Overview
I Am Divine Haircare is a small hair care company located in Greensboro, North Carolina that focuses on natural hair care solutions. Their popularity stems from their core values promoting self-care, self-love, and natural beauty of African American women.
My Role
This was a self-initiated project where I saw a gap and was given the bandwidth to work on a creative solution. I was involved in every step of the process including User Research, Product Strategy, UI Design, Interaction Design, and Usability Testing.
Challenges
The initial web version utilized an Envato landing page template, resulting in multiple usability issues and a lack of adaptability for business expansion. When assigned the responsibility for the first significant redesign of this digital experience since its creation, I aimed to address several key issues:
Responsiveness: The existing design posed usability challenges, as it was only functional on large screens, causing difficulties for users trying to access the site on mobile devices. User research indicated that more than 65% of visitors had tried to navigate the website using their mobile devices, contributing to notably high bounce rates.
Flexibility: The template's design imposed notable constraints on showcasing product details effectively. It was crucial to deliver visually clear product information and a comprehensive product catalog to customers visiting the site. In rebuilding, we had the opportunity to update not only a more modern UI but an improved design system as well.
Research & Planning
Tools
Pen and Paper | Figma/FigJam | Otter AI | Notion
Methods
When this project started, I conducted a competitive analysis to better understand the market/industry. Then, I conducted several interviews with both users and stakeholders to understand the current limitations from both a front and back-end perspective in order to design a holistic solution.
Key Findings
Following the user interviews, I organized the insights into categories using an Affinity Map and found three areas of opportunity:
-
Trust in Products - Participants wanted to make sure the product worked specifically for their hair type and wanted to see results in action to ensure that the product worked for individuals with a similar hair type to theirs.
-
Transparency with Products - Participants wanted a complete list of ingredients used in their hair care products to be clearly visible so they can ensure that it meets their specific needs.
-
Lack of Educational Resources - Participants wanted to have some form of education on how to use certain products, different hair styles that the products could be used with, or learn more about their specific hair type.
These findings led to the creation of a persona (Maya Anderson) to ensure that I always empathized with and kept the target user group in mind when ideating design solutions.
Maya Anderson, a 28 year old busy professional who struggles to find products that work for her hair. Maya looks for efficient and effective hair care solutions, reads product reviews, values convenience and easy online shopping experience
Ideation
Tools
Pen and Paper | Zoom | Optimal Workshop - TreeJack | Notion
Methods
Following the user research stage, I generated potential solutions by framing POV & HMW statements that could improve the overall user experience as well as bring additional value to the business.
"
How might we help individuals with diverse hair care
concerns and challenges find personalized product recommendations and solutions?
With the statement in mind, I compiled a prioritized list of features that best aligned with business and user goals. Recalling an idea from the user testing, I debated whether to incorporate a hair quiz as a feature for more personalized recommendations.
To see if this was feasible, I conducted another round of stakeholder interviews to see if there were any technical constraints. Following stakeholder feedback, I conducted a Card Sort to comprehend our target users' navigational preferences before implementing a new IA.
In response to insights gathered from the card sorting activity, I developed a Site Map and User Flows which provided comprehensive blueprints for the website's structure and guide users through a seamless journey.
.png)
Design & Prototyping
Tools Used
Pen and Paper | Figma | InVision | Notion
Process
Initial desktop and mobile sketches were based on the current company website with minor improvements to the interface.
Guided by my initial sketches, I produced lo-fi wireframes responsive wireframes to visually represent early concepts. These wireframes facilitated valuable feedback, enhancing the efficiency of the iterative process.
.png)
Desktop
%20(1).jpg)
Mobile
After finalizing the flow and interactions through the low-fi prototypes, I focused on crafting the content essential for their brand refresh. Through the curation of a moodboard and style guide, I translated abstract ideas into tangible visuals, ensuring a cohesive and impactful brand identity that resonates with our target users.
Developing a UI kit played a crucial role in streamlining my UX design project. This collection of pre-designed elements guaranteed design consistency and efficiency, fostering a unified user experience, and allowing the team to focus on inventive solutions.
Testing
Tools Used
Pen and Paper | UserZoom | Notion
Methods
To evaluate the user experience, I carried out remote moderated testing using UserZoom. This approach provided real-time insights into how actual users interacted with the proposed solution, helping identify strengths and weaknesses within the design.
Insights
The testing revealed the system usability score (SUS) significantly increased to 78% (up from the initial score of 65%). Users attributed this improvement to the increased confidence with their product selection. Other feedback from the retest included:
-
Insight #1: Users favoring the inclusion of filters or sorting options for products on the recommended products page.
-
Insight #2: Users expressing a preference for a description explaining why specific products were recommended for them.
-
Insight #3: Users noting that the clarity of the "add to cart" button in the original mockups needed improvement.
Solution
Tools Used
Figma | InVision | Notion
Results
Insight #1: Users favoring the inclusion of filters or sorting options for products on the recommended products page.
Original Design
.png)
Revised Design
.png)
Insight #2: Users expressing a preference for a description explaining why specific products were recommended for them.
Original Design
Revised Design
Insight #3: Users noting that the clarity of the "add to cart" button in the original mockups needed improvement.
.png)
Original Design
.png)
Revised Design
Prototype
Next Steps
The next steps will involve building upon the foundation laid at the project's initiation. I will continue the competitive analysis to stay aware of the market/industry dynamics. Additionally, further interviews with users and stakeholders will be conducted to gain a comprehensive understanding of existing limitations, encompassing both front and back-end perspectives. These insights will guide the development of a holistic solution.