David v.s. Goliath — Small Ukulele shop E-commerce UX Redesign (1/2)

Jordin van Deyl
Nov 29 · 9 min read

There once was a small ukulele shop. A small, but beautiful, shop that brought together finding the perfect ukulele and learning to play it. However, their webshop was struggling. It was outdated and strong e-commerce competitors had stepped up. This is the story of how a small shop took the time to learn about it’s customers and got creative to provide a fulfilling, online shopping experience.

Image by Jeffrey Jim (Utrecht, Netherlands)

This project has been a collaboration with Margaux and Elyse. Make sure to check them out! We structured our redesign using Design Thinking. New to this? Read up on it here. It will be worth your time!

During this project we spend two weeks honing our UX skills. Using many different techniques, through empathizing to prototyping, we redesigned the webshop of a small Ukulele store. In this article I will talk about the techniques we used and the results we found.

Empathizing — Day 1 and 2

For our project we decided to take a stroll through the streets of Amsterdam to find a nice small shop. Either without an online shop, or a very outdated one. This is when we came across the cute little ukulele shop called Ukeboutique. Having decided we would focus on this store we first wanted to know more about the competitors it faced in the e-commerce landscape.

• Feature Comparison Chart

This chart helps you compare how competitors implement specific features.

To get an idea of the competition (and find out why Ukeboutique was losing ground) we decided to compare our webshop with 3 others. Uked and The Ukulele Site being direct competitors (focusing solely on ukuelele’s) and Keymusic being an indirect competitor (having ukulele’s as part of a bigger range of instruments).

The main set of features we chose to look at focussed on ‘assisting the user in finding a ukulele’. The second were ‘nice to have’-features and the last two concerned webshop navigation. Our most interesting finding was that none of them gave an option for ‘live chat assistance’. We did not think much of it at first, but let us get back to that later…

Feature Comparison Chart to compare the features our webshop offers with competitors.

• Brand Comparison Chart

This chart allows us to compare competitors’ branding by looking at their value proposition, offering, target audience, name, logo, slogan, and brand personality.

It was interesting to see the differences between us and our competitors. Uked, for example, focuses on beginners, while our shop offers something for everyone. Together with the feature comparison chart this analysis gave us the inspiration we needed to set up some questions to learn more about our customers.

Brand Comparison Chart used to determine our position in regards to competitors.

• Lean Survey Canvas (for surveys and interviews)

This canvas helps determine what we want to ask by keeping in mind the purpose of our questions. The canvas is designed to create a great survey in a fast, lean and iterative way.

After our competitive research we had so many things we wanted to ask our customers, but we had to keep in mind ‘why’ we wanted to ask these questions. Or goal is to improve the e-commerce aspect of the ukulele boutique, so we choose questions that related to this topic:

  1. Why would people buy online or in-store?

Using this as a starting point we created a survey (click here to see it) and an interview guide (click here to see it).

Lean Survey Canvas used to determine the content of our surveys and interviews.

Defining — Day 3 and 4

Having collected all this information about our competitors it was time for the next step. What did we find and would it help this small ukulele shop compete with its bigger and tougher competitors?

• Affinity Diagram

This diagram helps us turn the collected data into actionable information. It does this by writing down any quote, insight or relevant piece of information and sorting this information into groups.

We condensed all our research into the overview below (15 survey responses and 4 30-minute interviews). It gave as a useful overview of the current situation. What are benefits of buying online or in-store? How did potential ukulele owners go about their research? What were they missing and what did they enjoy?

The affinity diagram is a summary of all our research findings grouped in categories.

• The most striking survey insights…

  • 73.3% of survey respondents bought in-store and help from in-store employees seemed to play an important role (63.6% of those who bought in-store reported this was an important reason).

• …combined with our interview results.

  • Our respondents all spend a lot of time doing research. Some even spend about a month! (Watching reviews on YouTube, comparing webshops, visiting different stores, and more).

The trouble in buying online came down to a lack of help. Webshops can not provide shoppers with the right kind of information. Out of frustration shoppers go to a physical store to get professional advice from in-store employees. *(This is why it so interesting none of the shops had a ‘live chat assistance’ feature!)

• Mindmapping (brainstorming technique)

This map helps to visually represent ideas supporting non-linear thinking. It takes the form of a diagram that connects information around a central subject.

