Responsive Design

Natural bath and body products are hard to find, costing consumers money and time. The client wants to create a central website that provides visibility of high-quality natural products to a community that discovers products that fit their skins' needs while maintaining a sustainable lifestyle. I was responsible for conducting user research, designing an intuitive user flow for exploring new products, and designing and iterating the user interface for desktop and mobile devices. 

Real Space Gray.png
 

Goals

  1. Confirm the need for a centralized location to search for natural beauty products.
  2. Understand the discovery and shopping process of the target audience when purchasing these products.
  3. Identify the products that require the most effort in finding.
  4. Learn the criteria necessary for what is considered natural skincare.
  5. Identify factors that influence purchasing decisions.
 
When companies care about the environment, they care about people.
— Yannell, Interview participant

With synthesized findings, I decided to design a platform where consumers feel that their exploration and purchasing journey has a purpose. I focused on creating an experience that fosters transparency, simplicity, and trust.

Persona Development

Based on the research findings, I developed a persona to have a realistic representation of Find Natural Skin's key audience. Our persona, Katherine, a 30-year-old female from San Fransico, helps address the major needs and aspirations of the user group. 

 

User VS Business Goals

User goals vs Buisness Goals@2x.png

Information Architecture

After understanding the target audience, I conducted a card sorting exercise to understand how users categorize natural body products as well as to identify the criteria of what "natural" means to them. The content categories helped me catalog the environmental features that are most valued by the target audience and it helped me establish the taxonomy and architecture. 

Bath&Body Discovery Sitemap@2x.png

User Flow

To further empathize with the user we main steps to identify the different paths that a user would take through their product to complete each task, considering points of entry, browsing for items, and sign-ups in the process.

Wireframes


Branding & UI Kit

The branding is kept minimal with a hint of warmth through the color scheme. Skin diversity and the people interacting with nature is the theme for the imagery to illustrate the sincerity and serenity of nature and its influence on people.

High-fidelity Screens


Testing

I created a high-fidelity desktop prototype Invision to bring the wireframes to life conducted usability tests. The tasks given to participants include:

  1. The user will search product and filter results based on environmental features.

  2. From selected product user will create an account to upvote the product.

  3. The user can visit merchant's page to get the product

  4. The user can read blog posts.

Next Steps

From the usability tests, I identified screens and content that need to be added so that users have other reference points to facilitate their product search and discovery journey. For the next phase, I will be adding category pages, brand information, and influencer highlights. After creating the prototype the client asked me to continue to work the project throughout the development phase. This will be an on-going project with multiple iterations until the MVP is launched. 

NEXT: MIRROR E-COMMERCE