![Wordpress.png](https://static.wixstatic.com/media/16bff0_c748d8056e654cd7a5886e04f856558c~mv2.png/v1/fill/w_82,h_82,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Wordpress.png)
Christa Panagio Beautique
Redesigning the Website and Simplifying Clients' Booking Experience
What's the problem?
You just received an invitation for a party at this upcoming weekend but you were too busy with work and you haven't done your nails for a while. You do not want to look lie you do not take care of yourself, "Need to make an appointment for my nails ASAP!" You sit in your couch and after 5 minutes you are still looking how you gonna make that appointment.
With the not so user-friendly design the website has, it is very time-consuming and frustrating to find the button for bookings.
![Untitled design.png](https://static.wixstatic.com/media/16bff0_a3d55da97c684670b46dba631282090a~mv2.png/v1/crop/x_0,y_108,w_810,h_583/fill/w_489,h_353,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Untitled%20design.png)
![Where is the book now Pff this is taking too long! copy 3.png](https://static.wixstatic.com/media/16bff0_e90937c3651a4ddab48babf94ca286d6~mv2.png/v1/fill/w_1329,h_261,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Where%20is%20the%20book%20now%20Pff%20this%20is%20taking%20too%20long!%20copy%203.png)
Potential Solutions & Goals
Christa Panagio's Website was redesigned by simplifying the steps in order to give clients all relevant information about the store and at the same time and the whole process of booking faster. The main goal is to posisitively influence clients before even come to the store and and make the booking experience easier.
![Where is the book now Pff this is taking too long! copy 6.png](https://static.wixstatic.com/media/16bff0_5bfde4d6ab5b4efc8696388846e35d3d~mv2.png/v1/crop/x_419,y_144,w_265,h_278/fill/w_81,h_85,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Where%20is%20the%20book%20now%20Pff%20this%20is%20taking%20too%20long!%20copy%206.png)
Explore all services
Present a wide selection of services
![Where is the book now Pff this is taking too long! copy 5_edited.png](https://static.wixstatic.com/media/16bff0_9a8523174faf4878b23647fb2bf93d09~mv2.png/v1/crop/x_9,y_0,w_235,h_229/fill/w_80,h_78,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Where%20is%20the%20book%20now%20Pff%20this%20is%20taking%20too%20long!%20copy%205_edited.png)
Why to choose us
Present in homepage everything that makes the store better than others.
![Where is the book now Pff this is taking too long! copy 4_edited.png](https://static.wixstatic.com/media/16bff0_820e07a8e38d493392a783e95f820954~mv2.png/v1/crop/x_0,y_0,w_252,h_261/fill/w_82,h_85,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Where%20is%20the%20book%20now%20Pff%20this%20is%20taking%20too%20long!%20copy%204_edited.png)
Get a glimpse
Clients can check the employees' works and choose whoever they want for the corresponding service.
![Where is the book now Pff this is taking too long!_edited.png](https://static.wixstatic.com/media/16bff0_dff67094fd33432ba66e7f3ddea6a952~mv2.png/v1/crop/x_10,y_0,w_233,h_242/fill/w_75,h_78,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Where%20is%20the%20book%20now%20Pff%20this%20is%20taking%20too%20long!_edited.png)
Increase clients
Make an excellent and professional first impression through the website.
My Role & Process
I worked on that project for 3 weeks and have been responsible for the complete end to end UX process. I refined my design framework to deeply understand the user and at the same time their needs but also my stakeholder's point of view. My approach to this project is to research, synthesize, ideate, design and validate a suitable solution.
Define Analyze Ideate Design Test & Refine
Secondary research
Competitors' analysis
Affinity map
Personas
Sitemap
User flows
Prototyping
Usability Testing
Design Iteration
1. Define the problem
-
Secondary Research
To learn more about clients' behavior and needs, I conducted secondary research to beauty salons in New York City and more in Queens, where is the location of the store.
According to research 65% of the clients are walk-ins; only a small percentage typically makes reservations by phone or online. However, more and more businesses want to promote the electronic booking system for various reasons beneficial not only for them but also for their clients. Excellent first impressions is one of the main reasons. It is professional to have an easy to use online booking system, because especially young ages tend to do everything online. No phone-calls will be unanswered, a fact that can be irritating for a significant percentage of clients. They will also be able to make an appointment any day and any time they can. In addition, by following that process, they get reminding notifications about their appointment, so there are less possibilities to forget it or come late.
![chart.png](https://static.wixstatic.com/media/16bff0_4cf086b9b77041a4bf793ab5e0cfd9d4~mv2.png/v1/fill/w_459,h_259,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/chart.png)
Another research related to online booking shows that hairs salon costumers book their appointment outside the stores' opening hours. Living in a fast paced era, people do not have time during the day to sit down and schedule appointments and sometimes not even to think about them.
-
Competitors' analysis
There are many competitors that include in their websites similar features to what my proposed solutions will be. I picked two beauty salons' websites that are very well known with big list of costumers and they are in the same area. I have analyzed the competitors' websites using the Heuristic Principle of UI/UX Design. This helped me understand what solutions I should include in this project.
2. Analyze the Data
-
Affinity Map
![image-asset.jpeg](https://static.wixstatic.com/media/16bff0_f097855bb7de44bd866072945e40fd9c~mv2.jpeg/v1/crop/x_0,y_29,w_415,h_401/fill/w_205,h_198,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/image-asset.jpeg)
From all my research, I organized my notes and thoughts into an affinity map. This helped me identify patterns on how to attract more clients into the salon and positively influence them about it only through the website.
-
Personas
Based on the secondary research, I created a persona that highlights the concerns and the needs of our target audience when they are looking for a beauty salon.
I other referred to the persona throughout the entire product development process to make sure I prioritize the users in my design solution.
![Ivory Peach Lilac Yellow Colorful Gradient Customer Persona Graph.png](https://static.wixstatic.com/media/16bff0_b6f0ad4bcdda442597e64b843cf005d2~mv2.png/v1/fill/w_600,h_450,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Ivory%20Peach%20Lilac%20Yellow%20Colorful%20Gradient%20Customer%20Persona%20Graph.png)
3. Organize Ideas
-
Sitemap
I organized my ideas and shorted the main features and functionalities through a sitemap. This was created to get a high-level overview of the screens and to visualize the navigation structure and hierarchy on the website.
![Yellow Minimalist Company Website Site Map.png](https://static.wixstatic.com/media/16bff0_eeb77fb4a8e741cca502c69d72b0ad26~mv2.png/v1/fill/w_600,h_450,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Yellow%20Minimalist%20Company%20Website%20Site%20Map.png)
-
User Flow
I mapped out one user flow to illustrate the paths clients will follow when using the website.
![Cream Green Pink Flow Chart Graph.png](https://static.wixstatic.com/media/16bff0_4107b3f70f5a4b7495dbe2a381b2d90c~mv2.png/v1/fill/w_607,h_455,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Cream%20Green%20Pink%20Flow%20Chart%20Graph.png)
4. Design
-
High Fidelity Mockups
![]() | ![]() | ![]() | ![]() |
---|---|---|---|
![]() | ![]() | ![]() |
![](https://static.wixstatic.com/media/16bff0_fa22f6fa8cfd4174895528f0ee500668~mv2.png/v1/fill/w_980,h_2124,al_c,q_95,usm_0.66_1.00_0.01,enc_avif,quality_auto/16bff0_fa22f6fa8cfd4174895528f0ee500668~mv2.png)
![](https://static.wixstatic.com/media/16bff0_5a0a64c4c398441d957333cbe74b2abd~mv2.png/v1/fill/w_980,h_2124,al_c,q_95,usm_0.66_1.00_0.01,enc_avif,quality_auto/16bff0_5a0a64c4c398441d957333cbe74b2abd~mv2.png)
![](https://static.wixstatic.com/media/16bff0_21c148fee3554d84989d5594835bce22~mv2.png/v1/fill/w_980,h_2124,al_c,q_95,usm_0.66_1.00_0.01,enc_avif,quality_auto/16bff0_21c148fee3554d84989d5594835bce22~mv2.png)
![](https://static.wixstatic.com/media/16bff0_fa22f6fa8cfd4174895528f0ee500668~mv2.png/v1/fill/w_980,h_2124,al_c,q_95,usm_0.66_1.00_0.01,enc_avif,quality_auto/16bff0_fa22f6fa8cfd4174895528f0ee500668~mv2.png)
5. Test, Iterate, Repeat
![Where is the book now Pff this is taking too long! copy 5_edited.png](https://static.wixstatic.com/media/16bff0_9a8523174faf4878b23647fb2bf93d09~mv2.png/v1/crop/x_9,y_0,w_235,h_229/fill/w_49,h_48,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Where%20is%20the%20book%20now%20Pff%20this%20is%20taking%20too%20long!%20copy%205_edited.png)
rounds of usability testings
![Where is the book now Pff this is taking too long!_edited.png](https://static.wixstatic.com/media/16bff0_dff67094fd33432ba66e7f3ddea6a952~mv2.png/v1/crop/x_10,y_0,w_233,h_242/fill/w_46,h_48,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Where%20is%20the%20book%20now%20Pff%20this%20is%20taking%20too%20long!_edited.png)
moderated tests conducted
Two rounds of moderated usability tests were conducted remotely with 4 participants total. The primary objectives were to address challenges when navigating the website and uncover any usability issues.
Final Thoughts
Collaborating with the owner and the team for a startup business presented its own set of challenges. There are many variables, such as communication factors that are outside of my control.
Working within those constraints has made me appreciate our weekly design meetings. We had to be concise with the topics we needed to discuss with the owner, but still have the flexibility to go off-topic when necessary. A fun team inspires creativity and involvement.