zak twohig colour
A digital product with brand new features with the object of getting a new type of user and expanding the business horizon.
See the slide presentation here
PROCESS
The iterative process allowed us to start with quick research about the hair industry and also stakeholder interviews to understand better. I followed that with 1-2-1 research interviews and a competitor’s analysis. After finding the results I proceeded with the information architecture and the main user flow. I came up with some wireframes options based on the user needs, the UI design followed by the testing, and the iterations and implementation of the results.
Empathise
Background
The brand wanted to keep growing and expand its services to reach a new type of user by adding new features to its current responsive website.
They want to offer two ‘hair colour technical courses’, to small groups or 1-2-1, as the scale and proportion that the business could reach in the future is immense if they turn it into an online hair academy.
The challenge
We worked closely with the stakeholder to come up with the right information and architecture that will help users to understand what are the courses about and how to get in touch. Another consideration was to follow the actual brand style and also design the new features on Wix, as the original responsive website is a template-built kind of product, so were some limitations in terms of layouts, grids, or other UI design elements.
define
Interview findings
A small group of 5 persons was interviewed, UK based, aged between 24 and 51, all related to the hair industry (Colour technicians/Assistances)
People’s motivation was career change or to add a skill
The platform most used to do courses online was desktop
People expect the content to be detailed info, demo/video, background/experience of the company.
Most people find about courses through Google
“The company should show a good level of work to inspire”
Competitors analysis
There are not many products in the market offering this service directly. We could also see there are key elements missing in some of the biggest names in the industry as seen in the below board.
IDEATION
Main user flow
Information Architecture
The original site map was updated to a more user-friendly approach. The new feature has been added as the second most important part on the map with 3 pages, 2 for each of the courses offered and 1 for a general introduction, that way the user can clearly see the options available.
Sketching
A lot of what is seen in the below options were limited by what Wix offered as patterns and elements available. However options cover main needs of the user.
Prototyping
UI DESIGN
We chose option two as this one offers a small welcome intro copy for the user to get to focus on this first before watching the video that comes after.
User testing
Usability planning
We tested the actual website with 5 participants, all involved in the hair industry with previous experience doing courses or workshops. We tasked them to make an enquire about one of the courses offered. It was a moderated test remotely via zoom and also in person.
Usability insights
The results were very positive and successful, but there were some iterations that needed to be done too.
70% of the users were frustrated with the enquiry section, initially, this was on the main education page; users had to go back to this page to book the course they wanted.
Another 30% of the people who did the test found that the main gallery had too many images, it was too long without adding much.
All the users who tested commented that the navigation flow and the UI design were easy to follow and that the information displayed about the courses was short but long enough to reach the user’s interest.
iterations
We took into consideration all the insights we found and we implemented these changes all in one time as there were not many and they were simple to action.
The details of the course previously sitting on the main ‘Education page’ were moved to each course page.
Also, the contact form to ask about the courses was moved to ‘each course page’ to make the user flow simpler and quicker.
The pictures gallery on the ‘homepage’, which originally was not part of this project was also amended as this was not a big task and some users also commented that there were too many images.