To successfully complete this project, I integrated the Design Thinking mindset into the User-Centered Design (UCD) process, creating a comprehensive and in-depth approach.

I spent some time researching other websites to understand what competitors in the market are offering.

I used Chat GPT and Google Search to find the most popular companies providing private-label services for organic cosmetics in the USA and conducted a competitor analysis on GreenDropship, Blanka, Via Glamour, and Jubilee. While GreenDropship specializes in organic and eco-friendly products similar to DR.HC, Blanka, Via Glamour, and Jubilee were not exclusively organic but stood out as user-friendly platforms with a strong reputation in the industry.

I analyzed their unique features, missing or weak points, design strengths, and design flaws to identify what to avoid and gain inspiration from standout designs and features that could be implemented in this project. Among them, Blanka and Via Glamour were the most inspiring to me from a design perspective.

METHODS & GOALS:

INSIGHTS:

What surprised me was the extremely high percentage of participants who did not notice that we offer private label services when they first landed on our website. These findings align with the data I gathered from analysts, which highlighted how difficult it was for potential clients to navigate our website for Private Label services—explaining the high bounce rate and the high volume of customer service inquiries.

USER AWARENESS OF PRIVATE LABEL SERVICES ON HOMEPAGE

• 58% of users who visited our homepage for the first time to start a private label business were unsure whether we offer private label services.
• 37% took some time to notice our PL services
• Only 2% said they found the services quickly.

USER RESPONSES WHEN UNSURE ABOUT THE PL SERVICES

• 62% said they would contact support
• 31% indicated they would likely leave the website.

I then conducted user interviews to gain a deeper understanding of the pain points and needs of the target users.

It was crucial to interview individuals who could be potential clients of the private label service, as their insights would help me gather valuable data about user needs. To ensure I selected the most relevant participants, I conducted a screener survey targeting business owners interested in creating their own organic, vegan, or cruelty-free cosmetic brands but who had not yet joined our private label program.

Participants were recruited through our newsletter subscriber list.

METHOD:

I conducted user interviews with 5 participants and asked them 28 questions covering various aspects. Noticing that it seemed difficult for users to navigate the PL services on our website, I focused my questions on their needs and expectations when looking for a PL supplier, their pain points when exploring our website to find PL services, and their motivations to engage with the services. I also gathered information about other suppliers they are currently considering, as well as their budgets and preferences, to gain a broader and deeper understanding of their overall experiences.

KEY INSIGHTS:

One of the results that surprised me the most was that 5 out of 5 users revealed they wanted to see that the company offers Private Label services at a glance when navigating the Main Menu and the Homepage. This indicated that the current website was not clear in communicating to users that we offer those services.

The findings align with the insights from the User Research Surveys and the data collected by the data analysts.

I then proceeded to analyze the data collected from users through the interviews. To address these issues, I used the Affinity Mapping technique to synthesize the data into actionable insights, which improved my understanding of user needs and pain points and helped me narrow down the problem scope.

The affinity mapping analysis revealed 4 key factors that could alleviate potential clients’ pain points when visiting the current website and encourage engagement with our platform. The results also aligned well with the findings from the User Research Survey:

By focusing on these areas, we can effectively address the users’ challenges and promote engagement with our platform.

Based on the results of the user interviews and the analysis from affinity mapping, I used Miro to create a persona representing the target users: business owners who want to create their own organic, vegan, and eco-friendly cosmetic brands, and are new website visitors. I named her Cynthia. Establishing this persona helped me stay focused on the users’ needs and pain points, allowing me to think from their perspective throughout the design process.

To help me easily envision potential solutions, I created a map of the possible end-to-end experiences that target users will have when visiting the DR.HC website. The user journey map helped me focus on the most critical aspects of the user experience that I wanted to improve.

To address the main question, I concentrated on the most critical aspects of the user experience identified through research data analysis and organized the problems into 4 themes:

I started generating ideas by utilizing divergent thinking techniques to create user stories, which demonstrate how my users would navigate the target pages or sections of the website to reach their goals. 

I asked myself these key questions: What do users want to do when landing on the Home Page, Product Page, or Contact Page, or when navigating the Main Menu or Footer? What information do they want to see, and what actions do they need to take in order to engage with our Private Label services?

This process helps me better understand my users’ behaviors, always keeping them at the center of my designs.

I prioritized all the stories in the User Stories list based on how much they helped users meet their main needs and resolve their pain points, which were identified during the user research phase. I then created a User Story Mapping to highlight the most crucial user stories that should be prioritized for inclusion in the target pages/sections, as they most effectively address the identified problems. This User Story Mapping served as an essential reference, ensuring that my designs consistently centered around the users.

Through user interviews, 5 out of 5 users revealed that they wanted to easily see the company’s Private Label services when navigating the main menu. As a result, I decided to add “Private Label” as one of the top-level menu items in the main navigation.

Additionally, since the company offers services related to its own brand, DR.HC, I also added that option to the first level of the main navigation. This ensures that my designs meet the design constraints: showcasing the Private Label services while keeping the design user-friendly for visitors interested in the DR.HC brand.

