• Service
    • Mobile App
    • Made for
    • The Body Shop
    • Date
    • November - Desember 2020
UI/UX Case Study of E-commerce natural products online store

Feed your skin with nourishing ingredients

We created design of E - commerce store application for cosmetics shops of all types natural cosmetic lines of The Body Shop brand. Where people can buy and collect the natural cosmetics. Mobile app is perfectly suitable for natural beauty store, perfumes and etc.

Created with Figma
Who is who

Our products are made with natural extracts

The Body Shop is an original, natural and ethical beauty brand. The Body Shop's wide range of products includes body, face and make-up cosmetics, including vegetarian and vegan products.

The Body Shop is looking for unique and natural ingredients for cosmetics in every corner of the world, while trying to use natural resources wisely.

Our desire to enrich, not use the environment as never. for us, this means enrichment of both society and the planet.

The Body Shop is the first beauty company to introduce the principles of fair trade in the beauty industry.

Problem & Challange

Raise awareness of organic skin care products

How can we inform people about the benefits of using organic skin care products over their conventional counterparts?

Our task in this project was to raise awareness of organic skin care products and their benefits and create an online platform that will provide people with these products.

We wanted to create a product to raise awareness of the overall brand. Get more traffic to sell more onlin.

#Challange
  • Understand users buying behavior when buying natural cosmetics and their reasons for shopping, expectations and problems;
  • To inform people about the benefits of using organic skin care products;
  • Create a user-friendly and easy-to-use mobile application;
  • To raise awareness of the overall brand.
What we did

Project stages

It was user - centered design process, focused on the users and their needs in each phase of the design process. In the process we involved the users throughout with variety of research and design techniques, so that we can make an really useful and usable product for them.

  • Discovery
  • Design
  • Presentation

In the first phase of the project, we focused on research, user flows, mapping the information architecture, and creating wireframes.

After wireframes were initially tested by users, we proceeded to UI creation of high-fidelity mockups. With a solid basis of UX findings, the visual part of the app was designed, including interactions.

In the final stage, we created a comprehensive style guide with a basic description for the development process.

Research

Context study

User pain points

Competitive audit

Wireframing

Information Architecture

Low fidelity wireframes

User Flow

Design

Design principles

High fidelity wireframes

Interactive prototypes

Feedback

Field testing

Stakeholder review

Designer critiques

Research

Research helps to define the challenges and goals

The goal of the research phase was to gather crucial insights about natural cosmetic market as well as understand the perspective of the end - users - store customers.

We explored the topic using desk research, competitive analysis and user surveys, which led us to formulate a set of recommendations for features and build user flows.

Research results

Key metrics

Saudi Arabia is a leading market for cosmetics and personal care products worldwide. Growing self-awareness of one's appearance, ability to spend more, as well as increasing middle-aged population and growing demand for men's care products are stimulating the growth of the cosmetics and personal care industry.

$3.7 billion

The Saudi Arabia pharmaceutical drugs market is to be valued at

Source: www.blueweaveconsulting.com
$ 7.6 billion

Expected to exhibit a CAGR of 10.9% over 2021-2027.

Source: www.blueweaveconsulting.com
63%

63% of cosmetics consumers are loyal to brands that remember their shopping habits and customize their online experience accordingly

Source: www.octaneai.com
#Saudi Arabia cosmetics and personal care market's facts:
  • Saudi Arabia is one of the leading markets for cosmetics and perfumes in the Middle East. The market is developing and making a significant contribution to the economy of country;
  • The growing demand for natural / organic, herbal, halal products and innovative and environmentally friendly packaging designs explain the growth of the market in the country;
  • Facial care products have dominated the skin care market;
  • Dermocosmetic products are becoming increasingly popular in the market, as they provide both decoration and proper skin care;
  • Jeddah and Riyadh are two cities that make up the bulk of the young population, indicating larger consumption patterns in the cosmetics and fragrances market;
  • In Saudi Arabia, strong Internet penetration has greatly contributed to raising consumer awareness of cosmetics and cosmetics. Social media plays a very important role in shaping people's opinions and attracting their attention and awareness to any brand;
  • Specialized retailers are better known in the country, as customers like to check the product themselves before buying. The online segment is growing at an impressive rate due to the ease of access and greater availability of products.
  • Source:
  • www.blueweaveconsulting.com
  • www.researchandmarkets.com
