Although technically this was a fairly simple project from the HTML & CSS stand point, the main challenge consisted in creating an exciting image and user experience website for a fairly standard local business.
After the initial research, I have realised that very few beauty businesses in Maidenhead were portrait correctly online. Their websites were outdated, amateur looking and confusing in their navigation.
As this business was starting from the ground up, I have hypothesised that creating a very high end professional look could be a great key differentiator for the business.
As per the Nielson Norman Group best practices, different quantitative and qualitative test methods have to be applied throughout the different stages of the projects. This was no exception.
To understand the look, feel and how the information architecture should be organized, three different tests were applied in different parts of the project.
Here I have conducted a few user interviews to understand what would be needed to be included onto the website and to figure out the simplest way to navigate it.
After interviewing 5 users, a few conclusions came up:- for clarity, it would have to be a one-page websites
- no more than 4 tabs in the navbar
- a very brief, but clear, explanation of the different packages
This was a simple cross-platform tree testing with a few tasks for the user to complete in order to understand if their requirements were met and to access if the navigation was as simple and intuitive as expected.
After the launch, I have asked a few users to rate and compare it against already existing beauty websites in the area.
After assessing that a one-page website would be the best option to go for, I started creating a few sketches on paper.
Although I didn’t create a functional prototype on this website, I have created it in full on adobe XD as per the image.
As I have also created the business logo, I have made sure that the website would primarily feature two main colours: gold (logo colour) and lipstick red (in different tonalities). These main colours would help reinforce the “expensive look” that they were after. The same look was considered when choosing the correct font.
During the design implementation, although Webflow’s capabilities (within the HTML & CSS realm) are practically limitless, I was facing a few responsive design issues with the curvy slanted lines.
As such, I had to redesign some of the backgrounds in Webflow. Although they weren’t exactly the same as in the XD hi-fi wireframes, this allowed me to correct the measurements between the text and the backgrounds in different devices (PC, Tablets and Phones) improving the overall responsiveness.
In order to improve the website traffic, I have had a brief consultancy session with the Founder in order to let her know about standard SEO practices.
I will keep tracking the traffic through Google Analytics and iterating the website when needed.