User research, prototyping, concept validation, design system
Conner Hunihan (UX Designer)
Ashish Sur (UX Designer)
Kaushiki Priyam (UX Designer)
Katherine Qiu (UX Designer)
How to design a search experience for users who aren’t sure what they are looking for?
How can a search experience be educational?
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.
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?
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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