Surveys

User Research

The increase in the number of organic brands is due to consumers who are increasingly aware of what is included in the production of the products they use and what is the long-term impact on their overall well-being. Therefore, we conducted research to analyze the needs and pain points of consumers.

When shopping for cosmetics on the Internet, look for honest reviews of products in the Internet, and also watch videos on YouTube where someone tries this product.

When shopping online, I can't rub the products with my hands to check the color and feel, I can't talk directly to the seller to ask questions.

I don't often change brands of skin care products when found one that suits my skin type well.

Defining the goals

Create user-friendly online store of organic skin care products

After conducting the initial research of these pain points, our goal is to create e -commerce online store app that mimics a similar experience as shopping in store.

Projects goals

Creating online store that mimics a similar experience as shopping of products in -store while providing solution to solve the pain points in order to drive frafic to the app.

Users goals
  • Be able to quickly find and easily buy necessary quality skincare product online;
  • Easy and simple mobile app to place orders;
  • Provide an intuitive jorney with easy steps from start to finish;
  • Get discounts and free shipping of products.
Business goals
  • To increase sales and revenue by reaching more customers;
  • To use internet as platform spread awareness of good results of using organic skincare products;
  • To satisfy customers by providing premium quality products and recommendation for customer retention;
  • Reach the targeted customers and increase the customer base.
User expectations

What do you expect to get from the mobile app?

It is also important to note the expectations of users from the design and structure of the mobile app. And give some explanation of their opinion.

Attractive appearance of the mobile app
  • App is beautifully decorated, there are large images of high-resolution products and user can check the product;
  • It is easy to understand exactly how to find the right, clear product categories, easy to find info about the necessary products;
  • Noisy and distracting design, non-professional UX - design, too many pop-ups, too much marketing should be avoided.
Easy to use
  • Easy navigation and checking, perfect speed of downloading, good filtering and sorting;
  • Useful products categories, filters, perfect visualisation of search field and easy checkout process.
Trust
  • The user should feel comfortable on the pages;
  • Should to avoid situations with excessive requests for information, simple and clear pricing;
  • Advice and tutorials on how to use the product, clear description of the product, reviews of customers, more images and visuals of the products .
Research

Provisional Personas

User Personas are your Target Audience for whom we are making the Product so in the Research phase. I also created Persons to Create a Better Experience for user.

Djamila Ayad

Age: 26 - 30 years

Profession: Marketer

”When shopping online, I can't rub the products with my hands to check the color and feel, I can't talk directly to the seller to ask questions. “

Djamila is a 26-year-old woman who works as a marketer in Riyadh. This is a beautiful young woman with a kind and hardworking character. She reads many articles on skin care, watches videos on YouTube, where she learns about skin care products. She has started using natural products and considers them very safe and effective. She likes to take care of her face skin every evening.

Skincare product categories are interested for Djamila:

- cleansers & toners;

- eye care products;

- face masks;

- scrubs & exfoliators.

Needs
  • To be a beautiful women;
  • Easily find and buy original a high - quality natural skincare product onlin for a good price.
  • Easily and understandable mobile app to find necessary products and informations about them, to place orders.
Motivations
  • To get discounts and offers or free shipping when purchase is above some specific amount;
  • Honest reviews from other users. She follows skincare specalists and reads their articles;
  • Ability to get her questions answered fast.
Frustrations
  • Absent or slow customer support in online shops;
  • Not being able to find the needed information immediately;
  • Gets confused when someone says organic products are not effective;
  • Panic of not using right product to skin.
