Ironhack Project 2 : Local E-Commerce
A second week begins at Ironhack Paris in our UX/UI Design bootcamp, and for this 2 weeks project I was paired up with Joëlline and Kevin :)
So, what was our task this time ?
Introduction
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. Online presence is a good way to hijack the issue. More and more professionals are on the verge of their digital transition.
Our challenge
We had for goal to create a website for a business to improve its online presence to be more competitive in the actual market, and with my team we chose to work with Jérôme Stange, a hairdresser in Nice.
Research
Our stakeholder is Jérôme Stange. He has worked as a hairdresser for more than 30 years, and today he would like to offer his premium hairdressing services at home, in Nice.
To get to know more about him and his expectations, we had a one hour zoom interview with him. Jérôme Stange wants to change users’ vision about hairdressing at home casual services and make it premium. His quotes :
“Home hairdressing offers only basic services”
“I want to challenge myself and develop a premium service”
“The pandemic is scaring people, they feel safer at home”
Jérôme Stange does not have an online presence, consequently our challenge with the team was to create a website for our stakeholder.
Quantitative research & Affinity Diagram
To understand people about their needs, motivations and see the pain points, we conducted qualitative research with 5 users interviews for deep answers about the subject. We asked our users :
- How often do they go to the hairdresser ?
- Have they ever experienced hairdressing at home ?
- If yes or no, what are the reasons ?
The insights we collected in this research helped us to create an affinity diagram. This method helps us to put findings in groups and see trends and relationships between datas.
Here are the main quotes describing our user’s thoughts about the topic :
“I need more information about the hairdressing service at home”
“I have to prepare and clean myself before and after”
“I think it is a service that could be developed”
“I care more about the quality of the service than its price”
“I would be interested if I have a good relationship with the hairdresser”
The answers we collected helped us understand more about our users habits. We managed to gather a lot of pains and expectations regarding the hairdressing service at home experience.
Competitive Analysis
A business analysis is the examination of business needs and goals in order to identify project requirements. Through business and competitive analysis, we can understand what actions an organization should take in order to fulfill their objectives.
Therefore we began an analysis of the business itself and made :
- a feature analysis
- a brand analysis
- a market position chart
These tools let us differentiate Jérôme Stange business against his competitors.
For this observation, we chose to compare Jérôme Stange with competitors that offer the same service at home, Chosen, Noella Roussignol and Simone. But also we added more mainstream brands in the market, Franck Provost and Dessange.
This market position chart shows that Jérôme Stange’s service stands more in the premium side than its competitors. Also in terms of price, Jérôme Stange stands above Noella Roussignol, Dessange and Provost, but below Chosen.
Personas
Based on the insights we found previously, we created a primary and a secondary persona helping us to be in the user’s shoes.
Emma is our primary persona, she is an active woman seeking for a premium hairdressing service at home. She likes to take care about herself, she seek for a good relationship with her hairdresser and also a personalized service. However she does not know much about the hairdressing service at home and thinks this service is less qualified.
Laurent our secondary persona has an active social life and cares about his image. He would like his hairdresser to understand his needs but he lacks information about the hairdressing service at home and the sanitary protocols.
Therefore in general, our users lack information about this hairdressing service at home, they use to go to the salon when in need of a fresh haircut, a hair color or another service. It would make them more confident in using this service at home if they could find more information online, they want to know how they have to prepare, what the hairdresser brings at home and also what are the covid precautionary measures.
User journey map
To help us further empathize with our users and to make their journey better, we created a user journey map. We are following Emma in her journey when she discovers the hairdressing service at home and calls to make an appointement.
“A customer journey map is a visualization of the process that a person goes through in order to accomplish a goal. It’s used for understanding and addressing customer needs and pain points.” — Nielsen Norman Group
So here is the story :
Emma likes to take care about herself and would like a new hair colour. She has a chat at work with one of her best friends who heard about a hairdresser that does service at home. Emma is curious about this service and decides to look at the hairdresser website. The service process is not clear on the website so Emma decides to call the hairdresser and after a pleasant conversation, she decides to make an appointment and try this service at home for the first time.
As for opportunities, Emma needs more information online about the hairdressing service at home. Also the search engine presence could be improved.
We now understand Emma’s pain points, and based on her frustrations and opportunities we uncovered during the research phase, we can now focus on one problem statement :
Hairdresser at home was designed to achieve to offer a trendy and premium service. We have observed that the service is suffering client negative stereotype which is causing reticence to use our service.
And one hypothesis statement :
We believe creating client educational content for our targeted audience people will achieve improving our service image and presence. We will know we are right with our client generating a yealry income of 60,000€.
“How might we” statement
To frame our ideation, and for launching brainstorms, we thought about three HMW statement. These sum up the actual issues for our target user group :
- How might we increase the notoriety of home hairdressing ?
- How might we give a more trendy image to home hairdressing ?
- How might we explain the process better to address customers apprehension ?
Lean UX Canvas
A lean UX Canvas is a great tool that helped us think about solutions ideas we could implement on Jérôme Stange’s website. And by filling it, we used these solutions and incorporated it in another tool : the MOSCOW method chart.
MOSCOW & Site map
The MOSCOW method is designed to prioritize what are essential for the website we want to create.
The must have :
- Online booking
- Bio / about me page
- Service and prices page
- Area of service
- Hygiene protocols
Won’t have :
- a blog
- a newsletter
In order to establish this MOSCOW method chart, we had to create a MVP statement.
What is this “Minimum viable product” statement ?
A minimum viable product (MVP) is the absolute bare minimum in a delightful experience that your target persona accepts to accomplish a goal. The “bare minimum” means the smallest possible version of a product that can be used to run a meaningful experiment to test key hypotheses and determine whether to continue investment.
So now that we know all the things we need to put in our website and the things that are not very necessary, we thought about the content and the information architecture of the website and we made a site map in Miro.
This is how we see the content structure and we organized it in an effective way.
We can have a clear view of the information architecture thanks to this site map, so the next task was to write an epic story to our primary persona Emma. This is basically one task that our user have to do in the website in order to achieve a goal, and here we ask Emma to look at Jérôme Stange website, seek information about him and book and appointement.
See below the user flow about Emma’s happy path, this is every steps she has to take to complete the task :
Emma browses Jérôme Stange’s website, looks for information about him in the “Our story” section, she then picks services at home in the “Service menu” page, creates a profile and makes an appointement.
Low fidelity prototype
Joëlline, Kevin and I began with these raw sketches by hand, this is how we visualized the website. This is just the beginning, because many iterations came after.
Mid fidelity prototype
Same picture as above, but in mid fidelity ! What do you think ? Feel free to compare :)
But again, it is just the beginning. Is the website optimal ? Is it simple to understand and to browse from one page to another ? Can we complete easily one task based on our MVP statement ?
User testing & Iterations
To answer these questions, we had five user tests. We asked our interviewees the same task as our persona’s happy path :
- browse Jérôme Stange website
- look information about him
- make a reservation online
Overall the task completion went smoothly, not major difficulties were met during the task however four changes have to be made for a better experience.
First, we highlighted at the bottom about registering or login to finalize an order. Users were confused about this task when coming to this page.
A map has been added at the right to indicate Jérôme Stange service range in Nice and the surroundings.
Lastly, a sentence notifies users about receiving a confirmation email with all the reservation details. Also there is information about the payment, on site by cash or credit card.
Visual competitive analysis
We have finished with the mid fi prototype, and now is time for the UI part !
To identify the current identities that are being used within the market from our competitors, we had to take a look at their website. This led us create four visual competitive analysis.
This is a collage of their visual identities, we look at the fonts and colors used, pictures, logos and everything that could help us create ours. We want to look different and and set our product apart from the competition.
Mood board & Brand attributes
We build a mood board to convey our design idea. This is a digital combination of pictures, colors, textures, logos, fonts and all the design elements to set the atmosphere of our website. A mood board is a visual tool that communicates our concepts and visual ideas.
Color palette
After many iterations with the team, we finally decided on what colors worked the best considering with our stakeholder’s image.
These are the colors we will use in Jérôme stange’s website, we first thought about a navy blue as the brand color but then changed to Coral as we think it looked better and it suits our hairdresser website.
Style tiles
What comes after the color palette is the establishment of the style tiles of the website. A style tile is a design deliverable consisting of fonts, colors and interface elements that communicates the evolution of a visual brand for the web. Now you can have a glance at our beautiful logo, thanks Kevin ! 😄
Desirability tests
What do our users think about the website ? What are their first thoughts about the whole concept ?
Visual elements produce an emotional response from users. Understanding these emotional reactions help designers to influence users appropriately.
Remember our five attributes when setting our mood board :
- Premium
- Classical chic
- Custome services
- Hair artisan
- Feminity
By doing a desirability tests with five users we could measure people’s attitudes toward a user interface by a controlled vocabulary test.
How does it work ? We let our users look at the landing page of the website for 5 seconds, and then answer this survey. They had to pick 5 adjectives amongst a list of product reaction words that best describe the design.
And here is the result :
High fidelity prototype
Now is time to show you our final product !
Please click on the video below if you want to see our user completing the happy path, from landing on the website’s first page to make an appointment.
Conclusion
Thank you for reading until here ! :)
This was an intensive two weeks project, and this was necessary to complete all these tasks, otherwise we could not have come to this beautiful result.
I would like to thank my team, Joëlline and Kevin, I have learned so much from them.
You think it is tough to work with people you don’t know, you struggle a little bit, but at the end you have been taught so much and you feel so grateful for this opportunity.
