Responsive Web presence for e-commerce: The Skull club
IRONHACK PROJECT
Timeline: 2 weeks     Team size: 3 peeps     Role: Ux designer
The Brief
Introduction: Even today, few local businesses have an online presence. And when they do, it is frequently limited to a simple landing page, which is insufficient. However, for a local shop, an online presence is just as important as the physical location. An e-commerce website is often the best way to promote the shop, as search engines do support local businesses. It is also a great way to increase sales and revenue by offering services such as delivery or click-and-collect. Let’s help local shops and professionals create or improve their online presence to increase their visibility both online and offline.
Challenge: Design a responsive website for a local business or professional. In this project, you will focus your efforts on organizing the information in a clear way for both the customers and the stakeholders. You will use most of the research time for benchmarking and market research. In some cases, the local shop or practitioner might already have a website or be in the process of developing one. Your job will then be to analyze what already exists and improve the solution. In othe cases access to the clients or to the stakeholders is not granted.
The Client
The Skull club Barbershop.
Let’s start with some context, our chosen business is — The Skull Club” — ”A cutting edge contemporary & modern barbers with eye or detail and precision”.- a barber shop situated in Hertford, United Kingdom.
The town has a young population and they tend to be pretty stylish. This makes it an ideal location for a new business such as this. The shop does very well, it has over 200 5 stars reviews on google and is usually fully booked a week in advance.
But that is not translated to the website of the skull club. It has a very homemade feel because, well, it is homemade.
Competition Analysis
We conducted some brand analysis, identifying where the skull club stands in relation to other local barbers. Here we can see our comparison of features, brand and market position.
to sum up :
The barber’s market is quite standard in terms of visual branding
All the competitors propose standard services on their website (booking, contact info…)
Their branding positioning is quite different
although barber shops share quite similar branding, The skull club posed the best of the local businesses.
Stakeholder interview
We met up with Jez, owner and creator of “The Skull Club”.It was so interesting to have this opportunity to get to know him better. He took us through his background of Hairdresser in Camden town, his wish to have is own business, how he started, one of his friends pushed him to participate to a competition where he won an award, and this guaranteed his legitimacy to establish himself in Hertford 3 and half years ago in his own barbershop : THE SKULL CLUB.
As business, what are your values ?
They are making sure customers have quality, comfort, professionalism, consistency, tasty (?) haircuts
Can you tell us why Skull Club ? (name & logo)
It wasn’t intended to have a link between skull and hair. He likes the design : it’s sharp, edgy, luxurious (black, gold) Phillipe Plein He got inspiration from a German interior design (that became later a fashion designer) : way of designing, style and he did a little bit of skulls
What are you trying to convery/say with your branding ?
Luxury, consistent branding (between shop and digital), and a shop that can be globally adapter (you can put it everywhere, from central London to Paris to elsewhere)
What are your business goals over the next 5–10 years ?
Open another shop — Maximise the business while still growing 
Hopefully in 5y running smoth 
Not a location in mind for next shop but north London (quite trendy) 
Short term goals : thinking on next barber; stays for the next quarter , staying stable like it is , nothing specicic to change. A y ago they started their own products, so continue selling well.
What are the main challenges you are facing now ? What do you have in mind in order to treat them ?
Thinking about next barber, difficult to find a decent barber. Difficult to find someone that is good, and someone who cares as much about his job as the owner.
Users interview
The global social trend of vintage revival combined with men taking care of them-self as a totally mainstream thing now and technology present in our daily lives, transformed completely this business and the customers expectations. We interviewed 4 users, 100 % men, and they fit our target audience between 15–35.
One of them told us this all business has shifted since he was a kid, when he had to wait for hours his turn.
“Going to a barbershop is more for a “playful” time than to be practical : he likes the “ritual” of the “vintage” mood, vintage tools…”
“Feeling when on the hairdresser: a little bit of anguish and mixed with pleasure of feeling good and trusting the person that is doing the job”
“I associates barbershop with being neat and tidy. It’s always good to have a chat with your barber. The service satisfaction depends on how good i feel about myself after.”
Affinity diagram
We transcribed, translated, and transformed our interviews into an affinity diagram. Sorting into themes and sub themes then dot voting on what we deemed to be key areas.
After dot voting, we highlighted 3 key insights : Regularity of visits on the same barber, the satisfaction of buying some Products and the overall Experience of the “me time” of going to a barbershop.
Persona
We used everything covered so far to build out persona — Loyal Leo. A loyal customer to his previous barber, he has just moved local to the skull club and is looking for a new barber service to use before a big event. He always wants to look the best and takes pride in his appearance and how others perceive him. His unwillingness to change means he is very nervous about finding a new barber.
User journey map
Here we see the journey, to skim over the details, we see Leo struggling to find a barber, then he sees the skull club comes highly recommended, then he realises he has to download an app to book — kind of annoying. But he makes it to his appointment, has a great chat and a fantastic haircut. But again he’s slightly let down by having to wait in a queue to pay. His mood picks up again, realising he can buy the products that were used to style his hair.. Until he checks the website and realises that, along with no delivery, the website is not great to use.
Problem definition
After doing the user persona and user journey map, we were able to clearly formulate our problem :
— Men in Essex that goes regularly to the barbershop need to have a better experience because the web presence of the barbershop doesn’t reflect it’s standards. —
— How might we assure the quality standards across all services and products ? How might we improve the booking experience ?How might we expand The Skull Club brand ? —
Ideation
we took the problem statement and ideated.
Not having time for Crazy 8’s meant we had to condense our process down into “Fudged Up 4s”, this still pushed us to create new ideas for problems
We took the ideas to one side and used the MOSCOW method to separate them. This process probably took longer than it should have, but we had a LOT of ideas.
MVP
The MUST and SHOULDs formed our MVP.
— A barber shop website that matches the image of the physical store, and that includes and efficient booking system. It should also differentiate the 3 main sections of Barber, E-Shop and Charity. Whilst also having a pre-payment and easy check out option —​​​​​​​​​​​​​​
Information architecture
We started from the existing Website map and base on all our research conclusions we started to rearrange new sections , add some and pages to it.
Happy path
We moved then to our happy path, we first brainstormed on a scenario that would showcase the best our new features. it ended up with 4 tasks:
— book an appointment
— but some hair products
— donate to the charity
— make an online payment
Low fidelity wireframe
After deciding on our scenario, we sketched the pages on MS paint, quickly with just the basics. We stitched them together with animation and moved on to test it.
Our low fidelity wireframe was tested with 4 users who gave us some really interesting feedbacks. We managed to cluster them into different categories to make sure of what we will have to tackle for the next step of our project.
Mid fidelity wireframe
After analysing the feedbacks, we thought of some solutions and we developed our mid-fi.
So, we then uploaded our mid-fi prototype to the tool Useberry to do usability testing. Here are some examples of the Heat maps, statistics and some results. We had in total 10 users that tested our prototype: 8 completed the 4 tasks and 2 dropped off. The results were very very useful so that we understand which pages had to be improved concerning usability in order for us to have the best intuitive interface
Brand definition
There is not a lot of variety in barber branding in the near competiton. But due to the strong theming in The Skull Club and its own identity, we chose to stick with this.
Mood-board and brand attributes
We wanted to stay really ELEGANT but Approachable, have a strong feeling of Minimalism, some accents British Style, and not forget the Craftsmanship that our stakeholder is really proud of.
We kept the colour palette really simple and clean, an off black, a dark grey, white and accents of brass gold.
We then, took our first step into the word of UI …Starting by exploring the infinite universe of Fonts and typographies. We made some serious tries to be sure to make the right choice. We ones again used dote voting to get a clear answer.
We then defined out style guide:
and here are some exemples of the components we made:
High fidelity wireframe
Here are the responsive pages. One for Tablet and one for Mobile. They take us through the shopping scroll, which is one of the more complex pages in our site

— a big thanks for my 2 teammates Luiza and Curtis for this porject —
Thanks.
(see you Jez.)

You may also like

Back to Top