FK Header NO CAPTION.png

Technologies

Figma

React

Photoshop

my role

Team

Megan Barbanel

Christopher Cordero 

Frankie Kastenbaum

Duration

1 Month

As UX/UI Contractor focused on conducting user card sorts to ultimately redesign the IA of the site and also partnered on the overall UI of the website.

Technologies

dr. fred kastenbaum

Dr. Kastenbaum is a Prosthodontist located in New York City. The office prioritizes its clients’ smiles and are dedicated to providing personalized, gentle care. 

For this project, our team's task was to reinvent the design of the site, making it easier for clients to navigate and find the information they were interested in.

Figma

React

Photoshop

Duration

1 Month

Team

Megan Barbanel

Christopher Cordero

Frankie Kastenbaum

role

UX/UI Contractor, focused on conducting user card sorts to ultimately redesign the IA of the site and also partnered on the overall UI of the website.

 

01 research

who we interviewed

fk image 2.png

Our team was interested in discovering why users visit dental websites, what information they specifically look for, and what makes them choose the one to go to. 

For these interviews, our audience was broad and spanned both genders and ages in order to represent the individuals who would be Dr. Kastenbaum’s clients.  

fk image 3.png

After our interviews, these were some interesting insights we found about our users that we had to consider, and these can be seen here. 

This lead us to understand that users needed certain information and that users defined trust based on being able to see who makes up the office.

02 Define

what was solved for

Individuals are currently finding it difficult to navigate around Dr. Kastenbaum’s website. The information is too dense and they are unable to find what they need easily. 

 

How might we help individuals feel less overwhelmed when on Dr. Kastenbaum’s website?

The users who experiences the problem

Once our user interviews were completed, we created Suzy our persona, in order to hone in on the fact that our users aimed to find a dentist they could trust. However, they were unable to, due to the difficulty of the navigation of websites and therefore, were left still in need of basic information about the offices.

fk perosna.png

By having access to the goals and needs of the users, we were now able to address the outlined pain points by refining what the solution needed to be, leading us to conduct card sorts.

how the user thinks

We wrote every item in the existing navigation onto individual index cards, creating a deck of 51 cards. We did this as a means to explore if what the users said during their interviews aligned with how they actually thought.  This original site navigation is below, showcasing the density of it which ultimately relates directly back to the user’s pain points of struggling to locate information. 

fk original nav image.png

We then conducted Open Card Sorts with these index cards in order to have a better understanding of how users grouped this information.

 

The card sorts resulted in a total of 22 categories, which we then synthesized into 5: Our Practice, Diagnosis, Hygiene, Procedures, New Patient. 

This new site navigation is below, demonstrating how we used the groupings from our users to alleviate their original frustrations of not being able to locate information. 

fk new nav.png
 
 

Once we had a better understanding of how the users grouped the information, it allowed us to reformat the Information Architecture of the site.

03 Design

how users reacted to mid-fidelity wireframes

Once we built the new navigation for the site, we created a new template design for our pages. Because our user insights proved our users needed an easier way of obtaining information, in a less dense manner. Therefore we formatted the information using accordions and page breaks.

new restorations page

new diagnosis page

fk mid fi.png

Showcasing our implementation of accordions to simplify the information provided.

Showcasing our decision to use page breaks to help user dissect the information. 

04 Test

what we heard

In order to accomplish the task of providing a lot of information in a condensed manner, our team turned to dropdown menus. However, we found from our users that the pages above were still overwhelming. 

Fk bubble 2.png
Fk bubble 3.png
FK bubble 1.png

SOlution for users through hi-fidelity wireframes

With the feedback from our users, we created modified versions of the mid-fidelity screens to continue making them less intimidating. Additionally, we added color and images in order to further represent the branding and mission of the practice, ultimately creating the hi-fidelity screens. 

 

In total, we created 14 screens to complete the website, compared to 51 screens which made up the original site. Within those 14 screens, there were 3 various templates used; one for the Homepage, one for small amounts of copy, and one for large amounts of copy. 

Original homepage

new homepage

fk hi home screen.png

The original Home Page. Users felt confused by the header images, causing them to think it was a Dermatologist or Dating website.

Original cleaning & prevention page

We designed the new Home Page page to alleviate Suzy’s pain points about wanting to know who works at the office so she can decide if she can trust them.  As well as she easily can understand what services she can be provided with. 

new cleaning & Prevention page

cleaning and prevetion.png

The original Cleaning & Prevention Page. Users were thrown by headers not being capitalized, making them feel less important. The list of related pages also felt unnecessary as they could get to them through the navigation bar. 

Original dental implants page

We created the Cleaning & Prevention page based on the insight of keeping information concise and easily digestible. 

new dental implants page

dental implants comparisson.png

The original Dental Implants Page. Users reacted in the same manner as the Cleaning & Prevention page, finding the headers confusing and the links unnecessary. 

Based on the pain point of finding immense amounts of information overwhelming, we designed the Dental Implants page with accordions

FK Mockup.png

Dive into the platform

In Summary, through these page layouts and designs, we now knew how to specifically address the users’ needs, solving their problem of lacking a sense of trust and a clear path on dental websites. To help showcase that I have created a walkthrough of the homepage and the site navigation.

Mockup.png

05 Ui & Branding

RE-BRANDING

Dr. Kastenbaum wanted a brand identity that would allow individuals on the site to easily know he was a dentist, compared to his original site where they believed it was a dermatologist office or even a dating site. We turned to the psychology of colors to find a color scheme that represented the vision of the site while creating a modern, simple, and clean feel. 

fk colors.png

According to the psychology of colors, teal is associated with being calm, revitalizing, and clarity. While green is linked to freshness, safety, and harmony.  Therefore, we felt these colors targeted Dr. Kastenbaum’s business goal of providing his patients with procedures that remove their pain or provides them with a new look, all while focusing on the users safety.  

06 Reflect

Retrospective

Through this client project, I learned about the hurdles that can appear when working with an individual who does not fully understand the process of UX research. Although my partner and I reached out to the client for feedback at the beginning phases, it was not until we had completed 2/3rds of our user research that the client decided to participate. Once this happened we were able to have a better understanding of what the client expected and were able to insert him into the card sorting data. In reality, it resulted in us creating a more simplified navigation with only 5 items in the main navigation, limiting the site pages from the 51 original pages to the newly modified 14 pages. 

New Site Map (2).png