2 — Case Study: Established an online presence for local e-commerce.
It’s already week 4 and we’ve just show our presentation of the 2nd project: Design the website of a local e-commerce!
For this project I was paired with Julie Drouillard & Aurélie and we have to design a desktop website for a company and helping them to establish an online presence.
“Local shops and practitioners are suffering a decrease in the demand of their services and products due to the extreme situation COVID-19 pushed worldwide. This can affect local economies and many families. Alongside this, we can see true intent and a growing trend to support local businesses in many communities.
Online presence is a good way to hijack the issue. More and more professionals are on the verge of their digital transition.
Let’s help local shops and professionals improve their online presence to be more competitive in the actual market.”
Our client:
We decided to work for “L’antre de monde”: a real shop based in Compiègne (yep, it isn’t purveyor of dreams ahah) created in 2019 by Benjamin & Loic, two games lovers.
They sales a lot of games (board games, role play games, card games…) but also things related to the geek and pop culture universe (Harry Potter or Lord of the rings’s stuff, Ghibli goodies, pop figurines…) on their shop. However, their existing website is only focused on games’ stuff.
Unfortunately, they don’t have enough time and ressources to take care of it.
With the pandemic, they could see that online presence is clearly unmissable and they’re aware they must invest more on the website.
1 — EMPATHIZE
Qualitative Interviews
After conducting our stakeholder interview with Benjamin to get more into the details about the shop, we conduct 5 users interviews to know them better. We also “tested” them a little bit and asked them to do 3 tasks on the current website to have insight of potential pain points, needs etc. They had to:
• Find an expert game.
• Find the burger quizz game
• Add it to the basket and proceed to checkout
As usual after that, we gathered all of our informations in the unmissable affinity diagram and from this previous one, we can create our user persona.
User persona
Let’s meet Alexandre, “the passionate and friendly geek”:
Alexandre FERRET — 26 ans — Game developer — lives in Compiègne.
“Alexandre works in Game Design and is passionate about board games and Mangas. He regularly plays with his friends, to have a good time and laugh. He is sensitive to the universes of board games, it gives him a sense of escape.
He is aware of the new games to come and trusts his friends or professionals’ opinions.
He would like to be part of a “geek” community to get advice or exchange opinions.”
His main frustrations while purchasing games are:
- the lack of informations (not always clear and complete)
- the huge offer which isn’t well categorized and confuses him
- the absence of customers’s reviews
User Journey Map
To face and understand more the potentials problems of Alexandre, we created an user journey: this tool help us to follow the steps he makes to achieve a goal and his feelings while achieving it.
As u can see, there is a variation of his mood. In order to make his journey more comfortable, we have to make the second step of Design thinking:
2— DEFINE
As its name suggests, we have to define the problem we want to solve before spending time and resources on generating possible solutions.
Problem Statement
“Alexandre, the passionate & friendly geek, needs a way to easily gather product information because he likes to read rating and reviews from the gamer’s community and also be immersed into a game’s universe.
How might we solve this problem? This is the next step.
HMW
We iterate in order to turn the problem into possibilities:
- How might we digitalize the experience they have when they go directly in the shop (atmosphere, seller advice, small talks with other customers, etc)?
- How might we develop the sense of belonging to a community through the website?
- How might we offer them the best experience to find infos on the products?
To help us create the main features of our website, we use some specific tools:
• LEAN UX CANVAS
Thanks to Jeff Gothelf, this template “helps teams frame their work as a business problem to solve (rather than a solution to implement). By dissecting that business problem into its core assumptions, they can develop hypotheses to design experiments around and test.”
• MOSCOW METHOD
It’s used to prioritise requirements.
Why this title? MoSCoW:
M — Must = what the business needs.
S — Should = have it if possible, but project success does not rely on it.
C — Could = have it if it does not affect anything else on the project.
W — Won’t = would like to have it later, but not now.
Last but not least…
• MVP (Minimum Viable Product)
Generally associated with the MOSCOW methods, it help us to create a version of a product with just enough features to be usable by customers.
“MVP is a strategy to avoid building products that customers don’t need or want by maximizing our learning of what is valuable to the customer.”
Now that we have our ideas clearer thanks to those tools, we must improve our website and for that we have created a Site Map:
Site Map
“A site map is the relationship between pages in a site and to documente the organization/ navigation/ labeling”
We’ve made the current one before to help us create the “one to be” ⬇️
A site map is where the pages live on a platform but not necessarily the order users will see them in instead of the Userflow.
User flow
“An userflow is a path a user can take to complete a task.”
The flow is variable because an user can visit the same page 2 or 3 times instead of a sitemap where you list only one times the elements.
An userflow present pages as many times as they appeared!
It’s important because it allows us to understand two things:
•How a user accomplish the tasks
•How he will interact with the product.
We do it usually before Lo-fi wireframes prototype to save time, but we need to respect some criteria:
* Know your user or persona you’ve created for
* Know what task you want to be done
* know where you users are coming from
* Where does the flow start?
To avoid having a huge userflow because of all the possibilities of ways an user can make, we focus on an Happy path. Pretty name isn’t it?
It’s simply one path, when everything is perfect 😉 (there is no need to return on another page for example).
User Story
To complete those two previous tools, we create an User story : a brief statement that identifies the user & describes his/her core needs.
It’s about intention and not solution.
As a <type of user> I want to <some goal> so that <some reason>.
It must be short and descriptive and define a user type.
From our user type (Alexandre), we make an “epic story”: first, we make a broad user story. After that, a specific story (more into details) and from that, we generate some acceptance criteria (things that user needs to be able to do in order to reach the goal in the user stoy).
The story is told from user’s perspective:
The user story is generally the last step before…
3 — IDEATE & PROTOTYPE
Normally, we were supposed to make Lo-Fi prototypes and make them tested by 3 or 5 people maximum, but due to the pandemic, it can be difficult so we decide to sketches and jump directly to mid-fi after that.
We’ve already debrief during all this process with aurélie and Julie, so each of us ideate a versions of the site web and we chose together what we will keep or remove.
Once all our screens have been completed in a mid-fi prototype, we could be tempted by proposing it and thought that it’s perfect and we don’t wanna change something on it. — Wrong mistake!!
“If you don’t talk to your customers, how will you know how to talk to your customers?” Will Evans
We have to make it tested by at least 5 users: it will allow us to collect data on it, and it’s really interesting to see through different eyes! On each test we’ve conducted, there were some details or remarques that we didn’t expect.
And it’s normal!!
We are focused on our design, but it’s really important to gather feedback from users to polish the website or the app.
— We could see that the placement of our searching bar for example wasn’t relevant for users.
It’s really important to observe users and let them talk, while we’re keeping notes because every details has an importance.
5 users were requested at this time: Julie and I were testing 2 users each while Aurélie requested a member of the class — (yes, it’s harder in this pandemic time to have available people around us)
To avoid forgetting anything, we gathered all of our results on a board, which allowed us to see some similar pain points and to take a step back on our work.
You could find something amazing on the design, but remember this again:
You are not your user.
You have to listen to them, especially if they’re several to share the same opinion. 😉 We decided to focus on the main problems found by users and we adjust our mid-fi prototype according to them.
🤩Now that our mid-fi is updated, we can jump to the Hi-Fi prototype!
That means that we’re beginning the UI part! Finally!!
I was so impatient to do this!🤩
To get more inspired and thematic, we’ve created a Competitive Analysis. — Ahah yes, another tool again! — It’s pretty easy, don’t worry: it’s a kind of moodboard for each competitor of “L’Antre de Monde” (LA FNAC / CULTURA / PHILIBERT) for our future UI elements. It helps us understand their colors, fonts, styles…
Moodboard
After that we have to create a Mood Board for our brand, but differently: usually a mood board includes colors schemes, UI elements (typo, iconography…), photography or texture or matérials, quotes and brand attribute. But for this one, we avoid using brand attribute and color schemes because we need reaction and feedback from the users.
To keep consistency on our design, we have to extract colors for our mood board and create a palette that could fit to your website.
— It seems very easy when you find a beautiful moodboard with the colors fitting on it but in real life, it takes you TIME. —
You’re always adjusting the shade of colors, and sometimes, your palette doesn’t look great on a website. After testing different combinations of colors, we agreed to use a “camaieu” of blue as a background and we keep some different colors. We define different styles:
• colors: primary (the main one), secondary, neutral and functional and test all of it on our main page.
• Typo: We chose a “comic” style which can fit with all the board games name and universes.
Style Guide
We regrouped these elements in a Style Tiles with iconography and components as well.
Before showing you the Hi-fi prototype, let me show you the previous website of “L’Antre de Monde” to help you understand the evolution.
Now let the magic happens!
Our Hi-Fi version was made with passion, but we have some obligations about it:
• grids and constraints (to align everything down to the last detail)
• components (to keep consistency all along the way)
• animations (to make it even more realistic)! — I must admit we really challenge ourselves for those, but I can say we were really proud of us and our work at the end!!
And more importantly: IT HAS TO BE RESPONSIVE.
Responsive design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation.
I will let you see our presentation video about our website underneath
CONCLUSION
Considering the fact that we have only 2 weeks on this project, we have to focus on the main features: the most important ones!
Working with such a deadline is perfect to help you not to be lost and confuse yourself: you have to decide and move on, iterate and test to respect the deadline!
It’s a great exercice to see of what you’re capable of, especially on a team.
I really enjoyed this project, and I discover super partner to work with!
I hope you liked my post as much as I liked working on this project!
Feel free to share your thoughts about it and stay tuned for the next one!