Website Redesign
A responsive website redesign for a local business.
Responsibilities: UX/UI Designer, UX Research
Timeframe: 10 weeks
Tools: Figma, FigJam, Webflow
Dr. Kalvin Nguyen formerly resided in Oklahoma for 5 years to complete his residency and refine his skills further. He decided to open his practice in Orange County, California in June 2023. At Kali Dental, he hopes to provide a new dental home for many patients, focusing on general dentistry, emergency teeth procedures, restorative dentistry, cosmetic dentistry, and preventative care.
Since Kali Dental is a new dental office, Dr. Kalvin wants to grow his patient base. He wants to have more conversions of website viewers to patients in the office. He wants to find ways to better inform viewers of what is offered.
During the kickoff meeting, the staff expressed a few concerns about the current website:
To help Kali Dental, my goal is to research how to increase visitors' interest in seeking care with Kali Dental.
My plan of action consists of:
Before making any revisions to the website, it was best for me to understand better what I would be working with. I also wanted to pinpoint what areas of the website needed the most help and what I should keep in my future redesign.
I recruited at least 6 participants for my user interviews. My participants were:
Within the interviews, my user testing strategy includes:
Making a Competitive Analysis for Glint Boutique Orthodontics, Bright Now! Dental, CDIC, Brian Lee, DDS, Inc., and Beach Dental Group gave me insights on ideal features to include and what to omit.
To create a positive dental website experience, it is best to design with transparency in mind to help establish user trust. Interactions on the website should also be made simple and concise, so they can easily understand what is offered at a glance.
To iterate the focus for my redesign, I made three point-of-view statements to follow. My “How Might We” questions are a directly reflect those statements. Ideally, I want my redesign to revolve around these focuses:
From the interviews, I created personas that my participants inspired. These personas help us keep in mind what actions and expectations a user may have when interacting with Kali Dental.
Besides getting into the mindset of who we are designing for, it was best also to organize a revision task list by priority. The product requirements are categorized and prioritized as: Must-Have, Nice to Have, Surprising and delightful, and Can come later.
The revisions I will put highest priority are:
After I understood what needed to be done, I sought to understand the website’s structure. The website redirects the user to several places, which can confuse a user. So, I made the website flow more straightforward to understand and follow.
The sitemap structures the website to have a better redirect:
I entered the drafting stage and explored several potential layouts for the redesign. There were so many options to consider for the Service Grid, Homepage, and the Overall Dental Service Directory.
Quick sketches were insufficient to fully convey how I would redesign the website’s Homepage and Service page. The mid-fidelity wireframes helped me see how the layout would ideally look on a PC. This helped me narrow down which of my sketches worked and what didn’t.
I initially designed two Overall Dental Service pages to see which would work best.
Below, you can also see the redesign for the Dental Category pages, with Cosmetic and Restorative Dentistry for demonstration.
Kali Dental's redesign was quite the fix! Below are several pages that I had worked on.
With the homepage for Kali Dental, you can see what Kali Dental is all about at a glance. You can find previews to:
Transparency was a value I wanted to convey in Kali Dental's redesign.
I want to ensure that new and current patients are able to get as many of their questions answered on the website. Their time matters after all!
With this straightforward approach, this redesign encourages users to trust Kali Dental and book an appointment with this dental office
The New Patient Resources page is made to address quickly:
This page helps prevent a lot of back-and-forth for users and the office staff. Helping them save time all while informing users of what to expect at Kali Dental.
Before the redesign, a Dental Service Directory didn't exist on Kali Dental's website.
Not every person has been to the dentist, so this page also serves as an introduction for those who haven't.
It also informs users what services are offered at Kali Dental.
Not every service had its own page yet. To work with what I had, I thought it's best to redesign for the Overall Dental Service Categories:
I added quick links for users to click and jump to the desired service they're curious about. This way the user does not have to scroll through everything on the page like they previously had to.
For the dental services that did have their own Focused Dental Service Pages:
I wanted to ensure patients understood a dental service’s purpose, benefits, and process. By providing information, I hope to help show Kali Dental's practice of straightforwardness and transparency early on to patients. In turn, it should also allow users feel less anxious about their dental care and visit Kali Dental.
Press play to see how my redesign came about out for Kali Dental for both PC and mobile.
I did two rounds of usability tests for my mid-fidelity wireframes and hi-fidelity wireframes.
Each usability test had 5 participants involved. All tests were conducted online via voice chat and screenshare.
The first usability test revolves around understanding which two variations of the Overall Service Directory would work best and the users’ thoughts on the current redesign. For the first test, I focused on seeing interactions and obtaining thoughts for:
Locating the Book Appointment Button
Learning what dental services are offered at Kali Dental
Design A or B for Overall Services Directory
Finding information for new patients (insured or non-insured)
If the website was helpful and intuitive via a rating scale of 1 = not helpful and not easy to understand and 5 = most helpful and extremely easy to understand
After making the revisions and solidifying the redesign further, I learned from the previous test. The second usability test added more contextual questions that were necessary to understand the user better.
I wanted to know if the user had the following before continuing onto the newest iteration of the prototype:
Users were then tasked with:
Learning what dental services are offered at Kali Dental
(i.e. Routine/Regular Cleaning, Wisdom Teeth Extraction, and Teeth Whitening)
➜ What are their thoughts on the full directory of the dental services
➜ If the focused view of the dental services encourages further learning
Finding information for new patients (insured or non-insured)
Locating the Book Appointment Button
After they finished the test, I asked for their ratings on a scale of 1-5 for:
Note: The scale of 1-5 has 1 = poor experience to 5 = very positive experience
The two usability tests I conducted resulted in different responses each time. Surprisingly, compared to the first test, more users spent less time on the homepage and went straight to learning more about Kali Dental via the About, Services, and New Patients page.
The redesign was a success since users had highlighted:
The general ratings and thoughts were:
During this project, I had set out to do a lot of revising. I was unable to complete all of the Must-Haves I wanted to include.
However, I was able to complete:
I underestimated how daunting the task of revising the service pages were. The text needed a lot of cleanup and refining since it had overwhelmed users in both my user interview and first usability test.
During my redesign, I revised the FAQ and Overall Service Directory twice. I had also learned that some dental service pages were previously incomplete. The client, Dr. Kalvin, had a few requests from his marketing team. They had requested to maintain specific keywords for SEO purposes. As a result, it involved me doing more research to fill the gaps of where dental content should be and what would be ideal to have written. There was a lot of back and forth, but I was able to cut down the text by a lot!
Due to other limitations like time constraints and lacking the available resources needed to complete some pages,
I had to forego:
However, these are easy for Kali Dental to tackle once they are able to.
I learned a lot about making information more concise and straightforward for users since saving time is essential to them. I also learned more about working with a business client and their requests. It was a great, learning experience. I got to learn more about Figma and its features and put my design skills to practice all while being able to help out my local dentist! Getting the opportunity to update Dr. Kalvin's website was a fun challenge. I got to explore more of WebFlow and its capabilities more!