Back Arrow Icon

Deloitte x SCADpro - Diabetes Prevention B2B Web Design

Redesign a federal health agency’s customer service center website, improving usability and accessibility for 1,400+ health organizations.
Timeline
Jan-Mar. 2025
Role
Product Designer/UX UI Designer
Skills
Accessibility/Communication/Wireframing
Team
1 Project Lead / 8 Researchers / 8 Designers / 3 Illustrators

SCADpro is a collaborative design studio that connects current and future art and design professionals with business leaders to find creative and innovative solutions for real-world challenges. I was honored to have been selected as one of the team members for the Spring 2025 SCADpro X Deloitte project.

Project Overview

Our team collaborated with the CDC to redesign the Customer Service Center (CSC) website that supports over 1,400 diabetes prevention programs.

Problem

While the platform provided essential tools, many program organizations struggled with poor navigation and complex workflows, making it hard to find resources and hindering effective prevention work.

Goal

Enhance the design, navigation, and accessibility of the CSC so users can find relevant and appropriate resources on time.

My Role

01   Drove the end-to-end UX process—from synthesizing user research into design strategies to building wireframes and interactive flows.

02   Partnered with stakeholders to validate ideas and iterated based on feedback, ensuring the final experience was clear, accessible, and aligned with user needs.

03  Also supported communication through concise, stakeholder-friendly design presentations.

Project Results

A Little Background Story

The CDC’s Customer Service Center (CSC), a Salesforce-powered digital platform, supports over 1,400 National Diabetes Prevention Program organizations by providing essential training materials, interactive toolkits, and multimedia resources.

97.6 million U.S. adults have prediabetes.

Prediabetes has grown from 38 % of U.S. to 46.6 %.

Who is our user?

Healthcare organizations and support staff who deliver or assist with lifestyle change programs. They rely on the platform for training, technical support, and implementation guidance to better serve their communities.

One key constraint in this project was that we couldn’t directly reach or interview the primary user group due to privacy regulations and access limitations.

To address this, we collaborated with the client to interview former project staff and independently recruited individuals with or at risk for type 2 diabetes. These insights enabled us to understand user needs and design a platform that effectively supports both administrators and end-users.

Our Vision

Transform the CDC Customer Service Center (CSC) into a user-friendly, accessible platform that enables public health professionals to navigate resources efficiently while ensuring compliance with federal standards.

Design Comparison

Quick Design Preview

Simplified Navigation, Smarter Access

Reorganized the top nav and surfaced key tools like the calendar and support center—helping users find what they need, faster. These changes help users navigate with confidence and position the site as a true self-service platform.

Finding Resources

View a success story article, bookmark it, and continue reading more related content. We repositioned filters, refined visual hierarchy, and introduced scannable key points—making the CDC resources page easier to navigate, quicker to absorb, and more interactive for every user.

Empower self-service - Ask for help

We redesigned the Support page to prioritize self-help by placing visual FAQs and categorized help topics up front, making answers easier to find and encouraging users to resolve issues independently. The “Ask an Expert” form is positioned as a final step, streamlining the journey while reducing reliance on direct support.

With users in mind, we turned a cluttered experience into a new, intuitive, and engaging journey

1. Navigating with ease – A smarter first impression

Challenge

The original homepage was cluttered with text and repetitive icons, lacking visual hierarchy and clear calls-to-action, which confused users and made key tools hard to find.

Solution

We streamlined the layout with intuitive navigation, clear CTAs, and quick access to essential tools. Events are easier to browse and save, while testimonials build trust through real-world impact.

2. Improved Structure – Easier Access to Essential Resources

Challenge

An overly long navigation menu, repetitive categories, and a lack of visual separation made it hard for users to find relevant resources and understand content structure.

Solution

We reorganized the layout and refined the interface to improve discoverability, helping users locate the right information faster and with less friction.

Before we dive into our design process, here’s what made us rethink everything: What's the problem?
Is the current website actually user-friendly? The answer is "No"
Understanding

Primary Research - Current Website Exploration

We conducted an initial audit of the current website to understand how users were interacting with the platform. The data revealed several usability concerns.

Website Audit

Over half of users exit after one page, indicating poor navigation, limited content discovery, or low engagement.

Primary Research - Current Website Usability Testing

To understand how users of the CSC experience the website and identify potential areas of improvement, our team conducted user testing. Our user testing revealed key usability challenges within the CSC platform, particularly in navigation, resource accessibility, and task efficiency.

Users Comments

Testing Insights - Key Problems of Current Site