Another way to get a better grip on the problems and opportunities we discovered during our research was by making a mindmap. I personally considered it to be a useful tool to differentiate between problems we could potentially solve and problems that were out of our control.

A mindmap helps us categorize our ideas in an easy and visual way.

• User Personas

Personas are not real people, they are fictional characters assembled from the behaviors and motivations of the many actual users we researched. They are a great tool in keeping our user, and the goal of our project, in mind.

Time to narrow things down. George and Lucy are personas we will be designing for. They help us by representing the majority of our users, their problems, their desires and their behavior.

  • Main persona: George is a fresh college graduate who considers this to be the perfect time to pick up a new hobby. After talking with friends, watching Youtube videos and reading some reviews he is ready to go online and start shopping for his first ukulele. The problem is that he finds it hard to know where to start.

• User Journey

This maps, in a visual or graphic way, the overall story of an individual’s perspective adn his relationship with an organization, service, product or brand, over time and across channels. It either shows the way users currently interact, how it can demonstrate how they could be interacting.

Visualizing the ‘journey’ our personas make gives a better image of where it goes wrong. They start of interested and get enthusiastic about buying a ukulele after talking to others and doing some research. But when they get to the webshop and they are struggling with finding what they want to know, their mood goes down. They get frustrated and end up going to a physical store. This is where we need to intervene if we want to improve our little shops’ e-commerce experience!

The User Journey visualizes the mood, thoughts and actions of our persona.

• How Might We Statements (HMW)

These statements are a launchpad for ideation (generating ideas). They should reflect the problems our personas are experiencing and must have different ways of answering them.

We found that finding the right information was a problem, so we came up with different answers as to how to solve this problem for George and Lucy. Like we did with the affinity diagram we used ‘dot voting’ to determine the HMW statements that seemed most promising. We ended up with multiple that had the same number of votes, but after discussing we chose only one.

‘HMWS’ help launch us into ideation by giving us problems we can solve in many different ways.

Ideation — Day 5

Now comes the fun part! It is time to get creative and come up with different solutions for our problem:

“How might we help people access the right information to make a purchase choice?”

• Crazy 8s (brainstorming technique)

Instead of sticking with the first idea we get this technique forces us to generate a lot of ideas in a short period of time (8 minutes) before going into the details.

Within 8 minutes we each came up with 8 ideas. 24 total! Using dot voting yet again we voted on each individuals’ best ideas. We then took each persons best idea and used it as input for the next technique.

• Round Robin (brainstorming technique)

Through “additive ideation” a team can work together without wasting time discussing the pros/cons of an idea. It challenges you to make each idea better.

We took turns (3 minutes at a time) looking at each others best ideas to create better, or even entirely new, ideas. In the end we came up with a whole range of creative solutions for our problem.

The results of our brainstorming techniques during ideation.

• Quick recap!

After generating so many ideas it is always good to look back at our main problem. It is also important to ask; when have we solved this problem?

Problem statement: People who want to buy a Ukulele online need the right information on the website, because they get too frustrated and end up not buying online.

→ Hypothesis statement: We believe that providing the right product information and conveying in-store employee experience online to users interested in buying a ukulele will achieve an increase in online sales. We will know we are right when we see an increase of 10% in online sales within 3 months.

• MoSCoW

This method categorizes features in four different groups and helps us decide if we should focus on a specific solution, or not. The groups are: Must have, Should have, Could have and Won’t have.

After prioritizing we ended up with a set of features that not only made it easier for users to find the right information, we also tried to make the ‘digital’ ukulele ‘real’.

  • The most interesting idea we came up with was a quiz that would guide the user through a few questions. Based on the answers 3 models would be recommended, helping the user decide (by lowering ‘choice fatigue’).
MoSCoW helped us sort our ideas and prioritize the most important ones.

So what have we done so far?

  1. We empathized and learned about our client and our customers.

Read about the second part of this project here. I will show how we used the insight of our user research in information architecture and low- and mid-fidelity prototypes to create the redesign.

If you liked this article and have questions or suggestions, please leave a message below. Thank you for reading!

Jordin van Deyl

Written by

I’m a UX designer with a background in work- and organizational psychology and an interest in all things neuro and behavioral www.jordinvandeyl.nl

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade