Website Redesign
A responsive website redesign for 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 to refine his skills further. He decided to open his own practice in Orange County, California in June 2023. At Kali Dental, he hopes to provide a new dental home for many patients with a focus on general dentistry, emergency teeth procedures, restorative dentistry, cosmetic dentistry, and preventative care.
Since Kali Dental is a new dental office, Dr. Kalvin would like to grow his patient base. He wants to have more conversions of website viewers to patients in-office. He wants to find ways to better inform viewers of what is offered.
During the kickoff meeting, the staff has 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 better understand 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 trust with a user. Interactions on the website should also be made simple and concise, so that they can easily understand what is offered at a glance.
To iterate the focus for my redesign, I made 3 point-of-view statements to follow. My “How Might We” questions are a direct reflection of those statements. Ideally, I want my redesign to revolve around these focuses:
From the interviews, I created personas who were inspired by my participants. These personas help us keep in mind of 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 to also 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 further to understand the structure of the website. The website redirected the user to several places, which can create some confusion for a user. So, I worked on making the flow of the website easier to understand and make it more simple to 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 not enough to fully convey how I was going to redesign the website’s Homepage and Service page. The mid-fidelity wireframes helped me see how the layout would ideally look like on 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 were able to get as many of their questions answered on the website. Their time matters after all!
With this straight-forward 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 quickly address:
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. In order to work with what I had, I thought it's best redesign for the Overall Dental Service Categories:
I added quick links for a user 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 make sure patients were able to understand the purpose, benefits, and process of a dental service. By providing information, I hope to help Kali Dental's practice of straight-forwardness and transparency gets shone clearly to patients. In turn, it should also help users feel less anxious about their dental care and visit to Kali Dental.
Press play to see how my redesign came about out for Kali Dental for both PC and mobile.
I did 2 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 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 had learned from the previous test. The second usability test added more contextual questions that were necessary to better understand the user more.
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 their thoughts are on the full directory of the dental services
➜ If the focused view of the dental services encourage 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. To my surprise, compared to the first test, more users ended up spending less time on the homepage and went straight to learning more about Kali Dental via 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. There was a lot of cleanup and refining needed with the text 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 there were some dental service pages that 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 on how to make information more concise and straightforward for users since saving time is important 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, put my design skills to practice all while being able to help out my local dentist.