Project overview

This project aims to redesign the hair salon's website to create a modern, engaging, and highly functional digital presence. The new site will serve as a key tool for attracting new clients and strengthening relationships with existing ones by effectively showcasing the salon's offerings, its updated look, and its commitment to a top-tier customer experience.

“What challenges could we face moving forward?”

i had an opportunity to explore real world user feedback by directly engaging with our client’s customers onsite. I compiled all our findings into affinity diagram and used dot to decide where to focus our efforts. The results confirmed a strong preference for online booking, not just among yourger customers but also across other age groups. additionally, we found taht pricing transparency is crucial for building trust.

Meet the users

Next I developed a user persona to better unstand our target audience. Creating these persona helps me focus on my design and feature set to meet the specific needs and perfernce of users like them.

Recognising that user behaviour often involves initially searching for salons on Google Maps and then evaluating the salon’s competence through image galleries on its website — prior to even considering pricing — we refined our primary user flow.

After careful evaluation, we transitioned into the ideation phase. We decided to proceed, despite having a well-defined understanding of the processes that needed to be implemented, keeping in mind that ‘the devil is in the details.’ Our aim was to enhance the personal appeal of our stakeholder and her team and encourage user affinity by showcasing a diverse range of salon imagery. Additionally, we thought of introducing a filterable style gallery that would enable users to browse through different hairstyles for different hair types.

Creating low-fidelity wireframes made rethink the necessity of certain elements and reorganise content for a better user experience. We understood that the before/after style gallery would need to live on a separate page, with a teaser on the main landing page. Because customers like to see before and after pictures, we decided to not limit ourselves to just a carousel on the landing page. It wouldn’t allow the implementation of multiple filters we needed for a pleasant user experience.

Based on feedback we received during the design critique, we sought further guidance from our instructor. He advised us to concentrate on the core user journey involved in booking a hairdresser’s appointment, stating that, for the scope of this project, it was not necessary to develop additional user flows or personas.

Subsequently we refined our MVP happy path user flow.

Armed with these insights, we moved on to crafting our mid-fidelity wireframes. During this phase, we opted for a strategic change in our booking system solution. Rather than merely displaying a static price list on the landing page, we integrated a feature that allows users to select services directly from the price list, guiding them to subsequent booking screens to complete the process.

Final Cut

Time really flew by on this project, and diving into the world of Hi-Fi design for the first time was an eye-opener for us. We’ll be the first to admit that we underestimated the nitty-gritty details. Our style tile looked like a painter’s palette — so many colours, so many choices. But we came to understand that having a lot of options isn’t a mandate to use them all. A key piece of UI wisdom from our instructor really hit home — every button doesn’t need to have a background colour. Sometimes, less really is more. It was a subtle reminder that in design, as in life, moderation is key. After all, a dash of colour can be impactful, but an overload can be, well, just too much.

At last it was time for usability testing. Five testers took our prototype for a spin, offering us the kind of practical, real-world feedback you just can’t get any other way. Their input was crucial, as we moved into the final stages of our project. While our testers offered invaluable insights, simply observing their interactions with our prototype revealed gaps we hadn’t noticed before. Most notably, we failed to include any markers to indicate the service category a user was currently exploring. Other than that setback, feedback was positive — especially concerning the ease of use for our online booking system.

Lessons learned and next steps

• If the project were to extend, our priority would be to fully build out the hairstyle gallery. It’s a game-changer for bringing new customers on board and our client would benefit greatly from it.

• Engaging with users in their natural environment via field research unveils authentic feedback.

• Clear visual cues like highlighting the active booking section are crucial for user orientation.

This project was a transformative journey through the nuances of UX/UI design, punctuated by real-world challenges and invaluable learnings. We navigated complex questions of user trust, visual appeal, and practical functionality. We learned that the success of a digital presence is tied to the small details. As we navigated through the design process — from stakeholder interviews to wireframing, from mood boards to Hi-Fi prototypes — we kept our client’s challenges and aspirations in sight, tailoring a holistic solution that also laid the groundwork for future growth. The end product was a user-friendly, transparent, and aesthetically pleasing online platform that upheld the salon’s unique vintage charm while modernising its customer interface. Though our formal engagement with this project has concluded, the insights we’ve gathered will certainly shape our approaches in future endeavours.

i also looked into several potential competing companies and although none competed directly with Lala’s beauty and style. they can still infrinige on thier business revenue and popularity.

the majority of the features between competitors were very similar, however the main diffrence that we notice were

• easy accessibie vs hardly accessibe

• too many screens vs simplified interaction

• bright/distracting interface vs minimalistic interface