13 min readDec 1, 2019

Is my webshop ugly 😱 ?! PART 1 & 2 UX-UI CASE STUDY

Nowadays most stores from all different genres all propose a website & webshop however not all websites and webshop are created equally.
That’s why you can find some webshops with outdated design or that are just not easy to browse or understand for one reason or another. In this totally incredible and mindblowing (😮!) medium post we will see how to improve one and the various steps it takes to do that.

UKEBOUTIQUE —

We’ll take the example of a Ukulele boutique that myself and two teammates worked on improving during an UX/UI bootcamp.

Ukeboutique is a store in Amsterdam that specializes in selling Ukuleles and proposes lessons.

Their goal is to improve their webshop in order to make the user experience more pleasant.

Alright that sure sounds nice, but how?

DAY 1 — — —

So we knew what Ukeboutique wanted now we need to start our research. The first step was to establish which stores were the direct competitors and the indirect ones.

Here are the nominees for the “Direct & indirect competitors”category ;

*OK that’s nice, maybe it’d be nice to see the actual webshop ?*

*ahem* They sure do look different, we can also note that the ukeboutique website isn’t really well up to date with today’s standards in graphic design. Not only that, when you’re actually browsing through a website/webshop there are some keypoints that can help someone through their journey. How are we supposed to know what other boutique have that ukeboutique don’t?

You’re in luck! It so happens that we made a feature comparison chart to compare all that up!

As you can see we can identify some common points between all of the different stores and also realize that each brand does cater to a certain type of audience. How does those store even decide on the audience that’s going to use their webshop? We could summarize that question with a simple answer ;

RESEARCHES!!

That’s right! So in order to research all about who’s going to use the webshop, their habits, favorite brand, etc etc we’re going to do researches specifically two things : Quantitative and qualitative researches.

Quantitative research will be in the form of an online survey and qualitative research will be in the form of interviews. But that’s something for another day 😴😴

DAY 2— — —

Rise and shine 🐓😪

So on Day 1 we talked about doing an online survey & interview, let’s do it then!

Before launching the online survey we did had to ask ourselves what questions we’ll need to asks in order to get data that we’ll be useful.
We did what’s called a “lean survey canvas” to help us. By using this we were able to know what we need to learn, what we already knew, how to reach the people we were interested in etc. I guess that’s a common thing but we did struggle to come up with it as it was the beginning of the project and we were trying to grasp and understand what the problem was. What we were also trying to learn was if they purchased online or instore and why they did one or the other. “Why, why, why, why?” could summon up this project as you have to ask yourself those questions because remember ; you’re not your user

We reached out to people in our friend circle who played an instrument, the r/music on reddit and received 15 answers which was enough as we didn’t want to have too much answers as being overwhelmed with data isn’t good either, you need a good balance like in everything else.

We also decided to each interview one person in order to gather up even more data.

DAY 3— — —

Alrighty put on your study glasses because we have some work to do 🤓!

At this point, we have gathered user research. Now, we need to synthesize it in order to turn data into actionable information. How?

Go through the survey and interview data and write any quote, insight, or relevant information in a post it.
Write each finding on a different sticky note.
Use different color sticky notes to differentiate between quantitative & qualitative data.
Keep it short! keywords, quotes, and quick notes.
Post all the sticky notes on a large wall, a whiteboard, or a table — in a random manner.
Sort the ideas into related groups.

Pffrt!Easy!

The other team is working hard too, all of the sticky notes 😯

We sorted out everything and made different categories : Demographics, research (online, offline, youtube/social, webshop), pain points, wants, pro-store arguments and pro-online arguments.

We basically did what’s called an Affinity diagram, we then took it digitally by using Miro. I never used that app before turns out it’s pretty useful and easy to use to digitalize your ideas.

Next step : How might we statement

*wait what?*

Yeah, How might we statement.
To explain it a bit, as you read through transcript notes or listen to an SME, look for insights about user frustrations or needs. Here’s an example ;

I am seven-years-old and I hate doing homework because it takes me forever to finish.”

Create a HMW statement to answer that insight.

How might we create a way for this student to do his or her homework more efficiently?

The colored dotes were used to vote on which “how might we” was the most accurate

Well all of this data sure is pretty but there must be another way to take the data a step further.

Indeed there is! We had to make a persona !

Personas are not real people, they are fictional characters assembled from the behaviors and motivations of the many actual users we encounter in our research.

It is needed at least one primary and one secondary User Persona.
It is with great honor that I present to you two dear friends of mine ;
George & Lucy

The actual process of creating a persona took the majority of our afternoon because it wasn’t easy obviously to go from data from various different people and put them all down to one single person and also keep in mind that we would only put relevant stuff as it’s easy when creating a character to add trivia things that really don’t matter.

Well, that’s all for today folks 🕺

DAY 4— — —

Good day to you!
Today is the day we make two things : A mind map and a user journey.
Shall we begin ? First of all what’s a mind map

Mind Mapping is a method to visually represent ideas supporting non-linear thinking. It takes the form of a diagram that connects information around a central subject.

Again we started out with sticky notes

One thing led to another and we started to think and write down more ideas and decided to move on to Miro again to digitalize it. Being in a team really helped speed up the process as we would find inspirations from the other person’s ideas.

Then we were on set to do the customer journey map

