As freelance UX/UI Designers, we were hired by a doctor to enhance his website, which he uses to showcase his expertise and attract patients. After discussing his goals and reviewing the existing site, we identified opportunities to improve usability and clarity.
Our team designed a new site focused on user experience, aiming to build visitor trust and increase patient conversions. We collaborated closely with the doctor to ensure the new design met both his needs and those of his patients.
Matthias Karl Schaefle
Leticia Magri
User research; Wireframes; UI design; Prototyping; Usability testing; Iterating on Designs.
UX/UI Designer
2023 – 2024
The doctor is a renowned plastic surgeon in São Paulo, Brazil, with 16 years of experience. Specializing in corrective body surgeries, his website showcases his expertise, attracts new patients, and provides detailed service information.
Upon evaluating the website, it was clear the navigation was confusing and the design visually unpleasant. Key areas lacked important information users wanted, as revealed in the research. This made it difficult for potential patients to connect with the doctor’s services.
I worked as a Product Designer, focusing on UX/UI design, branding, and logo design. I conducted user research and interviews, collaborating with the team to create intuitive solutions.
We prioritize user needs by enhancing usability and tailoring information to patient interests, with a modern and responsive design. Additionally, we updated the visual design for consistency across the platform, ensuring a seamless experience.
In our initial stakeholder interview, we focused on understanding the project’s objectives and gaining deeper insights into the doctor’s background.
Elevate expertise, boost patient influx, ensure client retention, and increase online visibility.
The doctor wants to promote his innovative technique as a key attraction.
It was emphasized to retain a blue tone, so we integrated it into the new design.
To ensure the redesign met the actual expectations and needs of patients, it was crucial to delve into their experiences and inquiries.
We adopted a dual approach: interviews with selected patients and analysis of frequently asked questions.
In collaboration with the social media and digital marketing team, we designed interactive question stickers on Instagram to gather patient inquiries, ensuring a data-driven approach to our redesign strategy. We then categorized the patients’ questions for easier analysis and reference.
These methods provided valuable insights, uncovering patterns and themes that guided key findings and design strategies.
Patients often have common questions about practical matters like insurance acceptance and payments. Making this information easily accessible is crucial for enhancing their experience.
Patients rely on photos and testimonials for clarity and insights, aiding them in making informed decisions about plastic surgery procedures.
Note: Until the handoff, the display of before and after photos was prohibited by law in Brazil.
Before undergoing plastic surgery procedures, patients dedicate time to reading blogs and online posts to gather information about the entire surgical process, including many questions about recovery time.
In this section, we’ll analyze the current website interface, focusing on the homepage as it’s the only accessible one. This analysis is crucial for understanding user experience opportunities and challenges, as well as optimizing UI design.
Moreover, we’ll validate the research insights, ensuring our design decisions align with user needs. By identifying areas for improvement, we’ll guide the redesign to create a more satisfying digital experience.
View my comments by hovering over the dots
Maintaining the blog section is
advisable, as our interviews
indicate that patients often
rely on this resource for
information.
Including an FAQ section can
be valuable for addressing
common questions from
prospective patients.
Similar terms such as "post-
bariatric procedures," "body,"
and "reconstructive" can
confuse users.
A grid system could be
implemented, as the current
site lacks consistency in
layout.
Lack of emphasis on the
doctor's specialization
and technique.
Missing link to the page about
the doctor. Adding this link
builds trust and provides key
information about the
doctor's credentials.
Lack of contrast in fonts and
inconsistency in blog boxes
can be improved.
Absence of clinic address.
Including this information can
facilitate user location and
enhance site credibility.
Current homepage
After conducting comprehensive research and analyzing the existing website, we crafted wireframes to address user needs, drawing from research and website inspiration.
These wireframes were presented to seek approval and ensure alignment with project goals. Following revisions, they effectively communicated concepts and facilitated progress to detailed design stages.
We redesigned the website’s information architecture to streamline navigation and help users quickly find their areas of interest.
I crafted a structured style guide for seamless team reference and implementation, ensuring visual consistency and design efficiency.
We chose Barlow for the header for its modern aesthetic and clean lines, and Montserrat for the body text for its legibility on various devices.
Blue, requested by the stakeholder, for trust and professionalism; gray for an elegant backdrop; and orange for dynamic contrast and attention.
Integrating the doctor’s essence into the design, I created the logo as a key element of our Style Guide, aiming for a consistent and memorable user experience.
After a comprehensive process, we finalized the redesign. The new website offers intuitive navigation, accessible information, and an enhanced patient experience, highlighting the doctor’s innovative techniques.
Please note that we were not responsible for implementing the website, and the current live version is not under our control. However, you can view the repository of my authored homepage here.
We added the "learn more"
button to allow users to
discover more about the
doctor and his innovative
technique.
We chose to feature the most
popular procedures on the
homepage with photos to
capture users' attention and
make them easier to find.
We added a dedicated
homepage section, guiding
users to detailed information
about the initial consultation
process, based on our
interviews highlighting its
importance to patients.
We crafted a new element
from scratch, using combined
squares to optimize
whitespace and enhance
screen composition.
Implemented breadcrumbs
for enhanced navigation.
We implemented a blue filter
overlay on the photos to
maintain consistency across
pages.
We created a simple and
easy-to-understand step-by-
step guide, designed as a
timeline, to streamline the first
consultation process.
We took care to source
images for each surgery to
facilitate identification.
We streamlined the
categorization into body,
facial, reconstructive and
corrective, and other body
area surgeries for simplicity
and clarity. Usability testing in
the future will validate this
approach.
At the doctor's request, we
highlighted the upcoming new
clinic construction in a clear
timeline format, ensuring ease
of understanding without
overwhelming users with
information.
Enhanced explanation of the
doctor's unique technique.
The entire FAQ page was
informed by user research,
addressing their actual
questions and needs.
This page allows patients to
share their contact details for
scheduling appointments or
inquiries.
In the implementation, a
WhatsApp icon will be added
to every page for easy
appointment scheduling,
reflecting common practice in
Brazil.
We included surgery details
patients were interested in,
such as recovery time, as
seen in the research.
The blog, curated by the
doctor, features insights on
plastic surgery, managed by
their social media and digital
marketing team.
To ensure the website continues to meet user needs and stays updated with industry best practices, it’s essential not to stop here. We need to remain attentive to changes and continuous improvements.
Conducting usability tests will be crucial to identify areas for improvement and ensure the site offers the best possible user experience. These tests will allow us to adjust and refine elements based on real user feedback.
New features may be necessary in the future, such as adding a before-and-after page when permitted in Brazil. This will help showcase surgical results and build patient trust.
After implementation, it’s important to test and monitor the site’s performance to ensure its efficiency and speed. Optimizing performance will help us provide a smoother and more satisfying user experience.