A collaborative transformation for the National Archives Museum

Project type

Web

My role

Lead UX Designer

Company

Agileana / National Archives

Year

2023-2024

Collage of design elements and home screen for the national archives museum

Why this project is important?

This project is a testament to the power of effective collaboration in the design process. By involving stakeholders at every stage, we were able to create a shared vision and ensure that the final product met both user and business needs. As a high-visibility website, the project required careful coordination and clear communication. This led to a process where everyone’s input was valued and considered. This process was then documented and used as a foundation for Agileana's design approach.

Project and Contribution Summary

The National Archives Museum website was redesigned to mirror the museum’s generational renovations. capturing its new look and feel in an online experience. The updated site provides access to visit, event, and exhibit information that celebrates the nation’s history and inspires connection with America’s story.

What I did:

  • Standardized UX process: Initiated the development of a standardized design process based on this project to streamline UX work within the organization (Agileana).
  • Aligned UX Strategy: Developed a UX strategy that aligned with both user goals and business objectives.
  • Owned end-to-end design: Took ownership of the end-to-end design process, starting with initial research to understand user needs and pain points and ending with a final design.
  • Stakeholder workshops: Organized and facilitated workshops with stakeholders to gather insights, define requirements, and build consensus.
  • Progress presentations: Regularly presented design progress to stakeholders and facilitated feedback sessions to gather insights and refine the direction.
  • Design system: Customized the U.S. Web Design System (USWDS) to meet the specific branding and visual identity needs of the project while maintaining accessibility.

Goals

  • Create a design based on the United States Web Design System (USWDS)
  • Make sure the website is accessible and meets WCAG standards
  • Mimic the physical museum space in the look and feel

 

What happened:

  • Created documentation for the foundation of an organizational (Agileana) design process.
  • Designed an accessible website that met WCAG standards
  • Introduced a fresh design that aligned with the organization’s goals and brand identity
  • Design received positive feedback from stakeholders
  • Improved navigation and usability resulted in a more intuitive user experience
 

Mockups

Desktop home page

Mobile home page

Exhibits

Exhibit detail

Crafting a user-centered process

This section outlines the user-centered design process used for this project, which became the standard for the organization. From research and workshops to prototyping and testing, the process ensured alignment between user needs and client goals

✦ Established a baseline for improvement

Identified pain points and understood user behavior

Led a comprehensive evaluation to identify pain points, understand who the users were and their behavior. Conducted heuristic analysis, cognitive walkthroughs, and analytics review to establish a solid foundation for informed design decisions.

A zoomed out view of screenshots and notes for a cognitive walkthrough of the national archives websites. The image also shows examples of how competitive websites handle the same flow.
A collection of home page hero sections of various competitive websites

✦ Understood the competitive landscape

Researched industry standards and identified opportunities for differentiation

This analysis informed visual style and information architecture, ensuring alignment with both user needs and market trends.

✦ Unified the vision

Facilitated collaborative design to ensure stakeholder alignment

Conducted workshops to align project goals around brand identity, user experience, and content strategy, ensuring shared ownership of design decisions.

Cards with design adjectives and dots from the workshop dot voting activity to decide look and feel
Screenshot of workshop information architecture card sorting document with commenting
The color palette for the national archives museum as seen by different types of color blindness
Flow chart of a proposed navigation that will be used for a user tree test

✦ User feedback and accessibility testing

Validated navigation and accessibility to optimize usability

Ran tests with users to confirm effective navigation and reviewed designs for accessibility. 

✦ Refined iteratively

Led the design process to achieve a user-centered solution

Guided the design from initial wireframes to polished visuals, ensuring alignment with user feedback and brand identity while preparing for a smooth development handoff.

A wireframe for the national archives museum showing the header, home page hero, exhibits, cta section, and footer
Design process documentation made for the company that include stages such as onboarding and introduction, discovery, concept and design, user feedback, iteration, and implementation

✦ Built a foundation for a scalable design approach

Documented the design process for organizational alignment

Compiled a document detailing the design process used in this project, creating a reference to guide future projects and establish a unified approach across teams.

Let's talk more about this project