A Customer Journey map is a visual or graphic interpretation of the overall story from an individual’s perspective of their relationship with an organization, service, product or brand, over time and across channels. It can serve two different strategic roles

Current Journey: demonstrates the way users currently interact with the product, service, or ecosystem.
Future Journey: demonstrates the way users could interact with your solution.

Should include:

Scenario (situation that the journey map address)
Touch Points
Action
Emotion
Thought
Pain Point
Design Opportunity

**Is this for ants?!** Click here for the full version

As you can see the journey to make a purchase is a rollercoaster!

DAY 5 — — —

The weekend is here I could almost touch it 😩 But we’re not quite done yet so back to work!

Now we need to make the problem statement. What’s that again ?

It’s a clear and concise description of the issue(s) that need to be addressed by a problem-solving team.

Here is an example of how to write your problem statement:

[User . . . (descriptive)] needs [need . . . (verb)] because [insight. . . (compelling)]

A hypothesis statementis a prediction that can be tested or an educated guess. Designers create these predictions about what they believe will happen in their experiments in order to gather answers to their questions.

Here is an example of how to write your hypothesis statement:

We believe [doing this]for [these people]will achieve [this outcome]. We will know we are [right/wrong]when [qualitative /quantitative feedback].

— — — —

Here is our version of it ;

Problem

It can be difficult to find the right information online to decide which Ukulele to buy.

Result of problem

A lot of people do research online, but because it can be so hard to find the information they need they end up going to a physical store to buy the Ukulele instead.

Situation

More and more people are starting to shop online, but the Ukulele shops are having trouble providing a good way for people to browse different models. There is a lot of missing and conflicting information. This makes users frustrated and give them no choice but to go to a physical store.

Opportunity

There is an opportunity to help people find what they are looking for on the webshop by helping them sort the different models (for example based on their budget/experience level, etc.) and providing accurate information through the product pages and convey in-store employee experience.

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 (doing this) for (these people) will achieve (this outcome). We will know we are (right/wrong) with (qualitative/quantitative feedback)

We believe that providing the right product information and conveying in-store employee experience online) for (users interested in buying a ukulele) will achieve (an increase in online sales). We will know we are (right) with (an increase of 10% in online sales within 6 months).

Hey now have you ever heard of Moscow?

yeah I do, I went there last month with my family*

No I don’t mean this Moscow, I meant the other one.

MoSCoW (Must — Should- Could — Would)

Must have’s: These are the mandatory features. If you remove one of them, the whole goal of the product is missing.
Should have’s: These features are not key to fulfill your users’ needs. For example, in some cases registration info is not mandatory, but it could seriously improve your user experience.
Could have: Your product doesn’t necessarily need these features. You are not even sure if they are a plus for your user. These features may represent some ideas to enrich the user experience.
Won’t have: These are features completely out of scope. They don’t add value to your solution. Include those that you thought once they could be useful but you changed your mind out of research.

We decided to write down each 8 ideas

Then voted on the ones that were the most interesting

Then for each ideas that were voted on, try to add more features to that same idea (right side of the picture)

Next was putting all of the ideas on the wall and try to organize them per category.

And we were left with this result!

The webshop could have a poll and asks users what they want to see next on the website in terms of products

We put the sales on the “won’t have” as in we don’t want people to make the assumption we’re giving away ukulele because they don’t sell well etc.

DAY 6— — —

So what’s the next step ? Do we get to the UI part soon ? Yeah yeah we will but before we start to design isn’t it better to make a plan on what we’re actually going to design ?

We started to think of what’s called a sitemap. Every websites has one as it’s in simple words the skeleton of the entire website with every categories and every sub-categories. Sites without these are often unfocused, hard to navigate, and offer poor user experiences. A sitemap can help clarify the site’s goals before you start designing or creating content. By deciding exactly what you want from your site and then mapping it out, you can ensure that every part of your website is reinforcing your goals.

Now that’s done we can finally come to my favorite part ; the UI !

DAY 7— — —

Doing the UI in sketch is nice but it’s always better to sketch (ha, get it?) on paper first. I like this part because it’s easier to get things out of your head and put them on paper rather than directly doing it on the computer

We wanted to go with a one-page system to show off basic info such as header,activities, contact, product selection and for the rest to be redirected to a new webpage. The reason why is that it’s better to have everything on one page and more comfortable for the user rather than always being redirected to another page everytime.

We had to take in account what’s called the user flow to create alow-fi prototype that made sense.

one-page test with a seperate screen to see what it looked like when scrolling

We then had to ask someone from outside the group to test out the prototype with a goal in mind. The goal was to buy a ukulele by using the quizz feature and see how they do up until they checkout the product.

Thank you Agathe Dumas for playing along 😎

We did have to work again on the low-fi and improve some of the layout because some points were not clear enough to the user. That’s why it’s always important to keep testing the prototype before setting anything in stone, while it may look alright and logic to you it may not be to your actual user.

After going back and forth changing elements that didn’t work out we took that to sketch and made a mid-fi prototype that you can actually check out below!

🤠

Now the difference is that we had to implement a design system to determine the colors and typefont

And before that we had to do a moodboard to get a general feeling of the website, I wanted something simple colorful and cheerful

By implementing the design system and the colors I had to rework some of the wireframe because when having colors and contrast some things work better than others

I also had to constantly check the contrast using Stark to see if someone with a eye disability could still use the buttons. It was an interesting challenge to be able to implement the actual design into the wireframes