The goal is to create a trendy website for a company offering personal care service. The project is still in progress.

New website for a well-known beauty salon.

In Estonia there is a very well known and popular beauty salon called Ilutare, founded by a group of women in 1989. The idea of this project is to create the company a brand new trendy website to replace the last one done in 2013.

When I started learning a software called Webflow and was looking for a case study, I contacted one of the owners and gave them a volunteering offer - allow me to create you a new beautiful website and I will get more experience in learning how to conduct and analyze user research, create flow charts and wireframes, prototype, and develop through Webflow. It’s a win-win opportunity deal.

Discovery

With the business leads we discussed success metrics for the website, as well as challenges and opportunities that the project could present. The leads believed that the best way to convince their customers to stay with them is to create a website that reflects the business’ professionalism and high quality. Needs and goals that arised:

  • Simplest Navigation
  • Website security
  • Efficient communication and scam-free inbox
  • Stable website with no constant updates
  • Mobile friendly
  • Internal linking

User Research and Analysis.

User research helps to design a balanced satisfaction between the business and the users. In this project I got quantitative information by questionnaire and qualitative information by user interviews.

The survey had 23 respondents - 61% of women, 35% of men and the rest decided to not reveal their gender. 22% of them all less than 16 years old, and 39% in their early 20’s. The statistical answers are presented on the infographic sheet on the sidebar.

Summary of the user interviews.

  • Hair styling is the most wanted service within salons in comparison to manicures and cosmetics.
  • 75% of the respondents have a specific chosen salon they go to most of the time and 60% of them have also chosen a professional. The rest are open to explore around.
  • Favorite salons and professionals are mostly being recommended by friends and family.
  • The best way to make an appointment is via phone call. When talking in person, it is faster and more convenient to get the best possible time, sometimes with availability exceptions.

User Stories.

User stories are short and simple following this template: As a [type of user], I want to [user goal] so that [reason]. It is expressed from the perspective of the user using the service or product. Here are user stories that I used for MVP:

  • I as a customer want to see the price list so that I know how much each service costs.
  • I as a customer want to see the contact info of the place so that I can get in contact with them in any way.
  • I as a customer want to see all services offered so that I can choose the desired service.
  • I as a customer want to see some example photos so that I can see some previous outcomes.
  • I as a customer want to see the personal so that I can see how many different stylists there are.
  • I as a customer want to see the Google map on the screen so that it is easier for me to locate the place.

User Stories.

The biggest complaint about this was that every single piece of info existed on an endless scrollable page. To get to the topic, you had to choose it from the navbar, but there was no fixed navbar, nor a potential “back up” arrow option. Everything had to be done by scrolling.

All news, galleries and other announcements are published on social media pages, like Facebook and Instagram. After specific business requirements and user research, the sitemap was more than half way simpler than before.

  • I as a customer want to see the price list so that I know how much each service costs.
  • I as a customer want to see the contact info of the place so that I can get in contact with them in any way.
  • I as a customer want to see all services offered so that I can choose the desired service.
  • I as a customer want to see some example photos so that I can see some previous outcomes.
  • I as a customer want to see the personal so that I can see how many different stylists there are.
  • I as a customer want to see the Google map on the screen so that it is easier for me to locate the place.

Wireframing and Prototyping.

A Lo-Fi wireframes is created to get a view of the content elements on the page. Thanks to playing around with the elements looks and locations, the wireframes were continuously improved. Below is the very first mobile Lo-Fi file as an example. Hi-Fi wireframe captures the look and feel of the product in the advanced stages of the design process. Below is also the very first desktop Hi-Fi wireframe as an example.


Usability Testing.

For user testing I recruited 3 people I knew whom I trusted to be straight and honest with their feedback. I conducted a “think-aloud” test. The tests were conducted in-person, using an interactive prototype on Adobe Xd. Several components needed improvement but many layouts were also praised.

Reflection.

The company team is very happy with the final results and the website is now active. As my first solo attempt at a UX design challenge with a real client, I am proud of the work I have accomplished. I had great experience as a UI/UX Architect and I learned a lot along the process. I gained valuable insight into the challenges of balancing business requirements and user needs.