Case Study of an eCommerce website

Nhàn GOURINEL
6 min readMar 7, 2021

Over the past year due to the extreme situation, COVID-19 pushed worldwide, there aremany local shops are suffering a decrease in the demand for their services and products. Besides, people’s shopping methods have also changed to adapt to the pandemic situation.

Online presence is a good way to hijack the issue. More and more professionals are on the verge of their digital transition. In mid-February, we worked with a local store in Reims to them improve their online presence to be more competitive in the actual market.

In the next 6 minutes, you will accompany me through all the phases. Let’s go!

DISCOVER

Our client was a young, plant-loving woman that she proudly calls herself Dr. Plant. She always wanted to bring small products visibly every day to help people connect with nature more easily.

“I aim to establish a relation between plants and humain” — Dr. Plant

Before the pandemic, she held workshops to guide people about plants as well as spread the love of plants to the community. It was also a chance for people to know about her products but this had to be postponed indefinitely and now she wants to choose a new direction for her product.

My teammates Stefania, Ayşegül, Cédric, and I spent 2 weeks going through the Design Thinking Process from problem approach to finding website solutions of Dr. Plant named Be Vegetal My Friend (BVMF).

We know that the BVMF website has been built and used for 7 years and now she wants some changes but we do not yet know her specifics difficulties and advantages, what segment of the market she is targeting, who her competitors may be. We will use most of the research time for benchmarking and market research as well as interviewing the stakeholder of the project.

DEFINE

The Goals

“ I want to offer vegetal design to everyone, not only to companies ” — Dr. Plant

  • Business Objective:
    Sell vegetal design objects directly to individuals, B2B
  • Scope:
    Create an e-shop where customers can customize and buy BVMF creations like a home decor

Heuristic evaluation

Heuristics are experience-based techniques for problem-solving, learning, and discovery. Heuristics allow us to think through the possible outcomes quickly and arrive at a solution.

Based on these techniques we have begun to see the advantages and disadvantages of our customer.

Competitive Analysis

The direct competitor could be shop owners on Etsy while other competitors mostly are indirect and some of them could be a cooperator, for example, Truffaut; Leroy Merlin.

BVMF has advantages that her opponents couldn’t have:

  • specific products with shapes and materials
  • could be customized
  • worth the money and durable

DEVELOP

Site map

The most difficult problem for BVMF is that her website has no condensed information and no sales feature. If there were two of those things, surely her job would be much more favorable. So we conducted Information Architecture and created a sitemap with the necessary items and best suited to her new direction.

Before

BVMF sitemap before redesigning Information Architecture

After

BVMF sitemap  redesigning Information Architecture

User flow

Wireframing

After confirming the sitemap with the shop owner we started the wireframing process first on a mobile version with:

  • Welcome page: introduce the shop and its activities
  • Shop page: 3 products each page where user can customize their own way
  • Checkout page: confirm last time about their products, prices and change quantity if they want

Usability Test

Testing doesn’t just help us discover our design problems:

  • Welcome page: doesn’t look like an e-shop, too much text
  • Navigation: missing back button
  • Shop page: hard to understand how many products they have, and numbers in a square (10, 12, 14)
  • Quantity button in both shop and checkout is too small to tap

It also tells us how they can be fixed based on observation and analysis of user behavior. This step helps us to avoid time-consuming and fix faster in the early stages of designing

Brand attributes & Moodboard

After the wireframing and iterate on it, we continued with brainstorming for brand attributes. Then based on 3 chosen words as brand attributes, we searched for images to create a mood board. We wanted to create a picture in the client’s head early on and let them see exactly what we’re planning so that we could get feedback and iterate early if needed.

Brand attributes & Moodboard
User Interface applied brand colors

DELIVER

So after 2 weeks of our efforts, the 4 of us together find out the problems that BVMF and her customers are facing and find solutions through the Design Thinking process. Now BVMF has a well-organized site map with a buying feature that helps both the customer and provider meet their needs.

Prototype

From now, whenever the user clicks on the website link, they will first see the shop page with available products. Choose the “customize” button they will have a variety of colors, shapes, and sizes to choose from for their product. When they are happy with their choices and want to pay, they could go to the checkout page and check all the product information before paying. You could discover the buying process in this video.

Thus, everyone can continue to do business or shop while waiting for the normal pace of life to return when Covid is over.

Key learning

Through this project, I realized the importance of e-commerce today, especially when a pandemic appeared, this role was much more necessary.

On the customer side, they are less concerned about going out and still have satisfactory products at e-commerce stores.

On the merchant side, they need e-commerce platforms to maintain their business as well as technical support to be able to have a more suitable and competitive model.

If I have more time I will:

  • present the design to the stakeholder
  • make some new usability tests with hi-fi design + desktop version
  • Iterate again

Thank you for keep reading until the end! If you are interested in what you just read, don’t hesitate to follow and share with me the next journey: Wellness application. See you in some days!

--

--