I created a detailed sitemap to reflect these changes, which will serve as a guide for designing the user flows in the next step and redesigning the website’s main navigation.

I combined the key user stories into the sitemap and developed a user flow to depict the main routes users take through the target pages and sections I worked on in this project to reach their goals. The user flow helped visualize the major actions users take step-by-step when navigating the website to find the private label services, and served as an essential reference for me to ideate solutions.

Now came the fun part! After mapping out user actions on each page and section through the User Flow, I began creating hand-drawn sketches, integrating my solutions to enhance the user experience wherever possible throughout the journey.

For the Main Navigation, Footer, and Home Page, I developed multiple sketch variations.

During sketching, I constantly asked myself: “How can we help users easily notice the PL service, understand the value we offer, perceive our services as attractive and trustworthy, and quickly access service details?”. This mindset ensured that users remained at the center of my designs.

My sketches encompassed the 5 pages and sections I was working on (desktop version)

I then conducted a quick guerrilla preference testing with 7 users, asking them to vote for the most optimal designs of the pages/sections that had multiple sketch variants. Additionally, I had them complete several tasks to quickly validate whether the initial designs worked.

Based on their voting, I decided on the most potential design versions. Overall, they liked my ideas, aside from some minor issues, such as some text fields being left blank, which made them take extra time to guess their meaning or required additional explanations. Thankfully, all participants had no trouble interacting with the sketches and successfully completed the given tasks.

Once the sketches were finalized without any issues, I proceeded to create high-fidelity wireframes in Figma for both the desktop and responsive mobile versions. These wireframes featured precise layouts, consistent components, and more detailed content and functionalities. They effectively conveyed my solutions and established a strong foundation for the design, enabling me to develop visually polished high-fidelity mockups in the next step.

In this redesign project, besides developing solutions to enhance the user experience—helping users easily find and engage with PL services—I also created new component sets for both the desktop and responsive mobile site to accommodate the design updates. Additionally, I revised the UI Style Guide to align with the new changes.

To reflect the brand’s visual concepts, my primary improvements focused on the color palette and font sizes, ensuring a clearer hierarchy and enhancing the visibility of PL services through consistent color usage. I also prioritized a clean and highly readable interface while maintaining the brand’s core attributes: Natural, Earthy, Comforting, and Trustworthy.

The final UI Style Guide

I then moved on to creating high-fidelity screens for the desktop and responsive mobile versions, based on the detailed wireframes and the UI Style Guide. For each page or section I worked on, I kept the users’ pain points and needs in mind, ensuring that the design addressed the four key challenges:

1. Enabling quick access to the service detail pages
2. Making the Private Label services easily noticeable
3. Clearly communicating our product values
4. Ensuring that our services appear attractive and trustworthy

After creating a high-fidelity screen based on the wireframe structure, I realized that the 3 main sections—Who We Are, DR.HC Brand, and Private Label—were not clearly distinguishable. Each section contained multiple subsections, and the abundance of visual elements and content made them blend together.

To validate this concern, I had quick discussions with a few coworkers to gather their perspectives. While I understood that testing with real target users would be ideal, in this case, the goal was not to evaluate interest in Private Label services but rather to determine whether the site’s hierarchy was clear enough for users to distinguish between sections. I decided to do a quick internal check to see if others shared my observation.

As a result, all three colleagues I consulted preferred a clearer hierarchy. To address this, I incorporated two full-width banners to better differentiate the DR.HC Brand and Private Label sections. This solution was later highly appreciated by stakeholders.

For the new Helpdesk feature, I proposed AI-driven service recommendations and prioritization, similar to Amazon’s product recommendations, to enhance visibility and access. Although AI technology constraints prevented immediate implementation, stakeholders recognized the solution’s potential and earmarked it for future iterations.

I then proceeded to develop an interactive prototype of the pages and sections I was working on to provide a realistic experience for the participants in the next step of usability testing.

METHODS & GOALS:

KEY TASKS & QUESTIONS:

KEY FINDINGS:

I made these changes for both desktop and mobile versions:

1. Changed the menu label from “Private Label” to “Create Your Brand” for more user-friendly wording, especially for new users.
2. Added a value banner right below the main sliders to better highlight our product values.

I conducted a second round of usability testing with 5 different participants, using the same method and key questions/tasks.

KEY FINDINGS:

Task success rate

100%

• 5/5 users were able to quickly notice the private label services.
• 5/5 users were able to easily access the private label services.

User satisfaction rate

100%

• 5/5 users were satisfied with how easily they could learn about our values.
• 5/5 users felt trust and expressed a desire to learn more about our services.

NEXT STEP:

We received a suggestion to explore alternative placements for the running banner, such as a sticky bar at the bottom of the screen. Although we didn’t implement this iteration immediately, I documented it for future design explorations.

Recently, we revisited this project and are now conducting A/B testing to determine the optimal banner position and continuously improve user experience.

Once everything is validated, tested, and approved from the stakeholders, I handed off all materials to the stakeholders and developers.