Case Study: how to help a local business to improve its online presence?
…By redesigning its e-commerce website!
INTRODUCTION
As part of my Ironhack bootcamp, we have been working as a group with Helene and Aurélie for our 2nd case study. The purpose was to design a desktop website for a local business. Our goal: guide a company with an existing website and improve the user experience journey in order to increase online sales.
We have decided to help a games’ shop called L’antre de Mondes.
BACKGROUNG
L’antre de mondes is a physical game shop located in Compiègne, France. It was created in 2019 by 2 games’ lovers. They already have a website but don’t really have time and resources to take care of it. They know online presence is key, especially during this pandemic, so they are willing to invest more time to keep updated their website. Especially since they have strong competition, in their catchment area, but also online, with specialized pure players. When we contacted them, they were thinking about redesigning their website because the current version was unsatisfying. This is what we call a perfect timing!
Now it’s time to get down to business.
EMPATHIZE
We have conducted 5 qualitative interviews to get to know our users better and used the Empathy Map to have a clear understanding of their state of mind, pain points and needs.
At this point, we started to get an idea of their expectations for our website, let’s see from the User Persona who is our user.
Let’s meet Alexandre, our passionate and friendly geek:
His main frustrations today while buying board games apply to:
- information (lack of clarity sometimes, he needs key information regarding the product);
- offer (there are too many choices, and he would love to be able to filter the selection to find the best fit for his tastes);
- reviews (he likes to get people’s opinion but how can he trust it?).
Now we have a better understanding of Alexandre’s needs and frustrations, let’s jump into his Digital User Journey to see the challenges he faces:
Alexandre’s Journey Map gives a visual description of the steps he takes to achieve certain goals and how he felt about it along the way.
DEFINE
It’s time to “define” thanks to all the important findings we gathered from the previous stage and craft a meaningful and actionable problem statement:
Alexandre, the passionate & friendly geek, needs a way to be reassured as he would be in a real shop because he really cares about others’ opinions (consumer and seller advice), he wants to get a clear information for each product and also be immersed into a game’s universe.
How can we solve this problem? By keeping in mind the 3 following ‘How Might We’ statements, to help us to make the most suitable improvements to the L’antre de Mondes website.
- How Might We digitalize his “in store experience” (atmosphere, advice, small talks with other customers, etc.)?
- How Might We develop a sense of community on the website?
- How might we offer him the best experience to find information on the products?
One of the biggest challenges when working on a project like this is to learn not to spread yourself. Indeed, all the information collected so far can lead to a multitude of ideas. The problem is that we have neither the time nor the resources to do so. It is therefore essential to learn to prioritize. Here are 3 tools that have been useful to help us to focus on the ‘must have’ features so we can respect our deadlines:
- Lean UX Canvas : according to Jeff Gothelf, “it’s a facilitation tool for cross-functional teams designed to create a customer-centric conversation about the work the team is doing. The goal is to help the team focus on “why” they’re doing the current work”
- Moscow method: this method provides a simple way of clarifying the priorities involved on a project, it’s an (almost) acronym which means: Must have, Should have, Could have and Would like but won’t get.
- MVP (Minimum Viable Product) : the MVP purpose is to learn, validate and invalidate initial hypotheses formulated before launching a product. The MVP is generally associated with the two methods described above. To simplify in our case, the MVP of our web interface is situated between the prototyping and the realization of the finished product.
These different methods allowed us to define the things we needed to implement in our website (to the detriment of those that were not necessary). Let’s see now how we can structure and organize our content thank to a Site Map.
The Site Map provides a clear view of the Information Architecture. It’s time to write a User Story for Alexandre! A User Story is short, specific and goal oriented. It is a one-sentence statement that tends to have the following structure: “As a…, I want… so that… ”.
It’s a way of thinking about the functionality of a page/site from the user point of view, ask yourself “what do user wants to do?” and from there you can design the functionality required to achieve the task that your user needs to perform. Here, we can have something super simple such as “As a game lover, I want to buy a boarding game so that I can have fun with my friends”.
In addition to this, you also have the User Epics, which are extensions of user stories. User stories are individual features that can be implemented, and user epics are a series of user stories that need to occur in order to reach a certain outcome.
In our specific case, a User Epic will be: “Alexandre wants to be able to buy a new board games he could play with 4 persons and wants it quickly delivered to his place because he’s planning a game’s evening with his friends in 2 days”. You can normally see how a series of features will need to be implemented to achieve this (highlight the new games, add feature to refine the selection, give a small preview for each product, add reviews to reassure the user, etc.).
In concrete terms, you can see below the “happy path” User Flow Alexandre has to take to complete this task:
This is the task we will focus on in the “Prototype part”, when we’ll start to design. Talking about Design, even if L’antre de Mondes has a current website, we wanted to challenge ourselves on the branding part. Indeed, we had the feeling their current brand identity didn’t match the users’ expectations. The website is super sober, without a strong identity. But we are talking about games here, so we need to create an overall atmosphere that will take the user to a game universe.
You will find below the moodboard we made, which inspired us to create a new style tiles.
Also some screenshots from the current website, so you can see the starting point of this project and also have something to compare to our proposal.
PROTOTYPES
Here we are, and I must confessed this was my favorite part of the project. We first made low-fi prototypes to agree on the overall structure of our pages, then we moved on to Mid-Fi Prototypes. In order to check if the website navigation was optimal and easy to understand, we conducted tests with users, who were asked to complete the same task as Alexandre: buy a new board game, search for information about the chosen game and buy it.
This step was super interesting and very useful, we gathered a lot of insights and made major improvements on the overall experience. Indeed, when you focus too much on your project, you miss things that are yet so important, don’t neglect this test phase, because you’re not the user!
We highlighted in yellow the changes we made: delete a page that made no sense for the users, review how we display the key information on each products, allow the user to create an account during the shopping process, also add a recap of the user basket and the possibility to use a promo code.
It’s time to bring the new L’antre de Mondes website to life! We were so excited at this very specific moment because adjusting our user flow meant creating Hi-Fi Prototypes with our new style tiles! But it was not over yet! Because again, at this level, it was testing time. We conducted Desirabilty Tests to understand what do our users thought about the website and what were their first feelings about the concept we have created? Even at this latest stage, it’s still possible to improve your design (keep this in mind), so we took into account what the user told us and proudly arrived to this very last version of our Hi-Fi prototype. This one was made with passion, using grids and constraints (to align everything down to the last detail), components (to keep consistency all along the way) but also animations (to make it even more realistic)!
You can discover below the screenshots of our Hi-Fi mock-ups and also a video, to see how Alexandre completes his happy path, from the home page to the order stage.
CONCLUSION
This has been a long way until here right? I hope you enjoyed reading this article as much as I liked to realize this project. I’m very proud of all the work we have put into this with my team, and also very proud of the result. I really believe we came with a strong proposal, knowing that we are all 3 novices in UX UI design. Each case study made during the bootcamp is a little step to my future career, and each step is an opportunity to learn a little bit more about UX and UI, to perfect my methods, and to improve my skills on Figma. I can’t wait to share with you what comes from the next case study, stay tuned! ✌🏻
