California Child Welfare Indicators Project (CCWIP)

CCWIP plays a critical role in transforming raw data from the California Department of Social Services into publically available performance reports for policymakers, child welfare workers, researchers, and the general public.

CCWIP’s website is the primary delivery mechanism for these reports, but ten years of continuous development had left the site bloated, with reports frustratingly difficult to find.

A student team from INFO 290: Product Studio Design was engaged to redesign the website focusing particularly on the data querying tool.

Client

The California Child Welfare Indicators Project

Duration

4 weeks

Team

Conner Hunihan
UX Designer
Ashish Sur
UX Designer
Kaushiki Priyam
UX Designer
Katherine Qiu
UX Designer

Personal Skills

User Testing
Prototyping
Design System

Building Empathy for Childwelfare Workers

Our design process began by developing an intuition for how these workers do their job. Understanding who they are and what they are trying to do is a critical first step towards designing an intuitive solution. Two information sessions were conducted with CCWIP staff, as well as background research on California’s child welfare system.

How do child welfare workers use data?

To understand the role of data in child welfare, a matrix of use cases was developed that outlined not only the various user groups, but their data-relevant characteristics, as well.

Use Case Matrix

The CCWIP website caters to numerous distinct user groups, so taking a comprehensive approach allowed the team to maximize the impact of the four-week project scope.

Issues with the CCWIP SITE

In addition to user research, an exploration of the existing CCWIP site was undertaken, including a complete content audit. This helped the team develop an intuition for the kind of content CCWIP produces, and to begin to understand where gaps currently exist, and why those gaps are problematic.

Content Audit of Existing Site

Content audits always unearth hidden treasures. In CCWIP's case, the team discovered an entire microsite embedded under a single link.

Project Insights

Research crystalized around three pivotal insights that became the guiding principles of the design:

Unclear Hierarchy
Users don't how to find data they need.

No Guidance
Users don't always know what metric to look for.

Poor Navigation
Users need to jump between measures and reports.

Project Scope

Framing the right question is an essential step in turning research insights into design opportunities. The team utilized 'How Might We Statements' to help frame these opportunities and guide our solutioning:

How might the search process help analysts discover data they don't know they are looking for?

Target Users

Collaborating with CCWIP staff, two personas were developed to represent two of the keys users of the CCWIP website: County Analyst John and Reporter Amanda. County Analyst John was ultimately selected as the most critical persona to design for because he represents the largest population of users on the CCWIP site.

Primary User Persona – "John"

John was developed further by identifying two potential use cases. The first was John using the CCWIP website to rewrite the county System Improvement Plan (SIP), an exhaustive endeavor that analysts undertake once every five years. The second use case involved John using the CCWIP website to evaluate the county's SIP plan. This is a much less intensive, higher-level use of the site and was ultimately chosen as the use case to design for.

User Flow

With a design objective and primary user defined, the team developed a mental model for the ideal user flow through the CCWIP website. This would become the bedrock experience on top of which the rest of the website would be designed.

Site User Flow

The challenge laid in designing a system that could guide advanced users directly into the report they needed, while also allowing for novice users to cycle between measures and explore reports laterally.

Organizing Site Content

Supporting both novice and advanced users

John doesn’t always know what report or measure he is looking for, so the site was organized around the actual "Measures” themselves, as well as categorical “Topics”. This created a more flexible navigation system that caters to seasoned veterans, as well as analysts who might be exploring a new data domain. The site already had a personalized dashboard feature of most populare reports that was also incorporated.

Site Information Architecture

Organizing the site’s content around both measures and topics affords multiple entries to users. This allows for beginners to explore and discover what it is they need without compromising advanced users’ ability to drill down into their content, unrestricted.

Interface Design Iterations

There is no substitute for the feedback generated by actual users working with real prototypes.

While the team had focused soley on how to funnel users into content, when homepage layouts were prototyped with CCWIP staff, features like "Announcements” and “Research and Training” were identified as high-priority, and needed to be incorporated.

Landing Page Wireframe Iterations

