LOGO design
LOGO design
Frankie
kastenbaum
Frankie
kastenbaum
Frankie
kastenbaum
FRANKIE
KASTENBAUM
FRANKIE
KASTENBAUM
FRANKIE
KASTENBAUM
Frankie
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
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.
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.
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.
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.
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
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.
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
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
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
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.
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.
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.
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.
.png)