ecommerce-case-study

Design process

Project roadmap

1. Research

To base my design decisions on user needs I performed online survey on a group of 20 people. It gave me 3 key insights:

The visual aspect is the most important in this case
Use big pictures and show products on the models to show scale
Customer would like to see where the physical shops are located

2. Developing structure

I started to empathize with users, to understand how they might interact with the site and what might be their pain points. As a result I decided to:

Avoid jargon and keep text short and simple
Add animations to the site to make content more engaging
Showcase opinions of other clients, certificates, shop locations and ordering policy to build trust with the user

3. Style guide and testing

To ensure scalability and ease of iterations for the product I created style guide and components.

It helped me to seamlessly implement changes after testing my first draft with two people, who had trouble with identifying the hierarchy of elements.

4. Final design

I implemented changes identified during the testing and finished the prototype of the product for mobile and desktop version.

Final product

Desktop and mobile website

I added interactive elements to the site to encourage exploration and interaction with the jewelry offerings.

I ensured that users can easily filter and find new products.

I developed the checkout process for website.

desktop view of the filtering list for the items in the shop

(01)

Easy and fast filtering

My research showcased that one of the main reasons why users leave the site is because they can’t easily find what they want. I added the main characteristics they ask for in retail shops to simplify finding the right item.

By adding numbers next to each category users know how many items will show before clicking it.

(02)

Building trust with the users at the critical moments

Hidden costs of delivery or lack of the information about expected delivery time can result in users leaving the site. The order summary shows all of the revelant information as well as available payment options.

desktop view of items in the basket in the shop

desktop view of the homepage in the shop

(03)

Engaging way of exploring website

One of the main problems the site had before, was high bounce rate and short time on site. Thanks to the animations users can interact with site in engaging way.
‍
The goal was to extend their time on the website, encouraging exploration and interaction with the jewelry offerings.

(04)

Find more items

To make sure that customers can find what they are looking for, under each item is displayed carousel with similar items.

desktop view of the carousel with similar items in the shop

desktop view of the checkout process in the shop

(05)

See the next step

Checkout process on some sites might be complicated and time consuming. To give users the feeling of control I wanted to show how long the process is and what the next steps are.

Thanks to it, customers know at which stage they are and what information they have already provided. Based on many studies it reduces the bounce rate at the end of the conversion path.

mobile screen of items in the jewelry shop

mobile screen of items in the basket in the jewelry shop

mobile screen of categories in the jewelry shop

mobile screen of product details in the jewelry shop

Final results

As this was just a conceptual project I can’t track the change of the key metrics if this was implemented.

However I tested this prototype with 10 people and all of them showed the incentive to explore the products of the brand and eventually buy them. Based on this insight I can say that this project was successful.

Reflections

The main challenge during this project was to maintain usability, while providing engaging and unique design. I was able to do so by creating a design system and aligning elements on the grid.

I learned to keep in mind developers that will have to code my design, so I created styles for all the elements. I also enhanced my skills in creating the hierarchy between the sections.

Contact me to hear more about the details of this project and how each stage affected the final design.

Mobile app for ordering at restaurant

Reducing the time people spend waiting to order products

View project

Concept project

Redesign of B2B site for Zegarek.net

Simplifying the process of creating B2B orders

View project

mobile and desktop preview of b2b website I created

Concept project

Michał Giel

Portfolio

About me