This case study is password protected
Enter the password to view.
Federal Government
CMS Macrosite
Problem Overview
Starting in 2018, all government websites were mandated by law to meet AA WCAG accessibility standards. Meanwhile, many government agencies were still operating in one-off HTML sites rather than consolidated CMSs. One such agency, Fish and Wildlife Service, hired my employer, Limina UX, to help in adopting a CMS and a UI framework to support its 600+ micro-sites (upwards of 25k individual pages), its national site, and 20+ database integrations.
The Goal
The primary goal was to create a CMS for the government agency to load all their content into a consolidated library, and design pages that allow windows into that content, giving them the ability to create content-rich pages without duplicating efforts or creating inconsistencies.
Process At A Glance
- Understand findings from a huge amount of user research
- Discover all the types of pages of the existing site
- Requirements gathering and prioritization
- Granular scoping of how much time we needed to design the site
- Information architecture
- Interaction workflow modeling
- Content strategy (taxonomy and page outlines)
- Navigation model testing
- Producing quick wireframes
- Leading design reviews and testing
- Quality assurance and revisions
- High-fidelity prototyping
- Creating an extensible design system
- Meeting WCAG AA accessibility requirements
- Process tracking
- Leading client reviews
- Mentoring junior and peer designers
My Contributions
Research and Analysis
Before designing a new site, I studied and analyzed the existing content across the 500 micro-sites so I could design an information architecture and design system to house all their content in a consistent manner. I used InVision to document and categorize the types of pages I found, which helped identify all the various user persona workflows.
Tracking User Persona Needs
After analyzing the site contents and reading through all the user researcher's findings on personas, I documented the different persona needs in a spreadsheet to identify the components needed to meet those requirements.
Interaction Modeling
For complex areas of the site I used a whiteboard to model and diagram how users would drill down and back up the different levels of the species taxonomy, and defined how much information we would show at each level.
Content Strategy and Templatization
With over 74 different types of pages across the 600+ microsites, I translated the components identified in my content analysis into outlines before wireframing, defining whether content was dynamic or static, sort order and display rules of lists, and necessary filters and refiners. I tested and vetted content outlines in design reviews with a user researcher, visual designers, the technical lead, and solution architect — helping identify which elements were more frequently used across many pages so a given element wouldn't need to be wireframed more than once.
Creating a Design System
Working with 6 other designers and separate engineering teams on such a massive site required creating a design system and organizing contents with a consistent file naming convention usable across all design and technical deliverables. We used Sketch with Abstract as our file manager (this was before Figma) — since Abstract was an early-stage technology at the time, it took some troubleshooting and restructuring to break our files into smaller chunks to meet file size restrictions.
Responsive Web Templates
In documenting the design system, I created a glossary of templates with mobile and desktop breakpoints, including specifications on responsive resizing, stacking order, and preliminary "rules" to determine which pages can have certain features such as a hero/banner image, left rail sub navigation, and right rail content. I created templates for search result lists, content detail pages, landing pages, and form pages.
Wireframing
As interaction designer, my task was to define the content and workflow for each page to meet users' needs and fulfill project requirements. I created a full set of wireframes complete with defined interactions, content placeholders, and annotations to hand off to a visual designer and solution architect.
High Fidelity Prototypes
After vetting the wireframes, I took a subset of pages to high fidelity, and in some cases created clickable prototypes in InVision to illustrate the user journey to the client and get final sign-off. Once the design was finalized, I provided technical annotations to inform engineers of component naming and other subtle details so the intent of the design wasn't lost in the build.
Challenges
Designing such a massive site presented some complex challenges.
Progress Tracking and Communication
A process tracking sheet I created for designers to check off as they completed each step, so the technical team lead could see when pages were ready for technical specification and implementation.
WCAG AA Accessibility
The federal government requires that all its websites be AA compliant. I gathered the AA requirements, sorted them by who would be responsible for fulfilling them (design vs engineering vs content writers), and documented the steps we would take to solve each requirement.
Massive Macrosite
We had to give users a single access point via a national website to accommodate all the services offered by the government agency, and provide homes for all the disparate information. One of the most complex problems was creating microsite templates for the 600+ regional facilities and offices spread across the states and territories. In all, we unified 600+ individual HTML/Dreamweaver-built websites into 1 Drupal CMS with over 200 content types and 99 systems integrations for an organization of over 9,000 employees.
Siloed Client Orgs
Many of the localized divisions and offices had very little means or incentive to communicate with each other. In order to design microsite templates and consolidated databases, we had to reach outside of product design norms and create the organizational structures within the agency to get communication started. The outcome was significant changes in breaking down silos and creating and empowering leaders on the client side who could continue the UX and CMS efforts even after our consultancy completed the website build.
End Result and Impact
The difference I made was deeper than a visual facelift. I created an experience that worked seamlessly for all types of users — accommodating color blindness, visual and hearing impairment, epilepsy, and audiences of all ages and reading levels. I also made many improvements for the agency as a whole — making it easier for content creators to upload or update content, and to cross-promote content without duplicating effort. I also provided value outside of technology — initiating organizational groups within the agency to advocate for governance of desired content creation practices, and instituting groups with representation from a variety of the agency's locations and organizational units to lead continued efforts of content management, data management, UX management, and more.
Check out the live site today at fws.gov.
Lessons Learned
- WCAG compliance
- Designing for the Federal Government meant going beyond web page design and into facilitating organizational change, including building committees to break down silos and open collaboration among regions, facilities, and divisions
- The earlier it is in the design process, the easier it is to bring in new designers and team members
- Methods of onboarding employees
- Entity relationship diagramming
- Content strategy