Freelance | UI/UX & Web Design
Website for Dr. Hosn’s Dental practice to provide information about his office and services to patients.
Read more below
Project Background
Dr. Hosn has been serving the Orange County community with dental care for 31 of years and was on the market for a website to help current and prospective patients connect with his office online.
Despite being in business for so long, Dr. Hosn actually never had a personal site for his practice and most of his patients found him through word of mouth. So, that meant I had the opportunity to design from scratch!
Design
Layout Explorations
The 4 main pages I highlighted in these quick-fire sketches were About, Services, FAQ, and Contact. I opted not to include a tab for new patients (something that I noticed during my competitor research) as Dr. Hosn’s office is not currently accepting new patients. That being said, I plan to include a notice on new patient availability for the hi-fi prototype to reduce confusion. The layout on the top-right presented the categories in a way that was more obvious to the user and was the direction we decided to head in.
The 4 main pages I highlighted in these quick-fire sketches were About, Services, FAQ, and Contact. I opted not to include a tab for new patients (something that I noticed during my competitor research) as Dr. Hosn’s office is not currently accepting new patients. That being said, I plan to include a notice on new patient availability for the hi-fi prototype to reduce confusion. The layout on the top-right presented the categories in a way that was more obvious to the user and was the direction we decided to head in.
Wireframes
Logo Design
For Dr. Hosn’s logo, I created a simple and clean design. I opted to use more natural curved lives that have a bit more of a homely feel to represent the family side of his business. The interior of the tooth is loosely inspired by the arches in Persian art, in reference to Dr. Hosn’s roots and the cultural background of the patients he predominantly serves.
I chose to use teal blues for the colors of the site/branding to once again, convey cleanness. It’s important to consider the context of teeth because more neutral colors like yellows, beiges, and browns aren’t colors most people would associate with clean teeth.
I explored a couple of different font treatments and colors on the logo + Dr. Hosn’s name. The color combination and font on the left were reading political campaign, so we narrowed the choice to the middle and the right. For the website itself, I used the logo color treatment from the right side option, and the font and color from the middle one.
Putting it all Together
I created a quick mockup of what Dr. Hosn’s Dental Practice website might look in the layout and palette that we settled on.
There’s three options:
- Light Nav Bar + Dark Background
- Dark Nav Bar + Light BG
-
Bright/Light Nav Bar + Light BG
We ultimately decided on going with the Dark Nav Bar + Light BG moving forward with the prototype!
Usability
User Tests
To test the usability and clarity of the site, I enlisted the help of 5 users to answer 3 key questions:
- What days is Dr. Hosn’s Office open?
- What Cosmetic Dental services does Dr. Hosn offer?
- Is Dr. Hosn currently accepting new patients?
Results
All users were able to answer my questions successfully!
On average it took slightly longer for users to answer “Is Dr. Hosn currently accepting new patients?”, but all were able to find the answer within the FAQ page. A couple users were slightly disoriented in the prototype by the scroll function glitching in Figma.
* I noticed a bug issue where when the user scrolls manually, the nav bar no longer jumps to the correct part of the screen.
Hi-Fi Prototype
Click through this interactive prototype and explore Dr. Hosn’s site!
Developer handoff! For this site to be created, we need to enlist the help of a Web developer. While we look for coding support, I made note of certain interactions in the design that I wanted to elaborate on to help make the transition from design to code as smooth as possible.
Notes for Developers
There are specific design elements that I was unable to replicate within the Figma prototype. To help clarify my design, I created these two examples of how the nav bar color changes depending on the user’s interaction of the site.
As the user clicks through the left hand navigation bar, the site will automatically scroll to the corresponding section and stay highlighted until the user scrolls elsewhere.
vs.
As the user scrolls through the website manually, the left hand navigation bar will automatically highlight in accordance to the corresponding section and stay highlighted until the user scrolls elsewhere.
© Anna Hemsworth 2024