Research

Empathy Mapping

Since the development of User Persona, Empathy Mapping has been very helpful in identifying the gaps between users' needs and the current solution they have experienced.

The empathy map helped to get a deeper idea of our users by putting us in their place. See things from their point of view and better understand the problem.

Says

” I started using organic and natural products and find it very safe and effective. ”

” I don't often change brands of skin care products when found one that suits my skin type well. ”

” I want to be beautiful ”

” A lot of beauty products are too expensive. I like discount codes and free shipping ”

” I follow beauty professionals advice and want to see the reviews of products ”

Thinks

” Will this product really suit me? Are my current organic skin care products safe? Maybe this mask is not for me...”

” I have to ask professional cosmetologist whether I should use this product or not. Possible allergic reaction.”

” I feel many beauty brands are overprice.”

” I need to share experience of using my organic skincare product maybe it will be usefull for other. ”

”I need to have the delivery at my office address.”

Does

Deep serach for the correct beauty products , try to find the best skincare products.

Asks friends for recommendations , reads carefully the reviews.

Tests the beauty products in the store and reads carefully the product description.

Shares experience of using organic skincare product.

Feels

She doesn't want to spend more time and money then necessary.

Wants to see different types and to have a choice. Hates to make rush decisions.

Feels relaxed when has opportunity to use delivery service on time.

Feels satisfaction of using good products.

The scheme

Information Architecture

Information architecture was created to organize and label the content to be easily understood by users and ensure it's usability and findability.

Design

Home screen

The Home page is moved immediately when the user sign in successfully. Here the user can get all the important information.

1.Search bar. Allows users to make the specific selections based on their requirement.

2.Main advertising banner.This is the perfect way to visualization Ad promotions.

3.Best Sellers. Scrollable list of the most popular beauty products that correspond to the category.

4.Scrollabel List of Category banners. Allows users to select the specific type of product based on their requirement.

5.Subcategory banners. Element that are used as a link to the product subcategory page.

6.Scrollable List of Products. List of the newest beauty products that correspond to the category.

7.Products item. The component consists of important elements: labels of promotional offers, the icon of adding to the wish list, the product name and the brand name.

Design

Search Pages

The autocomplete features was used to the text input (enhanced by a panel of suggested options). May suggest similar or previous searches to save the user time.

The user can easily search for the cosmetic product by name. This program also allows you to find products by category, offer, saggesins. Also offers you popular products through your order and search results.

Design

Category Pages

For the user's convenience, products are separated into many categories. The most popular sections are at the top, and the less popular ones are at the bottom.

Customers can navigate into the catalog through the types of products and using the search. Depends on how and what they are looking for. And they can easily filter out what they need inside the catalog.

Design

Product Page

Product card displays detailed information about the product. The easy ”add to cart” option gives user to buy their desired product in desired quantity.

1. App bar:top. Tap on the back button to go back to the Category page.

2. Customer reviews. After purchasing this good, the customer has the opportunity to write his own review.

3. App to Wishlist. Allows users to save their products which they like and want to buy in future in folder named Wishlist.

4. Product Picture. Provides several images to view the product details.

5. Available sizes. Apply preference from the available sizes.

6. Product description. Product cart displays detailed information about the product.

7. Related Products. Shows products that are most often bought together. This will allow user to check out the similar products as option.

8. Add to cart. Add items to cart to include in purchase.

Design

Cart & Checkout Pages

The "Add to Cart" button allows users to add any desired product to the cart at any time. User can easily check the cart list, can manage the quantity, get coupon and get informed about order processing. User can also remove an item from the list.

During the checkout process, the customer follows a series of steps to purchase the items in their shopping cart. This includes shipping details, payment options.

More Screens

With thoughts on our customers

An application turning shopping process into simple end-to-end experience of buying the best natural products shopping with the least possible time and effort