A website is a window through which your business says hello to the world (or how to design an e-business website for a local hair salon)
The second week at Ironhack begins before the first week has ended. Having pitched our ideas for our first project and stopped to refuel at lunch, we are given our second project brief on Friday afternoon and divided into new teams. This time I’m working with mag sire and Maude Carluer and we will be designing a website for a local business through which clients can complete transactions.
We can choose which business we want to work with and walk around Boulevard de Voltaire, next to Ironhack Paris’s campus, for inspiration. As we walk we start throwing out some ideas: with service design thinking fresh in our mind from our first project, we think a service based business would be more interesting. A gym maybe, or a sports class business. We google a local address and head there only to find it’s closed.
Just next door we come across a local hair salon, Corinne Dahan, specialised in colouring services. Our newly formed team unanimously agree that the service/product mix that we find in hair salons would be an interesting concept to work on. We go into the salon, introduce ourselves to the owner who is open to us working on this mock design and willing to answer questions next week to help us with our project. It’s a really positive start.
Conducting our research — and learning some key lessons along the way
As we did in the first week, we prepare an online survey and share it on social media over the weekend to understand hair salon users. We get over 40 responses and sit together on Monday to analyse our findings. At this stage, we realise that our data has not given us a great amount of insight: 93% of respondents are women, who go to hair salons 2–3 times per year and are loyal to their hairdresser. Price, reputation and opening hours are important factors in choosing a hairdresser. The information is interesting but does not reveal any insights or pain points and in hindsight, I realise that if you haven’t got the answers you want, it’s most likely because you haven’t asked the right questions.
All projects, whether it be in the academic or professional world, have constraints and if this lack of user insight was one, we would need to adapt and find a way around it.
Interviewing the salon owner
With that in mind, on Tuesday morning, we meet with the salon owner to get some more specific information about her clients and her own business needs. This step was crucial in completing the (lack of) data from our survey piece. We learn that she has a regular client base who usually discover the salon through word-of-mouth or by looking at the photos of her work that she posts on social media. Some customers use the existing website to book appointments: it’s a messaging service which requires them to send a message request, the salon receives the request, checks the calendar and responds a few hours later. She would like to use the website to optimise this as well as sell products to her customers and gather customer information so that they can call clients who have not been to the salon for a while, for example.
Completing the discovery stage — analysing the existing information architecture
We leave the salon with some key insights into both the user and business needs. As UX designers, this might just help us to find a solution that sits in that “sweet spot” between the two. We already start asking ourselves questions that reflect our problem statement: “How might we improve the online reservation process for customers whilst developing sales of hair products?” Our idea will be centred around guiding the user through the online reservation process (with online payment) and integrating an option to add products on, with an automatic discount to encourage sales in this area.
We start looking at competitors’ websites: how do they present their products? What kind of brand image do they convey? Are they also experts in the field of hair colouring? Is the price competitive? What do their websites provide that this salon’s does not? We analysed the competitive features of each website in a table, as well as looking at our salon’s overall market positioning in terms of branding & expertise level.
As part of the discovery & define stages, we also analyse the salon’s existing website. We create a sitemap that allows us to visualise how the existing information architecture is structured:
Just like building a house, the structure of the information on a website is critical. Without strong foundations, the website won’t work. Before we start to redesign the website, we look at what features are missing that we would like to add. We analyse an indirect competitor’s website (an online platform used to reserve and pay for hair appointments) to understand what steps the user would need to reserve online.
To do this, we complete a “task analysis”: defining a key task (in this case, online hair appointment reservation) and breaking it down into smaller sub tasks. This enables us to understand what our website design will need to support:
Moving into the problem-solving stage with a card sorting exercise
We write down the pages & tab names that we envisage for our website on post it notes, based on the existing sitemap & our task analysis. We then ask for some kind volunteers (thanks Eloïse Marcé, Ella Forté, Anne-Charlotte Robert, Elsa Savenay, Priscille Dlt, Eunate Mayor, and Maud Laville) to take part in a card-sorting exercise. This tool is one of my favourite discoveries in the bootcamp so far, as it allows you to observe and analyse human behaviour when interacting with technology. Each of our volunteers were briefed about the context of our website and asked to sort the post-it notes into groups. From this, we were able to identify the order that users expected to find information and the thinking process that they would go through when visiting a website to book a hair appointment. We took notes throughout and left some different coloured post-its for our volunteers to add labels if they felt like elements were missing.
We understood that users visiting a hair salon website for advice on colouring expect to see information in a specific way. They want to have a clear description of the service, price and information on techniques on one page. They also want to be able to navigate the different options available to them easily, bearing in mind that the available options vary depending on the person’s hair type and colour. We would need to keep this in mind when developing our solution.
Designing our new information architecture, and analysing the user flow
Using these valuable insights, we started to build a new sitemap that reflected what our users expected to see.
We also created a user flow: an analysis of the path that a user goes through to achieve a certain task. During our user flow, we focused on the online reservation process as well as the option to add products at the end, ensuring our solution remained centred between the user and business goals.
Ideation & sketching solutions — getting our creative juices flowing
As we had done the week before, our team completed an ideation session to get the creative juices flowing. We used a couple of new tools called “Worst Idea” and “Round Robin”. We started by writing down some terrible ideas for our hair salon website, such as selling DIY colour kits online (bearing in mind our salon is specialised in colouring). We then tried to turn that bad idea into a good one. Instead of selling online colouring kits, we came up with the idea of creating an “SOS Hair Colour Service”: a premium service that guaranteed an appointment within 24 hours at an additional price for any customers suffering from a “tried it at home” hair colouring disaster. We folded an A4 piece of paper into 3 sections, and sketched how we imagined this solution to look in the first section. We passed the paper to the right and the next person enhanced the idea in the second box, and the third person in the third box. This was a really interesting technique to find innovative solutions as a team.
Putting our ideas down on paper — low fi wireframe
With our creativity flowing, and our user flow and sitemap in hand, we start sketching what we want our final solution to look like. We work as a team on Invision App to sketch our low-fi wireframe — a basic skeletal version of our website, without icons or graphics that allows us to simply visualise our design:
User testing — truth time
On Thursday morning, equipped with our interactive low fi wireframe prototype, we head to the salon to interview a few users. It was the perfect place to conduct research as the salon’s customers are often waiting for 3 or 4 hours for their colour treatment to complete and are willing to chat.
We sit with our first user and explain the testing scenario: we have designed a website simulation and would like her to test certain features. She has to imagine that she is coming to the salon for the first time and wants to book a tie & dye colour treatment online, as well as buy a colour protective hair product. She instinctively clicked on the calendar on the homepage and provided feedback along the way on text that she found too small, or improvement areas. We noted down all of her comments, and it led to a full user interview that validated the feedback and pain points we had received from the owner a couple of days before.
We perform the same exercise with two more users, as well as the salon owner. She tells us that they are going to redo the website later in the year and she wants to put our ideas into place, which is a huge compliment for us to receive at the end of two weeks’ bootcamp!
We return to school to analyse the findings of our interviews. We jot down the comments on post-its and divide them into positive feedback, negative feedback and new improvements.
Based on this user feedback, we reiterate a new solution design in the form of a mid-fi wireframe in Sketch. We are aiming for a cleaner version of our low-fi wireframes, with icons, logos and image/text placeholders. We change the order of certain information on the homepage and increase the size of the online calendar on the homepage, as this was the first point of entry to the reservation system for all of our testers. We also increased the text size of the product information on the final reservation page:
Friday brings the weekly ritual of presenting our work to our bootcamp classmates. We spend time on our slide visuals, applying learning takeaways from last week to choose a slide theme that is coherent with our project and business type. The presentation on the day goes well — and fast — and we are given some more key feedback from the teaching staff for next week to help us keep improving our public speaking skills.
Another week down, thanks to my team for another week of intense learning!
Tools used: Sketch, Invision, Whimsical (user flow)
