Case study

Minimalistic E-commerce store

Chocolate e-commerce project mockup

Project Overview

Role

Product Designer

Duration

October 2022 – November 2022

client

Tomas Marek

CMS

WordPress
WooCommerce

Client, Challenge & Solution

Who is the client

Tomas Marek is the owner of a farm located in the Vysocina region in the Czech Republic. The farm has a long family history and has oriented towards organic farming from the beginning, so Tomas has a naturalistic mindset. Tomas owned a self-designed e-shop created on another platform, where he sold a variety of products; high-quality bio chocolate, nuts, and spices. Tomas is always taking steps to reduce his own and his customers’ impact on the environment and has a highly sustainable business. His suppliers are first-point fair-trade farmers, he recycles his wholesale materials, and packs in plastic-free paper bags.

Challenge

The self-designed solution of his e-shop looked good, but it no longer met Tomas’s requirements, especially technically, but also his design was looking stale. We engaged in 2021 to redesign his site and created an e-shop that was easy to administer, fully automated and that more accurately conveyed his naturalistic philosophy to his customers. In 2022, he engaged with me again to design a new e-shop to target the German market. The requirement was to create something minimalistic based on the current design, and unify the e-shops so they are consistent and coherent.

Solution

I created a website that is simple, minimalistic, and in line with eco and bio philosophies in many ways. The e-shop is easy to navigate and has no unnecessary information, and very good technical functions for both customers and Tomas. Changes in design that were made in the German version were transferred into the Czech e-shop to maintain consistency.

Considering the users

Who are the users

I conducted secondary research to understand the user, focused on sustainable shopping and bio products. According to this study, for example, consumers shopping for sustainable brands do so out of a desire to help the environment, mostly by reducing production, shipping and packaging waste. The reasons for preferring sustainable products, apart from environmental concerns (29%), are value (25%), brand authenticity (22%), and personal values (19%). An interesting finding is that pricing is not as important to consumers as retailers believe.

So, what are our two primary user stories?

1. As a person caring about nature, I want to shop for environmentally friendly products, and so I feel good about supporting sustainable businesses and fair trade.

2. As a health nut, I want to buy high-quality bio products, so that I can achieve my nutrition goals by eating a healthy diet free from preservatives, additives, or toxins.

Starting the design

Navigation

I drafted a simple header, including a primary header with a logo and anchors to the sections on the home page. The secondary header above it includes quick email access, shopping features like free shipping and additional discounts break-points, and a cart icon with the number of items currently placed in it.

Basic navigation draft for Chocolate Farm

Basic navigation draft for Chocolate Farm e-commerce store

Low-fidelity wireframe

I also drafted a visualization of the home page as a lo-fi wireframe. Considering the e-shop was going to have a small number of products at its maximum, we agreed to create just one page with a full product listing. At the bottom of the page was placed additional information about sustainability, packaging, and the quality of the products. Other pages for product page, cart and checkout would be WooCommerce default pages with some changes to improve the customer experience. 

Low fidelity wireframe for Chocolate Farm mockup

Low-fidelity wireframe for Chocolate Farm e-commerce store

Visual design

Typography and colors

Typography was taken from the visual style of the redesigned Czech e-shop. I needed to ensure that both the fonts for the header and body text included special characters used not only in Czech (ěščřžýáíé) but also in German (äöüß). For Roboto and Raleway I did not expect any problems and it turned out to be a great choice. Colors were simplified; from an 8-color palette, we decided to use just 5 colors, including neutral colors and the color for texts, that matched well with the product pictures.

Roboto Bold for Headings

äöüß
1234567890

Raleway for body text

äöüß
1234567890

#6b352b

#e3dbd8

#f4f1ef

#5f818f

#393939

Mood and imagery

The overall impression of the website should be “simplicity and minimalism”. For product pictures, only good quality, well-represented images would be used. Tomas was able to supply these and were of well suited to the design. 

Final design

Creating the designs

Based on the wireframe and the visual style, I created a home page for the e-shop. The pages for the product, cart, and checkout were based on default WooCommerce but adapted to the design. Tables with information about the product and nutritional data were coded into the description on the product page. For better user experience, especially when shopping via mobile phones, we added easy access to the items in the cart or to proceed directly to the checkout. This is achieved through an icon at the bottom of the screen, which opens with an overview of the cart after adding an item or clicking on it.

Final design Chocolate Farm mockup of pages

Mockup of the final design of Chocolate Farm e-commerce store

Product page with side cart visualization on a phone Chocolate Farm store

Mockup of the product page with visualization of the side card on Chocolate Farm store

Responsive views visualization Chocolate Farm mockup

Responsivity visualization for Chocolate Farm (mobile, table, laptop, desktop)

Technical health

Core Web Vitals

For both desktop and mobile views, Core Web Vitals show excellent results, which support both good user experience and search engine results.

Core web vitals on desktop for Chocolate farm website

Results from Page Speed for desktop on Chocolate Farm store

Core web vitals on mobile devices for Chocolate farm website

Results from Page Speed for mobile devices

What does the client say

“Petra and I have worked already on a second website on CMS WordPress. We managed to build a website that meets all of our design and functional requirements. She managed to implement all the gadgets that we come up with and constantly move the website forward. Communication with Petra is excellent and, thanks to her experience, she often suggests solutions that we would not have thought of. Our second website took about a month from initial consultation to website handover, and we look forward to the next project.”

Tomáš Marek, owner

What did I learn

Ultra-minimalistic design

The minimalistic design required by Tomas was in contrast with those of some other clients, who often look for busy designs. I found this project very interesting because of the minimalism. I am very happy with how it turned out; super-clean design that fits perfectly with the idea of sustainability and bio products.

Unifying design for multiple websites

Based on the design of this new website I unified the look of both websites. Working on the redesign at the same time reduced the time taken as knowledge was quickly carried across, but it was still a great experience in synchronicity.

Next steps

What I recommend to do in the future

Track traffic

Track traffic on Google Analytics to get data about visitors and metrics like bounce rate and conversions to detect a possible issue. 

Usability study

In case Analytics implies there is a problem for the users, perform a usability study to find out what prevents users from finishing their conversions.