Prototyping homepage designs with CCWIP staff revealed that data sources are frequently updated by the state. The "Announcements" section of the current site logged these changes, but was burried. Elevating this feature to prominence on the landing page would save analysts countless hours of headache.

MEAURES PAGE: PROTOTYPING LAYOUT COMPONENTS

Prototypes of the reports page were also shown to CCWIP staff, who helped determine that a tab layout offered the multiple layers of orgnaization that the measures content required.

Measures Page Wireframe Iterations

A tab layout allowed for sub-categorizations of measures, affording an intuitive, secondary level of organization.

Reports page: facilitating lateral navigation between reports

John usually needs to reference multiple datasets in multiple reports, so it was critical to design a mechanism that allowed for lateral movement across the site.

CCWIP’s existing site required users to complete a three-step process to arrive at a single dataset. Compounded over a dozen reports that needed referencing to compile a typical Improvement Plan, this amounted to hours of unnecessary, duplicative work.

Existing Flow to Pull a Report

The existing report pulling process was a multi-step process that required extensive configuration.

To streamline this process, report information was first prioritized according to John's mental model of how to evaluate a report.

Mental Model of How Analysts Evaluate a Report

The system should be designed around the user's intuition. Modeling their mental model provides a foundation for the design of the future reports page interface.

Interface components were then prototyped with CCWIP staff to refine the mechanisms used to offer users control.

Critically, the team was interested in differentiating between what needs to be customized, and what can be relegated to a default setting. Ultimately, a combination was suggested for the final design: surface pre-configured reports along with similar report suggestions.

Pre-Configured Reports

Single report displayed with configurable settings.

Most Popular Reports

Single report displayed, with multiple, similar reports suggested.

Small Multiple Reports

Multiple reports displayed with temporal changes highlighted.

The final design transforms a three-step process into a single, manipulatable interface. Not only does this simplify the experience, CCWIP staff realized that it would dramatically improve querying response time, as well.

Final Design of Report Page

Design System

Building on CCWIPs existing branding, a comprehensive design system was developed. The U.S. Web Design System was used as a boilerplate template, customized with CCWIP typography, colors, and UI components.

The design system was uploaded to Zeplin so that CCWIP developers had direct access to exact CSS properties and values.

Design System: Icons, Color, Type, Buttons

A design system was created around the CCWIP-blue. Sans-seriff typefaces Muli and Hini provided the digital ledgibility required.

Design System: System Messaging, Forms, Layout

UI components were further defined in the system, including cards, system warnings and notifications, tags, tiles, forms, as well as spacing for the standardized heading and footer.

Final Deliverables

Improving Overal Usability

Aside from content reorganization and branding, a number of usability improvements were introduced, including: a breadcrumb system to better orient the user, a navigation bar and footer that differentiate non-essential links from navigational elements, and standardized UI components that create platform conventions.

Standardized Breadcrumb, header, and footer

IMPLEMENTATION ROADMAP

All required changes were defined and scored in a spreadsheet along dimensions of impact and effort. These values were used to calculate an overall priority score that can be used by CCWIP staff for help determine the project roadmap.

Implementation Roadmap

Effort and Impact of all proposed changes were evaluated. These scores were used to calculate an overall priority.

Final Prototype

The final facilitates the analysts quest to find the data they are looking for by catering to both beginner and advanced users. Centering the design around lateral movement between reports keeps data exploration at the center of the experience, and deplopyment of usability concepts throughout ensures that the site is intuitive and consistent.

Impact

Feedback

Final deliverables were shared with the client four weeks after the initial kickoff. Aside from sharing feedback on the final product, clients expressed gratitude for the user-centered process that we helped impart throughout the project.

“We asked you to focus on our technical users, but your design actually addresses the needs of both main user groups…you solved for more than we knew we could even ask for”

– Wendy Wiegmann, CCWIP Project Director

"The clean, simplified look of the new design is the result of your team's innovative ability to transform a complicated site into one that's now intuitive and user-friendly. We were greatly impressed by your team's technical expertise, the collaborative approach to our project and the adept conceptualization of detailed information. Thank you for delivering an excellent product that far exceeded our expectations."

– Markus Exel, CCWIP Software Engineer