Statewide Database
Re-designed California’s Statewide Database website: a platform dedicated to providing free, nonpartisan census data to all.
Role: Product Designer
Team: Heteng (PD), Seth (PM)
Tools: Figma, Optimal Sort
Methods: Heuristic analysis, card sort, wireframing, user flow, style guide
Summary
Every ten years, local governments use new census data to redraw district lines to reflect how local populations have changed. The Statewide Database (SWDB) aggregates all of this data for California.
Problem: Although SWDB’s mission is to empower all with data access, novice and expert users struggle to understand and/or locate useful data.
Goal: Make it easier for researchers to quickly source data, and for novices to intuitively understand the database offerings.
Solution:
Actionable homepage content for both user groups
Augmented navbar to locate content
Filterable data tables to efficiently access data
Style guide to aid website comprehension
Heuristic Analysis
A heuristic analysis of the website helped familiarize with the existing website and identify 3 core opportunities to improve the homepage UX:
Reduce content & link repetition
Add visuals to inform users with less text
Reorganize navigation to help locate content
Discovery Interviews
I spoke with three SWDB users (experts) and three non-users studying Political Science (novices) to understand the needs of both user groups. The test included an Open Card Sort to understand how to redefine the website navigation.
Four groups emerged from the card sort: Data, resources/help, maps, home
Interview findings:
Experts enter via the homepage and memorize a series of clicks to get to their desired dataset. When they forget the series of clicks they remember using trial and error.
The homepage must help experts locate data
Users cannot precisely filter data and must develop tools to eliminate unnecessary data.
Data filtering would save researchers time
Novice users expect demonstrations and documentation to understand SWDB’s offerings.
The homepage should summarize SWDB’s offerings
Iterative prototyping
Considering the research takeaways as MVP features, I sketched three homepage wireframes to discuss feasible redesign options as a team. We converged the ideas into one wireframe and translated it into a digital mid-fidelity mockup.
Usability test
We iteratively developed a high-fidelity homepage for usability testing with SWDB users, and integrated feedback to create a final version (pictured right).
Homepage adjustments, based on usability test findings
A/B test
During the second half of the usability test, we A/B tested two filterable table approaches for the Election Data page. The majority of participants preferred the above-table filter version because it aligned with their mental model for filtering data (versus side filter which was associated more with activities such as online shopping).
Data page A: top filter (4/5 preferred)
Data page B: side filter (1/5 preferred)
Style Guide
Aaron compiled the website colors and components we had been using into a style guide to maintain future design consistency (thanks Aaron!).
Mobile prototype
Finally, we adapted the latest prototype for mobile.
Homepage
Datapage
Reflection
This project was highly iterative and provided experience in creating interfaces that enable novice and expert users to comprehend data-rich content.
We initially designed the data table page beyond a feasible scope, but this benefitted SWDB because they do not have a permanent designer. Designing beyond scope enabled us to intentionally scale back the design and provide a clear roadmap beyond our involvement with the organization.