Beauty and Personal Care E-Commerce Site

The beauty of hierarchy.

A Beauty and Personal Care E-Commerce Start Up

Problem: It’s crucial to create user-centric designs and often internally we forget that external users don’t always think like how we do. One of the causes of poor design is due to the content being organized based on the company’s internal perspective rather than in a user-centric manner.

Solution: Our team suggested that the poor sales is due to the content being organized based on the company’s internal perspective rather than a user-centric manner. We recommended a complete reorganization of the site.



To begin, I reviewed a selection of beauty and personal care e-commerce websites, narrowing the the list down to three competitors: Clinique, Glossier, and Etude. After assessing these sites, I identified common patterns, effective structures, and documented my findings.

My research highlighted several key elements, including product differentiation, skin types, page types, collections, resources, services, and beauty-related terminology frequently used in the industry.

I then organized these insights into a streamlined list, categorizing the shared and effective features from the user’s perspective. This final list was divided into four main categories, each representing different hierarchical levels. My aim was to develop a comprehensive set of pages and content types for a card sorting exercise, ensuring clarity and avoiding participant overwhelm.

For preparation, I began by carefully selecting items from my finalized list to use in the open card sorting survey, aiming to capture the essence of what was most important for users.

With a clear target in mind, we recruited participants who embodied the diverse range of target audience – adults in theirs 20s to 40s, both men and women, passionate about makeup, personal care, and beauty. We added pre-survey questions asking for their age and interests in the beauty and skincare industry to profile the ideal candidate for this survey.

The open card sorting exercise unfolded as a collaborative exploration. Participants received a Figma link where they could drag and drop items, grouping and labeling them according to their preferences. To accommodate different working styles, they had the option to manually jot down their thoughts on paper or on their devices. The entire activity was designed to be concise and efficient, with a 5-minute time limit to capture genuine, instinctive feedback.

To accommodate the varying preferences of participants in the card sorting activity, I compiled their results into a comprehensive PowerPoint presentation. By reviewing and synthesizing the data, I consolidated some of the common categories that emerged from the exercise.

The analysis revealed key patterns through visual aids like bar graphs and scatter plots. These visuals highlighted the frequency with which users grouped categories such as exfoliators, moisturizers, sunscreen, and cleansers under broader terms like basic skincare, skincare, or skin prep. Additionally, it became evident that differentiating products by specific facial areas—such as face, eye, and lip—was less critical for users across the board.

Task Creation: To design the tree testing task, I selected five diverse and representative tasks:

  1. Find the toner
  2. Find the FAQs
  3. Find the lip gloss
  4. Find the sunscreen
  5. Find the virtual makeup try-on

Setup and Execution: I created a tree testing on optimal workshop that includes study details, participant requirements, tree, tasks, messages and instructions, questionnaire, pre-screening questions, and thank you messages. Because the purpose of this tree testing is to test the effectiveness of the proposed information architecture for a beauty/personal care e-commerce site, I required my 5 participants to be the ages of 20-40, well-versed and interested in beauty/skincare/makeup/relevant, and tech-savvy to understand and use different platforms when given instructions.

Tree Testing Summary/Insights:

Navigation Efficiency: While the overall efficiency was moderate (80% direct task completion), there were specific areas where users encountered challenged:

Mobile Usability: Thumb obstruction on smaller screens (mobile devices) impacted navigation for one participant, particularly wen accessing elements located at the edges of the screen

Support Section: users had difficulty locating FAQs within the support section, often navigation to incorrect sections instantly

Task Completion: While most participants were able to complete tasks eventually, the number of clicks and time taken varied significantly, indicating potential areas of navigation improvement

Navigation Path Issues: Participants frequently deviated from the intended navigation paths, highlighting potential confusion in the current information architecture. Specific pain points included: Difficulty locating virtual makeup try-on within the overall navigation structure

To cater to both new and returning customers seeking top-rated items, I ensured that our most recent and popular products were prominently featured across key categories: New, Limited Edition, Sets, Trending, and Bestsellers, along with their respective subcategories.

In the skincare section, I organized products to reflect a logical sequence of skincare steps, making it easier for users to find items based on their skincare routines.

For the makeup section, which has the largest assortment, I divided it into distinct categories: Face, Eyes, Lips, and Brows. This structure allows users to quickly locate desired products and explore related items.

In the Hair & Body Care section, I separated hair care and body care products to streamline navigation, ensuring users can easily find and select the specific products they need.