Natural Beauty is an e-commerce website & 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 which can help customers choose their items easily. Our goal was to design a website and an app that make purchase easier and clearer for users. This project consists of the entire workflow from UX research initial sketch, web & app design, prototyping to user testing.

About Natural Beauty

Duration
3 month

Team
Group of 5

My Role
UX/UI Designer

Software
Figma
Figjam

Design Process

Studying the Needs of Users

For this project, our discovery phase was conducting both quantitative and qualitative research, which included user interviews and competitive analyses.

Competitive Analysis

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

User 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 5W+H questions to delve deeper in to users demands. Users want:

Buying vegan and cruelty-free cosmetics can be important and would be a priority if it was an easy way for customers to purchase.
Customers are interested in knowing more about the products they buy.
Because nowadays most of the customers are busy, they prefer to shop online.
The checkout process can make users confused as a result they refuse to continue their purchase.

Discover

Define

Affinity Diagram

After gaining information from interviewing, we started using an affinity diagram to help us organize information into groups of similar items. And these are our takeaways:
1. Users want to know more about the business so that they can trust it.
2. Users want to have access to useful information about each product.
3. Users want to have easy access to capabilities such as artificial intelligence, which can be used to select desired products online and easily.
4. The website & app should have a proper design so that users can easily be informed of each stage they are in.

Understanding the User

Persona

"I would like to obtain the correct & complete product Information."

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.

" sometimes it is hard to figure out what the business about ,when I use a website for the first time ."

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

" If I get confused in the menu and can’t find relative products, I lose my interest in purchasing online."

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.

" I’d be happy to use AI in case it makes finding a suitable product easy."

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

" Difficulty in finding the buttons and not knowing if my products are added to shopping cart or not can cause a bad experience for me."

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

Develop

Task Flow & User Flow

we designed a diagram that represents a user's journey through a specific task. then we decided to design a series of steps a user takes to accomplish a significant goal and a single task.

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

Site Map

Design

Wireframes

we decided to design a wireframe. We designed a natural beauty website and app. We tried to design this website based on users' needs that can help them make an easy and trustworthy purchase.

App Homepage Iteration

UI Design

We tried to use visual elements in our design effectively. Our goal was to find an interface that would respect users' time, effort and needs so that they would have a positive shopping experience.

Mood Board & UI Kit

We started with a mood board, collecting photos and ideas that inspired us. Through our research, we identified & finalized a color palette, typography standards, and designed icons and CTA buttons. As you probably noticed, our color palette is inspired by plant to better engage users with our products.

Hi-Fidelity Design

User testing & Iterations

After running a couple of usability tests, we decided to change the name of the AI that users can use to find suitable products for their skin.

Deliver

Reflection

What did I learn?

I learned that purchasing any product online should be an easy task. Simplifying the order and checkout process makes the overall purchase experience much better.
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.
Without understanding the needs and wants of actual users, I cannot design a powerful eCommerce experience. User experience research is an important method for understanding their motivations and creating a website they will love.
It is important to pay special attention to the homepage since it is what users see first, and it is the most important touchpoint. Learn what they want to see there and consider the most essential elements of the eCommerce UX.

Next step

In this project, I learned that Effective time management is crucial for group projects, as missing deadlines can significantly impact other team members’ roles.