Case Study
CONTRA COSTA COUNTY PUBLIC HEALTH SERVICES
As a society, we have navigated the ever-changing world of COVID-19, with each of us experiencing its impact in various ways that have forever altered our lives. In my role at the local public health department, I was assigned the task of updating the public health website to enhance accessibility, ensuring that the general public can easily find the essential information they need.
Problem Statement
Residents of Contra Costa County lead busy lives and require a reliable way to stay updated on all COVID-related information. The goal is to enhance the "cchealth.org" website so that users can efficiently find all necessary COVID-19 information. Success will be measured by increased user engagement with the website for accessing COVID-19 updates and resources.
ROLE
Lead Designer
DURATION
TOOLS
Adobe XD
Photoshop
Illustrator
2021 - 2022
DESIGN PROCESS
Research
To understand the challenges users face with financial tracking and transactions, I conducted extensive research comprising user surveys and interviews.
research goals
-
Analyze basic user demographics, including age and ethnicity.
-
Identify and understand user needs and behaviors regarding COVID-19.
-
Determine the specific information users are searching for and how to improve its accessibility.
-
Identify user pain points when navigating the website.
Survey Key Insights
-
Users often struggle to navigate the website effectively.
-
Many users feel overwhelmed when searching for information.
-
An excessive number of links creates confusion for users.
User interviews
Using the insights gained from the survey, I crafted an informed interview script and conducted three in-person interviews from varied backgrounds.
-
"I would like searching for a vaccine appointment to be more easily accessible."
-
"How do I let my Local Health Jurisdiction know about a COVID case for my business?"
-
"Where can I get tested for COVID and how do I make an appointment?"
Interview Key Insights
-
Users prefer web pages that present information in an easily digestible format.
-
They value relevant quick links to different pages for efficient navigation.
-
Users prefer a website with a more welcoming and approachable feel.
-
Many users experience difficulty finding the specific information they need.
user personas
Using insights from user research, I created user personas representing different age groups and lifestyles. This approach allowed me to focus on users' needs, goals, and behaviors while ensuring inclusivity across the target audience.
Tracy
A 46-year-old married female administrator for skilled nursing facility living in San Ramon, CA.
About
Tracy is an administrator at a Skilled Nursing Facility in San Ramon, responsible for staying updated with the latest guidelines from the CDC and the California Department of Public Health. Over the past two years, she has navigated the challenges of COVID-19, striving to minimize exposure risks within her facility. To ensure her mitigation practices are current, Tracy relies heavily on Contra Costa Public Health Services for support in keeping her staff and residents safe from various communicable diseases.
Given her dependence on local health guidelines, Tracy frequently checks the Contra Costa County Public Health website multiple times each week for the latest COVID-19 information. This helps her stay informed and implement necessary measures to protect her facility.
MOTIVATIONS
-
Ensures she is current with all the latest health orders.
-
Maintains regular communication with the Contra Costa Public Health Department.
-
Adheres to all health orders to effectively protect staff and residents.
NEEDS & GOALS
-
Requires the website to be more navigable to easily access the latest information.
-
Needs a more straightforward way to contact someone for reporting a COVID-positive case.
-
Seeks a system for efficiently scheduling vaccines for all staff and residents at her facility.
FRUSTRATIONS
-
She experiences difficulty navigating the website effectively.
-
She prefers to quickly look up questions online rather than contacting Contra Costa Public Health by phone or email.
-
She needs a more intuitive way to access and retrieve necessary information.
Marc
A 36-year-old married consultant living in Brentwood, CA.
About
Marc is a consultant based in Lafayette, California. Married with two young children, he resides in Brentwood and travels to various parts of the Bay Area for work, using BART for his daily commute. His role involves constant interaction with diverse individuals, necessitating weekly COVID testing. He frequently searches for testing locations and needs a straightforward method to access his test results to promptly notify relevant parties in case of exposure.
Relying heavily on his cell phone's mobile browser to find testing sites, Marc often uses the Contra Costa County Public Health website. However, he finds the mobile version of the site as confusing, if not more so, than the desktop version, making it challenging to book appointments efficiently. This adds unnecessary difficulty to his efforts to stay compliant with testing requirements and keep his work and family safe.
MOTIVATIONS
-
Prioritizes safety due to frequent travel for work.
-
Needs regular testing to ensure the safety of his loved ones.
-
Is concerned about his aging parents' health and seeks to protect them.
NEEDS & GOALS
-
Requires the website to be more user-friendly for accessing the latest information.
-
Needs an easier method to locate testing sites and vaccine information.
-
Seeks a straightforward way to find all necessary COVID-19 information.
FRUSTRATIONS
-
He feels disoriented while navigating the website.
-
The website is overwhelming and makes it difficult to locate necessary information.
-
The mobile version of the site is equally overwhelming as the desktop version.
Mary
A 26-year-old single female architect living in Pleasant Hill, CA.
About
Mary is an architect at a design firm in Walnut Creek, California. To save for a house, she moved in with her grandmother in Pleasant Hill, where she provides care and accompanies her to medical appointments. The pandemic has heightened Mary's sense of responsibility, motivating her to ensure her grandmother's safety by regularly reviewing health articles and websites to stay informed on the latest trends.
Mary frequently visits the Contra Costa Public Health website to locate COVID-19 testing sites and schedule vaccinations for herself and her grandmother. Despite her tech-savviness, she finds the website challenging to navigate, feeling lost and confused while searching for information.
MOTIVATIONS
-
Ensures she is current with all the latest health orders.
-
Maintains regular communication with the Contra Costa Public Health Department.
-
Adheres to all health orders to effectively protect staff and residents.
NEEDS & GOALS
-
Requires the website to be more navigable to easily access the latest information.
-
Needs a more straightforward way to contact someone for reporting a COVID-positive case.
-
Seeks a system for efficiently scheduling vaccines for all staff and residents at her facility.
FRUSTRATIONS
-
She experiences difficulty navigating the website effectively.
-
She prefers to quickly look up questions online rather than contacting Contra Costa Public Health by phone or email.
-
She needs a more intuitive way to access and retrieve necessary information.
wire framing
Using insights from user personas representing different age groups and lifestyles, I began sketching out possible solution ideas for each user journey. This approach allowed me to focus on addressing specific needs, goals, and behaviors while ensuring the solutions were inclusive and effective for the target audience.
Low-fidelity wireframes
At this stage, I began sketching possible solution ideas for each user persona's journey. This allowed me to visualize and address the specific needs and pain points of different user groups.
Mid-fidelity prototype
At this stage, I transitioned from sketches to mid-fidelity wireframes, refining initial concepts and adding more detail to the design. These wireframes provided a clearer visual structure and layout, allowing for better usability testing and feedback collection.
Refine
To finalize the product, I focused on updating the design to enhance the overall navigation, creating a more user-centric experience. By streamlining the layout and simplifying the interface, I ensured that users could easily find the information they needed. The revamped design boasts a contemporary look with a sophisticated color scheme and sleek typefaces, fostering a sense of productivity, approachability, and ease of use. This approach, guided by usability feedback, significantly improved the site's navigation, making it more intuitive and user-friendly.
Style guide
The style guide created for the project ensures design consistency by adhering to the Material Design Guidelines. It incorporates a contemporary aesthetic with a sophisticated color palette and clean typefaces, promoting a sense of productivity, approachability, and ease of use. This guide provides a cohesive framework that enhances the overall user experience and facilitates intuitive navigation.
Original site
Redesigned site
Redesign Process
During the redesign process, I recognized the need for significant changes to enhance both the site's navigation and its overall appearance. The public health website serves healthcare professionals and all residents of Contra Costa County. To achieve a more user-friendly and efficient design, I concentrated on four key elements: Usability, ensuring the interface is intuitive; Consistency, maintaining uniform design elements; Visual Hierarchy, guiding users to important information; and Aesthetics, creating a modern and engaging look.
USABILITY
The redesign prioritizes usability, ensuring users can navigate and interact with the site easily. Intuitive interfaces, clear navigation paths, and streamlined content make it simple to find information quickly and efficiently. This focus on ease of use enhances the overall user experience, reducing confusion and frustration.
CONSISTENCY
The redesign emphasizes consistency by using uniform design elements across all pages, creating a cohesive user experience. Consistent typography, color schemes, and button styles help users quickly familiarize themselves with the interface, reducing the learning curve and enhancing usability, while also reinforcing a professional and reliable brand image.
VISUAL HIERARCHY
The redesign enhances visual hierarchy by clearly organizing content and highlighting key elements with larger fonts, strategic color contrasts, and prominent placement. This approach improves readability and helps users quickly find essential information. As a result, the overall user experience becomes more intuitive and effective.
AESTHETICS
The redesign focuses on creating a visually appealing and engaging interface. By using a sophisticated color palette, clean typography, and modern design elements, the site projects a professional and welcoming atmosphere. These enhancements improve both the overall look and user experience, making the site more enjoyable and satisfying to use.
high fidelity prototype
The finalized high-fidelity website offers a streamlined and visually appealing interface, ensuring users can easily navigate and find essential information. Enhanced visual hierarchy, consistent design elements, and modern aesthetics contribute to a cohesive and intuitive user experience. This redesign not only improves usability but also reinforces a professional and welcoming atmosphere.
Key Takeaways & Next Steps
Website redesigns require time
While working on this project, I anticipated that the process would take time, but I was unprepared for the lengthy bureaucratic hurdles. Once the initial delays were overcome, the process of implementing changes became much smoother. Ultimately, I am proud of the product I was able to create.
Mobile Optimization
Once I receive final approval for the site redesign, I will focus on mobile optimization to ensure it reads well across phones, tablets, and computers. I understand that this optimization will take time, so I will meticulously attend to every detail to ensure perfection. Taking my time will ensure the site is fully optimized for all devices.