Care First Pediatrics

A pediatric website redesign
Device - Macbook Air.png

Overview

In 1992, Dr. Margaret de Villiers and her husband established a medical practice focusing on pediatric care in the Los Gatos area. They’ve expanded their team by adding a number of physicians as their practice started seeing more patients. With a growing number of medical groups, Care First Pediatrics has kept their private practice strong focusing on education, prevention, and patient-centered care.

Role

Product Designer

UX Researcher

Tools

Adobe XD

Zoom

Miro

Timeline

5 weeks

Problem Space

Care First Pediatrics wants to explore how patients search for pediatricians online and what they look for to provide the right resources to perspective patients. They want to improve their website and branding that provides information on the physicians and how to best contact their office to schedule an appointment.

Research

I first looked at a number of different medical practices to get an understanding of what parents may be searching for and the current resources provided for patients. I looked from individual private practices to large medical groups and analyzed their strengths and potential weaknesses. 

Comp. Anlysis. CFP 1.jpg

Customer Journey

Customer Journey

Through user interviews, I was able to identify common goals and frustrations patients had when searching for a doctor or pediatrician. I then created a journey map of how a new patient may find a doctor noting their goals, frustrations, and behaviors to better empathize their experience.

Cust. Journey Map (no persona).jpg

Information Architecture

After having a better understanding on how patients search for pediatricians, I focused on developing a hierarchy of important features to the navigation of each page of the website. This site map was created to layout the different content on what patients would find when navigating the Care First Pediatrics website.

CFP Site Map 1.jpg

Based on the site map, a User Flow was created to better understand the steps on how a user would interact with the Care First website to finding a pediatrician. This specific flow was chosen because one of the business goals from the office manager was to help patients schedule their first appointment. 

User Flow 1.jpg

Initial Designs

Based on my research and looking at google analytics, there was a growing number of users visiting the current website from their mobile phones. I had my initial sketches on pen and paper of different layouts for the homepage to get an idea of where to structure text and images. I focused on designing responsive wireframes of the homepage that can be viewed through multiple devices for quick mockups. 

Low Fidelity Responsive Wireframes

CFP Homepage Responsive – 2 1.jpg

Logo

Care First Pediatrics did not have a logo, so I designed a few logos that best represent the office. Discussing the options with the office manager & physicians, we chose the logo with the four hands because it represented the four pediatricians and their favorite colors.​​

CFP Logo 1.jpg

Creating the elements

My next focus was to create a design framework with visual elements gathered in one document to implement for the high-fidelity prototypes. The color palette inspiration was playful which included bright and dark colors. The teal color is a brand color as it was part of their original website. Frequent iterations on the final UI kit was created to be implemented from low fidelity to high fidelity mock-ups.  

​​

UI Kit CFP 1.jpg

Usability Testing

Using the mid-fidelity wireframes, I designed an interactive prototype for users to test my designs. I recruited four user and asked them to perform a series of tasks from the user flow to get feedback. Because of the covid-19 restriction, all of the testing was done remotely via zoom using the screen share feature. 

​​

CFP Hi FI.jpg

Key Findings

From the usability test, users were able to complete the two main tasks:

  • Looking up a pediatrician's biography,

  • Contacting the office to schedule an appointment.

I documented my observations in google sheets to better visualize if users competed the tasks.

​​

CFP Excel Usability Testing (Affinity Map_).jpg
Highlighted Results # or agreements.png

Next Steps

After receiving feedback from users of the usability test, my next steps will focus on making iterations based on the frustrations I observed. 

As the prototype improves, I will then discuss with the Office Manager and discuss options on how he wants to make this live. Since the is budget is tight, we may go with a website builder or a no-code option such as WebFlow.

​​

Reflections

After receiving feedback from users of the usability test, my next steps will focus on making iterations based on the frustrations I observed. 

As the prototype improves, I will then discuss with the Office Manager and discuss options on how he wants to make this live. Since the is budget is tight, we may go with a website builder of a no code option such as WebFlow.

​​