Case study: Maria

About the company

"Maria - home decor products" is one person company where the main person makes a broad variety of decorative products using decoupage technique. She produces beautiful and functional watering cans, treasure boxes and more. All the products are handmade and functional.

Background

Since the year 2014, she has been selling her products at the markets around Czech Republic and online – but only on Fler.cz (a Czech marketplace for artists). This online market place asks for a commission for every sale and it has very limited options to display her products, so she decided it to create her own website where she can sell the products.

Goals

High-Level Objective

Sell products displayed in the e-shop

Offer custom products (It’s quite costly and it’s not the priority of the e-shop to sell them)

High-Level Design Goal

Design a responsive e-commerce website

Create a branding

Research strategy

As the client has been selling her products online and in person since 2014, my research priority was to gather already existing data. I decided to map her online presence, do an interview with her and explore how her competitor’s websites look like.

Methodologies

Individual Interview with the Owner. Over the last 8 years, the client has sold thousands of products by herself, she communicated with nearly every customer who bought something from her.
She has enormous insight in peoples wants and needs, therefore I did an in-depth interview with the owner of the company. It shed some light on who the customers are, what their behaviors and needs are when shopping for handmade decor products.

Current Online Presence Research: I analyzed all the data on her Fler.cz (Czech marketplace for artists) account – reviews, comments on products, etc.

Competitor Analysis

Competitor Analysis: Findings

There are plenty other small producers but most of them doesn't have a website and are using Fler.cz to sell their products. They seem to make the products as a hobby and they are quite inconsistent with their work.

The main competitor is called “Decoration and Presents” and have old school looking website which is selling home decor products using a decoupage technique.

There is a gap on the market of handmade products = people who make handmade products don’t have strong online presence.

Defining the customers

Jana, 51

Needs:

good quality

easy communication

reliability of seller

fast delivery

Jana lives in a small town in Czech Republic. She has been married for some time. Her children are already adults. She lives in small family house which she decorated herself. She likes Czech-made products.

She works as a teacher in a local school 6am-3pm. She had to start using computer and internet. In her free time, she works on the garden, rides the bicycle. Her family is her priority number one.

Alice, 26

Needs:

good value for $

easy communication

modern look

fast delivery

Alice lives in a city in Czech Republic. At the moment, she is on maternity leave with her first born child. When she isn’t caring for her child, she is taking care of the household. She spends lot of time at home and got really comfortable with online shopping.

She is in charge of buying presents. She is very sensitive to prices and wants cheap, functional, practical things which look good.

Which features shouldn’t be missing on the website?

While researching the competitors and gathering the information from the client, I collected detailed data on features used on the client’s competitors websites. I synthesized them with data collected in online research and interview with the client and prepared a set of features for her e-shop.
One of the most important features was a Facebook Messenger integration to the website as it’s the main communication tool between my client and her customers.

First sketches

The main goal for my client is to sell products which she has already made. Even though she offers custom orders, it’s quite costly to make them. Therefore, it’s not the priority of the e-shop to sell them, and the “custom order” banner is placed on the bottom of the site.

User Task and User Flow

Having two personas defined, I created two different scenarios how the users could get from the homepage to the purchase of the product.

Scenario 1 – based on Jane

Jana went to a family celebration where she saw a watering can she really liked. Her friend told her about Maria - decorative products. Jana wrote down the website address on the piece of paper and when she got home, she went on her website. She notices an option to directly chat with the producer via Messenger so she sends her messege asking about the watering can she likes, and then buys it.

Scenario 2 – based on Alice

Alice is browsing on social media where she sees the Maria - decorative products ads. She clicks on the product and lands on the website. She likes the products and browses through different categories. She notices there is an option to order a custom product. She goes through the steps and finds out the price of custom product is much higher than the products already displayed, therefore she decides to order a already displayed product.

Working up the scenarios more in the detail in User Flow, helped me to make a decision whether to have “about production” and “about the producer” as a separate pages or only as a text boxes on other pages.

Sitemap and product grouping

The client has quite a broad range of products so I decided to run card sorting to define product grouping according to product type and product theme.

The theme sorting brought some light into the labelling of the products.
The cart sorting of the product categories confirmed quite a big variety in how these products could be organized on the website. That could be solved by labelling each product with multiple tags and have more non-linear categories people could pick from.

Wireframes

Homepage

Product overview page

Product page

About the producer

About the production

Order custom product

Branding

The client provided me with 6 logos which she drawn herself. I used them as an inspiration to create a logo and branding.

Logo

Colors

Primary

Secondary

Typography

Desktop

Tablet

Mobile

Usability Testing

As one of the main requirements of the client was to design the website in the way it’s easy to be developed by using one of the already existing themes on Shopify, in user testing, I focused on the validating the branding and uncovering major issues in navigation around the e-shop. The goals were:

Gather overall impression of the e-shop

Identify whether it’s easy to navigate around e-shop (browsing the categories, ordering a custom product, find out about manufacture, etc.)

Test Subjects

high fidelity Figma prototype

Test Methodology

online in Maze

Participants & Recruiting Plan

3-5 participants from Slack DesignLab community

Results & Next steps

The Usability Test showed that the brand perception was aligned with how the client wanted to be perceived, and the navigation around the e-shop was easy and intuitive.

Only thing which was confusing was ordering of the custom product, but as it’s not a priority at the moment, I recommended to the client to use a Facebook Messenger feature instead and, in case the website would perform well, the “custom order” page could be redesigned and developed later.

Refection

Client pleasing won’t help the user to be happy

My entire professional carrier I worked for clients and my primary goal always was to meet the business needs of my client. Every project I do, I try to step by step refocus more on users and their real needs – not the needs the client think they need.

Define what’s the primary goal of your design work

Designing an entire website from scratch can get very overwhelming. There can be so many “small” problems to focus on. I had to make a decision what was possible to do within 80 hours of work which in this case was not to focus on designing everything to its perfection but stick to the priority which was a functional design for an e-shop” which could be easily developed on Shopify.

UI - never-ending battle for perfection

With every project, I am trying to harder and harder not to get stuck on preparing thousands of variants of UI myself but instead do more often iterations with personas and client.

E-shop design