Introduction

For this project I was tasked with re-designing an existing ecommerce website for my stakeholder, Melanie Kaltenbach, who manages a violin and musical instrument business.

The client wanted to reduce the time customers needed to complete the rental process of instrument's on her website, so that she could have more time crafting her own high end pieces.

Currently Melanie is spending on average 45 minutes per customer to complete the rental process in person.

She also wanted to streamline and improve the purchasing of accessories.

Design Thinking - Empathise

Competitor Analysis

- A major strength was that Mélanie was one of only two luthiers that had rentals.

- None of the other competitors have any testimonials or quotes from customers.

- Her target audience was very broad. From 15 - 60 years old.

Heuristic Analysis

Looking at the current website some of the main issues were;

Misleading / Unconventional iconography
Hyperlinks taking users away from the site
Location map too broad
Confusing overall design and layout

Conducting the analysis helped me to find the most important and critical aspects of her website that needed urgent attention.

Current site - Information / Atelier

Current site - Accessories

Qualitative & Quantitative Research

In collaboration with my colleagues we conducted interviews and surveys to gather data on the users.

Sample Size: 109 survey responses and 8 people interviewed.

Key findings:

Students main source of learning about violin-makers

Teacher (70%)
Friends(20%)
Website(10%)

FINDING - The website of a violin maker was the least used source of information to inform students.

Choosing violin maker

Reputation(60%)
Word of mouth(40%)

FINDING - The majority of musicians choose their violin maker based on their reputation, which is passed on through referral and word of mouth.

Design Thinking - Define

Affinity Map

Some of the insights we gathered were:

Customers wanted to see testimonials and reviews on the website.

Testing the instrument in person on location was vital. Such a high end product wouldn't be purchased online without firstly playing the instrument.

Each instrument is unique in sound, design, quality and feeling.

Challenge

To increase the time the client has to build her instruments we need to reduce the time she spends filling in administrative details, scanning documents and taking payments face to face with renters.

Primary Persona

We discovered two distinct personas that we needed to consider when designing the new website.

The primary persona, Alexandre, is a violin student. He relies heavily on guidance from teachers when making decisions about purchasing instruments.

It is important that Melanie builds and maintains a good working relationship with Alexandre. As his career develops he will want to purchase instruments from a trusted and known luthier.

Secondary Persona

Our secondary persona is the professional violist who uses the website to gather information about the luthier, their working methodology, the materials they use, any achievements etc.

Professional musicians rely on reputation and word of mouth to choose a luthier to work with, so their main pain point is sourcing reliable information.

The professional also uses the website to directly purchase 'Accessories' such as stools, bags, strings etc.

They rarely use the website for purchasing or renting instruments.

Design Thinking - Ideate

Moodboard

A mood board can really help when it comes to thinking about the overall feel of the new site.

Its a way for my team and I to collect our ideas, colours, images, patterns etc.

Its also useful for testing on colleagues to try to judge if we were going in the right direction.

Feedback was;

Classical
Elegant
Warm
Cosy
Intimate

Low - Mid Fi Wireframes & Testing

Tested on a sample size of 6 cello and violin players.

- People had usability issues navigating the insurance and contract signing section.

- They were un-easy about giving away personal information, including their identification, to what was essentially a random site.

Information Architecture

Following Heuristic Analysis we discovered that one of the main issues with the current website was its over complex architecture.

We wanted to streamline the site, focusing on User Centric Design to achieve this.

What are the main goals of the user?
What information is important to them?
Why are they visiting the site in the first place?
How can we reduce the number of clicks and time to solve this?

Design Thinking - Prototype

Rentals flow

- Renters are informed about the 3 steps in the process prior to continuing.

- Once an instrument is selected you are automatically presented with the price, size guide and instrument sizes to choose from.

- Renters are informed whether the size they require is out of stock or is available.

This new rental flow helps to reduce the time needed by Melanie to respond to emails or telephone calls from potenial renters. It helps too automate this process.

Rental landing page

Docusign for contract signing

Calendar alignment for collecting the instrument

Design Thinking - Prototype

Purchasing 'Accessories' flow

Users can customise their filters, for example Price, Material, Maker etc

I created Components that could be re-used and automatically altered by using instances.

The basket is updated automatically using Variables and Conditionals in Figma.

This streamlined and user centric re-design has reduced the time to complete the checkout from 5 minutes to 2 minutes.

Product listing

Shopping basket

Delivery details

Payment options

Confirmation

Design Thinking - Test

We usability tested the prototype on the same group of users from the initial interviews.

GLOWS:

A reduced time for renters from landing on the website to booking an appointment with the the stakeholder from an average of 10 minutes down to 4 minutes.
DocuSign addition to rentals gave a more professional and reputable feeling.
Much easier to navigate. Increased usability.
Happy stakeholder, she said "Its exactly what she dreamed of but could never implement."

GROWS:

Users were still confused by the sizing guide lines and choosing the correct model.
They felt that they still wanted to talk with the maker directly. It might be useful to integrate a LLM / AI chatbot here to help them make a more informed decision.
Users felt like the website needed a secondary colour. It uses too much neutral and white tones.
Confirmation modals when an item is removed from the basket.
Some users didn't know they needed to pick up the violin rental from the shop.

Design System

Style Tile

Thinking about areas to improve, Design Systems is something Id like to get more experience with. I understand their importance for many reasons, from handing over a project to a developer or to keep the product organised for easier updates and variants.

Beginning with a Style Tile helps to start that process. Breaking down components, colour swatches, typography etc.