Natural beauty is an e-commerce website & mobile app that sells cosmetics with several value propositions, for example they are cruelty free and plant-based with refillable containers. Furthermore, this website uses AI that can help customers choose their items easily. Our goal was to design a website and an app that make purchase process easier and clearer for users. This project consists of the entire workflow from UX research, initial sketch, web & app design, prototyping to user testing, while also focusing on User Interface aspect.

Here is a sample displaying a part of this design, but you can scroll down and read more or click the button to view the complete Figma prototype.

Project Overview

Team

My Role

Duration

Tools

Sorour Askarzadeh

Shamim Validi

UX|UI Designer

3 Months (Fall 2023)

Figma, FigJam, Photoshop, Zoom, Google Meet

According to websites and apps we analyzed, we recognized several problems, but then we reached to solutions.

1. They failed to display their value propositions effectively.

Solution: We displayed value propositions on homepage of website and app so that users can figure out these values quickly.

2. Due to ineffective information architecture and icon accessibility, users ignored to finish their purchase.

Solution: By doing research (interview, competitive analysis, cart sorting,..) we could design useful information architecture. Additionally, we chose suitable names for different features to avoid misunderstanding among users.

3. Information about each product such as product size, before and after image which show how product can be effective on skin was Insufficient.

Solution: We provided relative information about each product to make costumers needless of any help outside of website and app by doing a wide range of research.

4. Complex AI process made users confuse and tired so that they refused to use this feature.

Solution: In order to make easier and more efficient AI feature we shortened the process. Apart from that, we chose understandable name for this feature.

5. Inconsistency in User Interface caused discouraging customers to complete purchase process.

Solution: We prepared website and UI kits at the beginning of our design to keep away from inconsistency.

The Process

In our project, we followed the Double Diamond method, which is rooted in the Design Thinking methodology. Rather than a linear progression, we moved back and forth between stages as the project evolved.

1

2

3

4

Define

Discover

Develop

Deliver

Discover

Our team conducted discovery research and user research to better understand the need for the website and app and the way competitor’s have found solutions for similar problems. Our research was an iterative process.

At first, we gathered essential data by compering approximately 70 websites which are related to selling cosmetics. This comparing was about different aspects that we mentioned all of them in this table:

Competitive Analysis

Interview

After deriving information from competitive analysis, we could design questions that helped us know more about users demands. At this step, we interviewed 10 potential users. We used the 5 W+H questions to delve deeper into users demands. The demands are as follows:

• Buying vegan and cruelty free cosmetics can be important and would be a priority if it was an easy way for customers to know that these products are in the website.

• Customers are interested in knowing more about the products they buy.

• As checkout process can make users confused and reluctant to continue their purchase, they demanded an easy and clear checkout process.

Define

Persona

We gathered our findings to create a user persona in order to understand the type of person we would be designing for.

And these are our takeaways:

Affinity Diagram

After gaining information from interviewing, we started using affinity diagram to help us organize information into groups of similar items.

• Users want to know more about business so that they can trust it.

• Users want to have accessibility to the useful information about each product.

• Users want to have easy access to capabilities such as AI, which can be used to select desired products online and easily.

• Website and app should have a proper design so that users can easily be informed of each stage they are in.

Develop

Information Architecture

Based on the information from competitive analysis and the needs of the clients and users, we came up with a hypothesis for the site map. To make sure it aligns with the users’ mental model, we tested it by conducting 5 closed card sorting tests. We used the information that we gathered from card sorting to figure out where we should put essential data according to the users’ perspective.

Task & User Flow

First we designed a task flow that represents the user’s journey through a specific task.

Then we designed a user flow that represents the series of steps the user takes to accomplish a single task in the website and then in the app.

Sketch

Wireframe

At the next step we designed website and app lo to mid fidelity wireframes:

Mood board

Based on the business type and users’ perspective we designed a mood board, and we used it to define the primary UI colors and the visual design identity.

UI Kit

We designed UI kits for website and app in figma.

Website Homepage

Mobile App Homepage

Website Homepage

Mobile App Homepage

Website UI Kit

Mobile App UI Kit

Mobile App Homepage Iteration

Deliver

High fidelity prototype

For the hi-fi prototype, we designed several pages for the website and mobile app.

Website's:

Homepage

Category page

Product page

Shopping cart Overlay

Mobile App QR code Overlay

Mobile App's:

Splash Screen

Homepage

Category page

Product page

Filter page

Sort page

AI process

Shopping cart

Checkout process

Reflections

What did I learn?

• Encouraging open dialogue and feedback among team members can enhance resilience and prevent burnout.

• Effective communication harnesses diverse perspectives, leading to better decision-making and innovative solutions.

• Without understanding the needs and wants of actual users, I cannot design a powerful e-commerce experience. The user research is an important method for understanding their motivations and creating a website they will love.

• A style corresponding to the nature of the business makes it easier for users to understand the website's purpose from the very first glance.

What can we do next?

• After conducting extensive research, we realized that users often struggle with using artificial intelligence on websites related to the sale of skincare products. Therefore, we have decided to design this section of the website in a way that makes it easy for users to utilize AI and find products suitable for their skin.