Statewide Database
SWDB (Statewide Database) is a vital resource providing comprehensive access to California's election and census data. This platform is crucial for researchers, policymakers, and the general public who need accurate and up-to-date information.
I worked on the redesign of the SWDB website, focusing on a complete overhaul of the home page and revamping the data download experience. These improvements made the platform more intuitive, efficient, and accessible for users seeking public data.
Role
UX Designer
Duration
Jan - Dec 2023
Team
Heteng Li, Grace Thompson
Tools
Figma, After Effects
Homepage Redesign
Background
The previous SWDB homepage was outdated and presented significant usability challenges. Users often found it difficult to navigate due to poor readability, a lack of visual hierarchy, and overly complicated navigation. These design flaws made it challenging for users to locate essential information, resulting in an inefficient and frustrating experience.
Hero Section: Before
One of the first problems that emerged was the hero section. Initial testing reflected that users struggled with navigating and understanding its content.
Low Contrast
The hero section’s background image clashed with the hero text, causing poor contrast and making the text difficult to read.
Vague Language
The language used in the hero section was ambiguous, failing to clearly convey the site’s purpose and value to users.
Hero Section: After
To enhance the hero section for better readability, clarity, and navigability, we implemented the following solutions:
Improved Readability
We created a responsive scalable vector art background and adjusted the font size and color to enhance visibility, ensuring compliance with WCAG 2.1 standards.
Clear and Friendly Language
The copy was revised to be more direct, and friendlier, communicating the site’s purpose and benefits. Additionally, the title text was reformatted to a single line to enhance readability.
Page Layout: Before
Research findings showed that most homepage visitors were new users. The prior design struggled to effectively guide them in the following ways:
Text Heaviness
The site was predominantly text-based, overwhelming users with large amounts of textual information and making it difficult to quickly find the needed information.
Low Feature Discovery
Instead of using buttons and clearly defined sections, site navigation relied heavily on text links, making features hard to discover.
Poor Visual Hierarchy:
The lack of a clear visual hierarchy made it difficult for users to distinguish between primary and secondary information, further complicating navigation.
Page Layout: Solution
Clear, well-defined components such as cards, buttons, and sections were introduced to improve feature discovery and affordance, ensuring that users could easily find and access the site’s key features. This was later developed into a design system, establishing consistent styles and behaviors that made it intuitive for users to identify interactive elements.
Homepage Redesign: Outcome
The redesigned homepage significantly improved the user experience:
Increased User Engagement: The balanced text and visuals made the homepage more engaging, encouraging users to explore the site further.
Enhanced Usability: Clear components and improved visual hierarchy helped users navigate the site more efficiently, reducing frustration and increasing satisfaction.
Positive Feedback: User feedback post-redesign indicated a notable improvement in ease of use and overall satisfaction with the homepage experience.
Data Download Experience
Background
The data download experience on the Statewide Database is designed to provide users with access to election and census data.
This feature is essential for researchers, policymakers, and the general public who need information for analysis, reporting, and decision-making. The goal is to offer a seamless and efficient process for locating and downloading datasets.
Data Download Experience: Before
The previous design split the download experience into two steps:
1. Election Year Selection: Chronologically lists out each election.
2. Download Page: A table of download links for various data.
This information architecture was fragmented, with data sets scattered across multiple pages, making it challenging for users to locate specific information, resulting in a disjointed and inefficient user experience.
Moreover, each page relied heavily on links and acronyms without advanced filter and search functions to help user locate specific data sets they'd like to download.
Information Architecture Redesign
To address the fragmented information architecture, we merged the two separate pages into a single, cohesive page. This redesign eliminated the redundancy of having users navigate between the election year selection and the download page, creating a more streamlined and efficient user experience.
Filter Design A/B Test
We set out to improve the data download experience by designing both vertical and horizontal filters. Initially, the horizontal filter was favored because it provided a sense of familiarity for users transitioning to the new design. However, as we conducted user tests, the vertical filter proved to be more effective. Its compact design fit better with modern 16:9 and 21:9 monitors, offering a more efficient and user-friendly experience.
Early wireframes of the different filter designs
Component Details
After deciding on a vertical sticky filter design, we refined the UI details and created reusable components such as selection chips, banners, and dropdowns that could be adopted throughout the site.
Data Download Experience: After
The redesigned data download experience significantly improved usability and efficiency. Users can now easily locate and download datasets from a single, cohesive page. The vertical sticky filter, along with the refined UI components, provided a more intuitive and streamlined interface
Future Considerations
One improvement that I didn’t get to implement before leaving was updating the file type indicators within the data download form. Displaying different file types using distinct colors could further enhance the user experience by making it easier to identify and select the desired data format quickly.
