User research, prototyping, concept validation, design system


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


4 weeks

Essential Questions

How to design a search experience for users who aren’t sure what they are looking for?

How can a search experience be educational?

  • How do child welfare workers use data?

    To develop an intuition for how child welfare workers approach data, information sessions were conducted with CCWIP staff, and background research was conducted on California’s child welfare system. A matrix of use cases was developed that outlined not only the various user groups, but their data-relevant characteristics, as well.

  • Framing the opportunity

    Conversations with CCWIP staff and a content audit of the existing site revealed three critical issues: unclear hierarchy (users don't how to find data they need), lack of guidance (users don't always know what metric to look for) and poor navigation (users need to jump between measures and reports). Synthesizing these issues into a single problem statement gave structure to the project and the team’s design approach.

  • How might the selection experience also educate users on the process and technical details of a license?

Prioritizing a single user group

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.

  • Modeling the intended interaction

    With a design objective and primary user defined, the team defined an ideal user flow through the CCWIP website. This would become the bedrock user flow onto which the rest of the website was designed.

Creating an information architecture that supports both novice and advanced users

Persona 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 popular reports that was also incorporated.

Choice overload was leading to long load times and excessive navigation

CCWIP’s existing site required users to complete a three-step process to arrive at a single dataset. Since an average session requires over a dozen reports, users were forced to endure hours of unnecessary load times and duplicative navigation.

  • Design for lateral navigation between reports

    To support the kind of movement across the site that users needed, the report navigation experience was designed around users’ mental model of how to find information. Starting first with their geography of interest and timeframe, users next consider the specific measure and will reference a visualization for confirmation. Sub-groups and specific notes are sometimes required to verify details and changes.

Other interactions considered for the reporting page

Interface components were prototyped with CCWIP staff to identify the mechanism(s) that would be most useful to users, in finding their reports.

The team was most interested in learning what information needs to be customized versus default. Ultimately, a blend was suggested that utilizes pre-configured reports, along with similar report suggestions.

  • Pre-configured reports

    In this option, a single report is displayed with configurable settings. This would be ideal for users who often use the same metrics, but need frequent fine-tuning. While ideal for advanced users, the majority need broader customization, at a higher level.

  • Most popular reports

    Surfacing most popular reports would give users a dynamic list of the most useful reports. This would have been an ideal choice, if not for the fact that reporting metrics vary significantly between regions and agencies.

  • Small multiples

    The brute-force option, this design would essentially give users a high-level overview of many different reports and give them tooling to continually refine the filters they apply to these reports. While an ideal design, it would have required quicker loading of more data than the existing backend was capable of.

Final design: hybrid of pre-configured and similar reports

The final design transforms a three-step process into a single, manipulatable interface by loading a pre-configured (but customizable) report, along with similar report suggestions. Not only does this simplify the experience, CCWIP staff realized that it would dramatically improve querying response time, as well.

Creating a design system for sustained development

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.

  • Prioritizing suggested changes in a product roadmap

    As a small development team, CCWIP staff would not be able to immediately implement very much of the proposed design work. To help them triage their own efforts, suggested 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.

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 deployment of usability concepts throughout ensures that the site is intuitive and consistent.

  • Impact

    Final designs, project roadmap, and Zeplin-ready design system were presented and turned over to the client in the fall of 2018. While the client began immediately implementing back-end changes to the site’s information architecture, a 2020 grant allowed staff to completely overhaul the platform, stylistically bringing it in-line with existing UC Berkeley design standards. Many of the recommendations can be seen in the live site, today.

  • “We asked you to focus on our power users, but your design actually addresses the needs of all our user groups…you solved for more than we knew we could even ask for”
    – Wendy Wiegmann, CCWIP Project Director