Sensory Cue - Color

One design debate followed us through the entire 10-week journey: Green or Blue ? Each of us had our own preferences — some leaned toward green for its freshness, and others liked blue for its calmness. But ultimately, it wasn’t about us. We performed sensory cue testing to discover which color palette would most successfully translate the website's meaning, and users were able to share their thoughts about how the different palettes made them feel.

What would our users respond to?

To dig deeper, We gathered 20 responses, and a clear theme emerged. Most people associated blue with trust and security — values that strongly align with CDC’s branding.

On the other hand, those who preferred green linked it to healing and wellness, but some noted that too much of it felt overwhelming. This gave us the clarity we needed to move forward with a more intentional, user-driven color choice.

What can we do better or differently? We started by listening to the numbers and learning from others.

Design Opportunities

We analyzed leading healthcare websites to understand their navigation structures, content organization, and accessibility strategies.

With insights from our research and usability testing, this analysis directly informed our early design decisions that directly address users’ key pain points. These insights guided our design direction from the start.

let's talk about how we get to the final design.
Imagining the solution

Ideation and Iteration

We identified major IA pain points in the current website, including overlapping categories and unclear navigation. By conducting competitive analysis and usability tests, we simplified the hierarchy, merged redundant sections, and relabeled content to align with user mental models and improve discoverability.

Mid-Fi Wireframs Testing

Following the mid-fidelity design phase, we conducted usability testing to evaluate the effectiveness of our proposed functionalities and visual elements.

We conducted A/B testing with 21 participants to compare task completion times between the current CSC website and our redesigned version.

Additionally, we tested two color variations to evaluate user preferences and accessibility.

Does it really work for real users?
Mid-fi Testing and Iteration
After completing our mid-fidelity designs, we conducted usability testing with five participants and quickly iterated based on their feedback. This helped us validate key features early and refine core interactions without overinvesting in high-fidelity details.

1. Homepage before and after

2. Resources page before and after

3. Support page before and after

4. Ask for help page before and after

5. My activity page before and after

Design System

System Thinking for Scale, Streamline the Design + Dev Process

As Design Co-lead, I created a new style guide and helped build a custom design system from scratch to unify the National DPP website. We addressed the lack of structure within Salesforce by standardizing color, typography, and components, improving visual hierarchy, consistency, and accessibility across all pages.

Want to see the full picture? Check out all the final screens and results at the end.

Easy onboarding – Confidence starts here

Challenge

Usability testing revealed that the page felt outdated and disconnected, with users frustrated by having to type and track confusing organization names manually.

Solution

We streamlined and clarified the sign-up flow, making it quicker, more approachable, and visually aligned with modern UX standards, enhancing user confidence.

A clear path to the website mission

Challenge

Cluttered content and weak visual hierarchy made it hard for users to find key information or take action, and there were no strong CTAs to support onboarding.

Solution

Improved visual structure highlights the National DPP’s mission and key resources, with a clear CTA, a newsletter sign-up awaits, inviting continued engagement.

Modern Discussion Board - Organized Discussions & Better Connection

Challenge

An overly long navigation menu, repetitive categories, and lack of visual separation made it hard for users to find relevant resources and understand content structure.

Solution

We reorganized the layout and refined the interface to improve discoverability, helping users locate the right information faster and with less friction.

Unified Support Hub – Instant Answers & Seamless Help

Challenge

The original interface exhibited fragmented user flows between the FAQ and Contact functions, compounded by redundant entry points and insufficient information.

Solution

We redesigned “FAQ” and “Contact Us” sections into a unified Support page with visual FAQs and clear category segmentation, streamlining navigation and reducing cognitive load.

Our Belief
Together, we can redefine the CSC website to better serve and empower its users for the future.

Takeaways

1. Leveling Up on Accessibility

This project pushed me beyond WCAG checklists to truly embed digital inclusion into my design DNA. I learned to design ethically and empathetically, making accessibility a foundational element, not an afterthought.

2. Fueling Intuitive User Experiences

I saw firsthand how a robust Design System isn't just about efficiency. It's the engine driving a cohesive and intuitive UX. My understanding of how to build and leverage systems for maximum user experience impact definitely leveled up.

3. Bridging the gap between designers and developers

This was a masterclass in the designer-developer dance. I learned to speak ' feasible' fluently, anticipating technical constraints to design user-centric solutions that are innovative and buildable, fostering a truly collaborative workflow.

Thanks for being here. See you on other projects! :D
Live Project
Text Link
Next Project
Dormbo