Smile Studio LA is a dental office located in Encino, California that wants to move towards a modernized website design.
Role: UX Designer
Timeline: February 2025 - March 2025
Tools: Figma, FigJam, Illustrator, Photoshop, Squarespace
Skills: User Research, Competitive Analysis, User Flow, Journey Map, Usability Testing, Visual Design
View Website
01
OVERVIEW
As the UX Designer, my primary goal was to redesign Smile Studio LA’s interface to have the impression of a modern dental website and translating it into a usable mobile version. I was also tasked with finding defects within the old site to revamp and improve these issues into the new design.
Prototype Overview
1
2
3
Challenges
What I discovered during the initial website audit were three main problems:
Dated -> Modern
Cluttered -> Organized
Identity Confusion -> Visual Clarity
Solution & Impact
02
How can I create ways to distinguish the office’s identity while providing an organized structure to present all necessary information for patients?
To gain more insight into what people expect to see on dental sites and their thoughts, I interviewed a group of young adults and examined patient testimonials about the client’s dental office.
User interviews
Market research
User Journey map
First-click method
Color accessibility testing
METHODOLOGY:
In general, it’s normal for people to be nervous during dental or health visits. However, based on these interviews, people tend to become more anxious when they lack enough information to make what they feel is a good decision for their oral health. If they can learn whether the dentist is trustworthy, experienced, and empathetic with their anxieties, they feel more relaxed and confident in booking an appointment.
To gain a better idea of how modern dental offices are laid out, I reviewed various dental offices that were also in the area.
Strengths
✔️ Visual identity is clear
✔️ Info cards
✔️ Clickable contact links
Weaknesses
✖ Procedure lists can be extensive
✖ Information overload on some pages
Trends
03
Simplifying for a better user experience.
Before I began working on sketches for the website and it’s features, I wanted to gain a better understanding of how patients would be navigating the site.
Originally, the website had an extensive amount of pages I went through to check for inconsistencies and errors. After removing broken links, repetitive pages, and starting to recategorize the information, I built a new site map (excluding all the individual procedures from the main ones) that compiled the most relevant information patients would find useful.
The user journey map is based on a first-time user flow when a patient visits the website.
Before creating lo-fi mock ups, I created 46 iteration sketches to get better ideas of how to simple the layout since there was a lot of information to sift through when I did the UI audit.
There were three areas I primarily focused on:
1
Home Page
The first area patients will land on. There should be enough information to patients can use to continue within the site based on their decisions.
2
Procedures
One of the first thoughts patients have when visiting a dental office site is whether they can provide the services they need.
3
Patient Information
Once patients find out whether the procedure they need is avaliable, they’ll need to learn more of what information they need to provide and whether their insurance is accepted.
When selecting the new color, I confirmed whether it met readability standards as the client mentioned he does have some older patients. I also made sure the minimum text size was at least 16 px so they could be read on mobile screens as the smallest text size was originally 11 px.
Accessibility Check
Home Page
Between the two versions, it was still unclear to me how I would list out the procedures since at this point I was still considering how to use info cards. However, I created two iterations of the home page to determine how the dental credentials should first be laid out. I specifically wanted the credentials to be visible within 1-2 page scrolls so patients could learn they trust the client (dentist) when they first land on the page.
Procedures
In the first mock up, I felt the procedures could be listed out as bullet points since there were various pages within each category; however, based on feedback, I decided to create a second version that had the primary procedure category and common procedures under it to simplify the layout.
Patient Information
When I did my market research, many websites had varying ways to layout the patient forms. However, the client wanted to keep it as simple as possible, so I went with a download button at the top of the page so patients can find it right away then the additional patient information below it.
04
Creating a cohesive web design catered to patients.
The client needs a new website since the current design is outdated, but faces some challenges on how to visualize and create it. My role is to design a new website/mobile app that is both modern and easy to use for the client.
Home Page
01
02
After creating the hi-fi mock ups, I experimented with new iterations to better assist with the visual identity of the website as a dental office using specific jargon to make it as clear as possible.
I also tried out a few versions of info cards for the dental services available to make information more visually digestible for patients when they first view the website.
Solution: In the end, I decided to combine elements of the 3rd version with the 1st version after feedback so the hero text could be more visible. There were additional changes in the final version since there were issues with Squarespace not being able to implement some design elements, but the final version is relatively the same.
Procedures
01
02
I wanted to explore how it could look if the procedures were in a bullet point layout. Due to the number of procedures listed, I thought the design could be visibly easier for patients to locate specific information
There was a lot of empty white space on the page which was common for dental sites, however, there were issues with how patients could determine which link to click since they may not know what type information to look for.
Solution: After deliberation, Version 1 was rejected in view of Version 2’s design layout.
01
02
To make the jargon easier to understand for patients, I decided to include brief descriptions of the most common procedures patients search for dental appointments. Each of the procedures also link to a page that contains other services under the associated category so patients have more clarity of what type of procedure they will be undergoing.
I also added more visual elements like relevant pictures and alternating colors so it’s more interactive to scroll through the different procedures offered at the office.
Solution: I decided to go with Version 2 after user feedback that it felt more reassuring for patients that they were able to see some brief descriptions of the different procedures and could click into the pages to learn more.
Patient Information
01
02
To keep the information page simple per the client’s request, I utilized a download button for patient forms and had it separated from the info so it’s easy to find on screen when landing on the page.
Solution: Simplifying the patient information page was the goal in order to direct patients visually to what they need for appointments. Whether it’s the patient form or if they need to check if they have the right insurance, the page was designed to create a streamlined layout.
Design System
I created a new design system guide from scratch to assist with keeping it consistent.
05
Finalizing the design elements of the prototype before shipping.
After creating the last prototype, I discovered some minor issues where I did some workarounds for the Squarespace website.
01
There was a hero slideshow implemented in the prototypes, however I had to discard it in favor of only one hero image when converting the design to Squarespace as Squarespace’s functions were not allowing me to create a hero slideshow.
02
While the website layout is more modern, the client did not have any updated images (office tour, profile picture, smile gallery) and was unable to find the original files. Some images may appear low-resolution for larger screens due to this as I saved them directly from the old site as I had no method of obtaining the original resolution images.
I also made minor changes to the header since Squarespace did not have a feature I could find that would allow me to show the contact information.
06
After publishing the new website design, the client is considering making some future updates as he makes changes to his office. For now, I’ll be working on optimizing the pages for SEO and making minor adjustments as the client requests.
What’s next for Smile Studio LA?
I had some minor issues using auto-layout since it was the first time I used it to this extent in order to decrease the amount of time spent wireframing. However, once I set up the components correctly, it saved time when creating the high-fidelity mockups.
This was also the first time I utilized Squarespace so I wasn’t fully aware there were certain functions that could not be done unless coding was involved. In the future, I’ll be aware that the design may not be formatted exactly like the prototype for this reason.
Takeaways
View Website
Thank you so much for reviewing my case study!