Black Heritage Society of Washington State
DURATION
TOOL
Role
Method
Project Overview
The Black Heritage Society of Washington State (BHS), steward of the state's largest Black history collection, needed a full website redesign to replace its outdated 2000s platform.
Through multiple rounds of research and testing with 30+ users, and iterative development of information architecture and prototypes, we delivered an engaging website featuring BHS's rich archival collections and community programs.
Research & Design artifacts
Timeline
Project Background
Client: Black Heritage Society of Washington State (BHS) - stewards of the largest public collection of Washington State Black history.
Challenge: BHS's website design hasn't been updated since the 2000s, which hinders user experience and limits community engagement.
Goal: Redesign a modern website that makes historical collections accessible online while encouraging user inquiry and exploration.
bhswa.org
Home Page
bhswa.org
Collections Page
bhswa.org
Events & Meetings Page
Current Information Architecture
Final Design
Browse All Offerings
Get an overview of BHS’s featured events, collections, latest news, and engagement opportunities.
bhswa.org
bhswa.org
View Digital Collections
Explore the collections gallery, family legacy collections, and oral histories, or schedule an in-person visit.
Discover Local Events
Check out upcoming events, current exhibitions, and past highlights for engaging experiences.
bhswa.org
bhswa.org
Explore Current Initiatives
Stay updated on BHS news, ongoing projects, and collaborations with partner organizations.
Get Involved
Learn how to support BHS through donations, membership, volunteering, or partnership opportunities.
bhswa.org
bhswa.org
Access Resources
Find scholarship and internship programs, external resource links, contact information, and FAQs.
Updated Information Architecture
Uncovering Website Issues Through User Research
Participant Snapshot
Occupations: Nonprofit leaders, educators, students, archivists
Digital Literacy Levels: Moderate to very high
Primary Goals: View collections, attend events, explore local Black History, donate or get involved
Research Methods
Survey
Format: 12 participants, 12 questions via Google Forms
Focus: Quantitative feedback on site usability, layout preferences, and visual design appeal
User Interviews
Format: 3 participants, 60-minute remote sessions
Focus: Content clarity, emotional response, and user motivations and needs
Usability Testing
Format: 3 participants, 20-minute remote sessions
Focus: Task completion rates, navigation flow efficiency, and usability issues
Problem Analysis & Solution Strategy
🧭 Information Architecture
Key Issues
Cluttered and disorganized homepage
Confusing site navigation and terminology
Important content buried or easily missed
Broken or unclear links throughout the site
Redesign Approach
Streamlined homepage layout and content hierarchy
Renamed and clarified navigation categories
Resurfaced key information on hub pages
Audited and resolved broken links
🎨 Visual Design
Key Issues
Text too small and dense for readability
Design elements misaligned and inconsistent
Low-contrast visuals and unclear action buttons
Redesign Approach
Developed design system with BHS branding colors
Standardized typography, layout, and UI components
Improved accessibility compliance
📝 Content Strategy
Key Issues
Site lacking depth to showcase BHS’s rich legacy
Digitized collections and stories poorly featured
Outdated content across multiple pages
Redesign Approach
Added authentic images and updated content
Highlighted archival materials, exhibitions, and projects
Promoted community events and engagement opportunities
Identifying User Personas
Based on user research findings, we grouped users by shared motivations and behaviors through audience matrix and created a content audit. This identified three primary personas:
Content Seeker (Students, Researchers)
Interested in discovering and consuming existing content
Content Builder (Educators)
Focused on creating and sharing educational content
Community Builder (Non-Profit Staff)
Motivated to Foster community connections and engagement
Audience Matrix
Content Audit
Detailed personas and user/task matrix were created to map task frequency and importance across personas, revealing priority pages needed to support each user group’s goals.
Persona: Content Seeker
Persona: Content Builder
Persona: Community Builder
User/Task Matrix
Developing Information Architecture (IA)
Card Sorting
A comprehensive content list was developed based on BHS’s existing website structure and stakeholder input. Card sorting sessions were conducted with 9 participants, including key stakeholders from BHS.
Content List
The collected results were analyzed using generative AI tools and aggregated to inform the initial information architecture.
Information Architecture Draft
Tree Testing
To validate the proposed information architecture, I conducted unmoderated tree testing with 3 participants from Washington state via UserTesting.com, plus input from a key stakeholder.
Sample Tasks
Testing Results
Testing showed a 66% success rate across 16 tasks, revealing specific areas for refinement.
Key Finding #1: “Collections” vs “Archive” Confusion
Finding: The difference between “Collections” and “Archive” was not clearly understood by users.
Original IA
User Navigation Paths
Improvement: Remove "Collections" and "Archive" categories; keep "Collections Gallery" since "collections" encompass broader historical materials and curated groupings.
Updated IA
Key Finding #2: “Current” Label Misrouting
Finding: Users consistently navigated to “Current Events” when looking for exhibitions, indicating that “Current” resonates with how users think about ongoing displays.
Original IA
User Navigation Paths
Improvement: Replace “Current Events” with “Upcoming Events” and “Exhibitions” with “Current Exhibitions” to clarify timeframes and distinguish content types.
Updated IA
Based on these findings, we revised the information architecture.
Refined Information Architecture
Prototyping
Comparative Analysis
To gather inspiration for the redesign, we analyzed similar museum and gallery websites to examine their strengths and weaknesses across information architecture, visual design, and usability.
Analysis of the MET’s Website
Analysis of MOHAI’s Website
Mid-Fidelity Prototyping
Drawing from brainstorming sessions and research insights, I developed mid-fidelity prototypes to translate the refined information architecture into tangible user interfaces.
Prototypes of Key Screens
Usability Testing
We conducted task-based usability testing with 3 participants to identify remaining navigation issues and validate the prototype's effectiveness. Overall, the task completion rate was approximately 78%.
Key Finding: “Resources” Expectation Gap
Finding: Users expected “Scholarships” to appear under “Resources” as obtainable benefits rather than under “Programs” as participatory initiatives.
Original IA
User Feedback Summary
Improvement: Move “Programs,” including “Scholarships,” under “Resources” to align with user expectations and improve findability.
Updated IA
Final Information Architecture
We finalized the information architecture based on previous findings and additional issues identified during prototyping.
Final Information Architecture
High-Fidelity Prototyping
Based on the information architecture, we refined the design and created an interactive prototype. We then developed a design system with reusable components and used a mix of placeholder and real content for stakeholder demos.
Complete High-Fidelity Prototype Screens
Design System
Design Components
Outcomes & Future Directions
We set up Google Analytics on the BHS website to track user data. After our design is implemented, BHS can analyze this quantitative data to inform future design decisions and improvements. This approach has sparked interest from other partner organizations.
To drive organic traffic, we explored Search Engine Optimization (SEO) and proposed embedding relevant keywords in the code to improve indexing and ranking. We will work with engineers to enhance accessibility by adding alt text to images, providing context for brief CTA buttons, and implementing linked card designs.
Given more time, we would expand our user research and testing with a larger, more diverse group to validate our design prototype. We would also collaborate with stakeholders to update content and create a more welcoming, historically rich aesthetic.