A Digital Makeover for Physical Makeover!
Redesigning an aestethic clinic website — A UX/UI Case Study
Overview
In this case study, I’ll explore both the enjoyable and challenging aspects of the decision-making process while redesigning and ensuring responsiveness for an aesthetic clinic website.
We worked as a team of three and had 3 weeks to deliver a new design for an e-commerce website of our choice, aiming to sell products or services. After conducting research, we selected the DRA. GARCÍA PAGOLA website. It hadn’t seen updates since 2012, which motivated our exploration.
The website
The aesthetic clinic of Dra. Garcia Pagola is located in Jerez de la Frontera, in the city of Andalusia, Spain. The clinic provides personalized facial and body aesthetic services and has been operating for over 30 years, following the motto: “Less is more,” combining balance, health, beauty, aesthetics, and well-being.
What to improve?
Our team aimed to identify areas for improvement in the website beyond its dated visual appearance. We began this process without any ideas for improvements, and realistically, also without knowing what to expect. To discover opportunities, we applied the design thinking methodology and in the first week, we started by:
- Collaboratively deciding on stakeholder and user interview scripts.
- Analyzing the information architecture of the website by creating a sitemap.
- Conducting a secondary research to better understand the aesthetics market, analyzing quantitative data and comprehending current as well as future trends for this market.
- Conducting the stakeholder and user interviews.
For the stakeholder interview, we divided the questions into topics such as users, clients, problems, competitors, goals and culture. For instance, here are some sample questions:
- Who are the primary users?
- From your perspective, what are users seeking when they visit the clinic or seek treatment?
- When it comes to customer success, what benchmarks do you consider?
- What is the main problem you identify on the website?
- Could you share the comments and feedback received regarding the current website?
- What is the main challenge you face in reaching customers?
- Why should customers choose your services over others?
- How does the business adapt to the needs of the users?
- What stands out as the most valuable offering for users?
After obtaining the stakeholder’s insights and perspective on customer opinions and behaviors, it was time to interview some clinic clients and potential clients from aesthetic clinics.
Taking into account the stakeholder’s primary interests in Improving conversion rates, Exploring new business models and Gaining popularity without losing tradition, we crafted a set of questions for the customer interviews.
Due to the clinic being located in Spain and the majority of our clients speaking Spanish, we divided the tasks. As a Brazilian Portuguese speaker, I can comprehend Spanish, but I’m not fluent and would surely feel embarrassed mixing the languages when attempting to speak in Spanish.
Therefore, while my teammates were responsible for conducting interviews with Dr. Garcia Pagola’s customers, I took on the responsibility of interviewing some potential clients, being able to conduct interviews in English instead. Here are some of the questions used during the potential user interviews:
- When searching for aesthetic clinic services online, what factors are most important to you?
- What kind of information do you find essential on an aesthetic clinic website before making a decision?
- How do you usually navigate and explore a website when researching cosmetic procedures?
- What are your main concerns or questions when thinking about undergoing aesthetic treatments?
- Could you share any positive or negative experiences you’ve had with other aesthetic clinic websites?
- What specific features or functionalities on a website would make your decision-making process easier?
- Do you value online reviews and testimonials when considering an aesthetic clinic? Why or why not?
After conducting the user interviews (with clients and potential clients), we complemented the findings with secondary research to resolve any uncertainties that emerged from the interviews. We opted to create an affinity diagram to dissect all our discoveries and pinpoint common trends, pain points, and recurring patterns among the results.
After completing the affinity diagram and organizing it into similar categories, we noticed several improvement opportunities. We realized that users interested in aesthetic clinic services generally tend to seek specific information and functionalities, yet only one of these was available on Dra. Garcia Pagola’s website.
Look at all these improvement opportunities! Fantastic!
However, it’s not that straightforward, after all, if the main competitors had these functionalities, how would we highlight the clinic’s website? What would be the unique selling point?
The discussion about this and the necessary tools to aid in the solution we would use was postponed to the second week.
Users and Audience
The second week began, and for it, we had established the following steps:
- Create a User Persona.
- Conduct a Competitive Analysis.
- Perform a Feature Comparison.
- Assess the Market Positioning Map.
- Conduct Heuristic Analyses.
- Brainstorm potential ideas and solutions.
- Implement Feature Prioritization.
- Define the Site Map and User Flow.
- Initiate Lo-fi sketches and Mid-Fidelity Wireframes of the selected ideas.
Seems like a lot, doesn’t it? It felt the same for us when we first glanced at our agenda. However, we soon realized that the most time-consuming parts were the decisions we needed to make, not the number of tasks we had to do. But let’s talk about this later.
So we began the second week by developing our User Persona. This came after we had comprehensively understood the users’ needs, stakeholder interests, and collected enhancement ideas from secondary research.
Meet María, a 26-year-old designer in Jerez de la Frontera. Frustrated by failed attempts to contact aesthetic clinics and navigate a website for appointments and treatment information, Maria seeks a reliable clinic for skin treatments and she desires trustworthy professionals, visual procedure references and seamless appointment scheduling to alleviate her exhaustive frustrations.
To better understand how to assist María in meeting her needs and how to make the website stand out amidst numerous competitors, we began a competitive analysis.
For more inspiration, we analyzed some aesthetic clinics that weren’t direct competitors and to ensure the differentiation factor, we conducted a feature comparison with direct competitors.
Analyzing competitors’ offerings uncovers industry norms, identifies chances for innovation, and aligns designs with user expectations, ensuring a user-focused, innovative, and competitive edge for our client. During the feature comparison, we discovered promising innovative opportunities, catering to both María’s needs and the stakeholder’s interests. One of them was unquestionably subscription plans.
We then evaluated where the clinic would position itself on the market map solely by incorporating this functionality. Based on this map, we concluded that this feature alone would indeed be an excellent opportunity to showcase our client’s offerings. Moreover, enhancing it with additional features would make it even more impactful.
Subsequently, before starting to brainstorm ideas, features, and solutions, we proceeded to conduct heuristic analyses. Why? Well, heuristic analysis aids in spotting usability issues through established principles and guidelines, enabling the evaluation of a website interface against usability standards. This process identifies potential navigation problems for users. Moreover, it helps in early detection and resolution of issues, contributing to an intuitive and user-friendly design.
Additionally, as a significant advantage, it would provide inspiration on enhancing overall user satisfaction and experience, generating more ideas for the brainstorming session!
We realized that the website failed on all principles. There was no FAQ or help page, no search field, no standards or consistency, and definitely lacked a minimalist aesthetic, given that every page contained excessive text and no images.
Scope and Constraints
We brainstormed ideas for pages and functionalities to add to the website and conducted a voting session to decide on the best ones, aiming to narrow down the options. With so many great ideas, it was challenging to determine which should take priority and which could be added later. During the decision-making conversation, we encountered some minor difficulties in reaching a consensus on which features to include.
The subscription plans and offers were proving to be a complex feature to integrate into the user flow for procedure research, so initially, we considered postponing them. However, this functionality was a crucial need for María, our user persona. As a result, we opted to utilize a feature prioritization tool to delineate our priorities, delegate tasks, and decide what to schedule or discard.
Once the features were determined, the next step was to define the User Flow and initiate the development of a new site map.
For the User Flow, we chose to follow a pattern identified through the research and interviews we conducted. Where the user, upon accessing the website, searches for their specific concerns to be addressed, explores further details about the procedure, looks for pricing, plans, and offers, and finally, schedules an appointment.
In the previous information architecture, while creating the site map, we noticed numerous sub-pages with similar or different content, containing information related to various procedures within different or the same categories. Confusing, right? We thought the same!
This complexity made the visualization dense and challenging, potentially causing confusion about the specific purpose of each procedure, and understanding it on the mobile version was even more difficult.
To rectify this issue, our aim was to simplify the information architecture. So we started to sketch some ideas through low-fidelity wireframes, and we agreed to organize the website into two primary overarching categories: Concerns and Treatments.
After reaching a consensus on the ideas shared through Low-Fi wireframes, we proceeded to develop them into Mid-Fidelity. Now, within the Concerns category, clients could navigate through body and face topics to find subcategories addressing their specific concerns.
Upon accessing these concern-related subcategories, clients would discover information about the concern itself and the treatment options available at the clinic.
Clicking on a treatment would then lead them to the dedicated treatment information page. And for those solely interested in individual procedure pages, this would also be feasible, categorized under Treatments with all clinic-offered treatments as subcategories.
After developing the Mid-Fidelity wireframes and creating the prototype, it was time to prepare for the Usability tests scheduled for the third week. Before drafting the scripts, we contemplated how to craft the interface for the High-Fidelity Prototype, seeking inspiration and considering which color palette would align with our client’s identity. This preliminary planning allowed us to enter the third week with concepts for a Moodboard.
Process
Starting the third week with the Moodboard, we considered the sensations and expectations that clients of aesthetic clinics seek when undergoing a treatment. A feeling of cleanliness, lightness, smoothness, and beauty in a sensitive and natural manner, drawing inspiration from the diverse tones of skin and human characteristics.
With the inspirations we gathered from the images and defined color palette, we organized the tasks for the third and final week before the project deadline. For this week, we needed to:
- Ensure responsiveness for the desktop version
- Define the script for usability tests
- Conduct the Usability Tests
- Gather feedback to enhance the prototype
- Prepare for the presentation
- Develop and deliver the High-Fidelity prototype
After ensuring responsiveness for the Desktop version, we developed the script for usability tests involving users. Each of us was responsible for interviewing at least 1 person, analyzing user trends, behaviors, and expressions, and posing questions related to the prototype after an initial test.
With the usability test script defined, we selected the following scenario:
Imagine you’re chatting with a friend, and you mention noticing your cellulite worsening. Your friend suggests an aesthetic clinic and sends you the website. How would you proceed to find the information you need and schedule a first appointment for December 6th at 11:40 AM?
We received a lot of feedback after the usability tests. We analyzed user behaviors while interacting with the pages, probing when we noticed expressions of confusion and asking for opinions. Overall, users displayed consistent behavior, aiding us in deciding what information to emphasize.
Through opinions and shared uncertainties, we discovered some overlooked flaws in the prototype’s development and other aspects that, while clear to us who understood the project, were unclear to users unfamiliar with it.
For instance, there was a menu category named ‘Methodology’ within the subscription plans functionality, which wasn’t clear to users. They also mentioned the need for a return button to the appointment page, an additional “book an appointment” button at the end of some pages, lack of information regarding the content of the first consultation, and the absence of a field for additional information on the appointment page.
After usability tests, we enhanced our prototype based on the suggested improvements and adjusted these enhancements in the High-Fidelity prototype as well.
We successfully completed and delivered the project on time, leaving delegated functionalities and scheduled tasks in the Feature Prioritization matrix for the next steps in the project’s continuity. Following its presentation and testing, we received many compliments, but also additional feedback suggesting further improvements, such as adjusting the size of certain texts and containers.
We learned that we should always test and test again, multiple times. It was a significant learning experience!
Review the previous version of the website again and further explore the link below to access the High-Fidelity prototype, emphasizing the treatment of skin pigmentation and the selection of IPL as the procedure. Enjoy!
Outcomes and Lessons
In this project, I’ve gained an even deeper understanding of the importance of user testing. Certainly, when juggling numerous ideas, deadlines, and varied tasks, it’s impossible to remember everything. Sometimes, something very simple might easily slip through unnoticed, perhaps because it’s so simple that we overlook it, only to realize later.
However, that seemingly simple thing might indeed stand out to the user, proving to be a flaw not as simple as assumed.
I thoroughly enjoyed being part of this project, where I learned and grew immensely! Thanks to my group for being so incredible throughout this project!
Thank you for reading! 😃
