top of page

CRS Design System

Project Overview

My Role
UX Designer

  • Created persona, user journeys map, and product structure to streamline ideas.

  • Created user-centered designs.

UX Researcher

  • Planned for the research process

  • Conduct background/ competitor research, and user interviews to understand pain points.

  • Conduct user testing to validate designs.

  • Consolidate data collected from research and organize them for future uses.

Tools  

Figma, Confluence, Miro

Timeline

12/2021-05/2022

Project Background

The Library of Congress is redesigning the Congressional Research Service website, CRS.gov. As part of that process, they need to develop a Design System in Figma based on the CRS brand and the USWDS guidelines. The design system would then be used to create high-fidelity mockups of key CRS.gov pages.

Outcome

The team was able to develop a mature design system at the end of this project. The design system consisted of 2 parts: 

​

  • Style guide, component library, pattern library, and templates stored in Figma

  • Detailed-oriented design system usage instruction stored on Confluence

 

In total, the team archived 46 design elements (components/patterns/templates) , 52 documentation pages , and several high-fidelity mock-up pages.  A complete presentation of the outcome can be found here.

What is CRS

The Congressional Research Service (CRS) is a public policy research institute of the United States Congress. Operating within the Library of Congress, it works primarily and directly for members of Congress and their committees and staff on a confidential, nonpartisan basis.

What is a Design System

A design system is a complete set of standards intended to manage design at scale and maintain consistency using reusable components and patterns.

Design Process

For this project, the team adopted the Design Sprint methodology and completed 3 rounds of Design Sprints. Each sprint spanned 4 weeks, during which the team customized the process to fit the nature and requirements of the project. The main design process can be summarized in the 4 steps below.

locprocess.png

01. Discover  the Problem

Background Research

 The background research consisted of 3 parts of tasks. First, the team researched different design systems just to get familiar with what a design system is and what elements a design system usually contains. Then, in order to understand what components should go into this design system, the team created a UI inventory by auditing the current CRS website. Lastly, the team conducted several competitive research on some similar think tank websites to get design ideas. 

​

bgresearch.png
Expert Interview

In the discovery phase, the team managed to conduct 7 expert interviews with:

​

  • Designers

  • Developers

  • Accessibility experts.

 

Through these interviews, the team had a better understanding of who are the actual users, who are the potential users, what they expect to see in the design system, and what are some potential problems the team may run into when designing this design system.

02. Define the Scope

Affinity Diagram

The team interpreted all the insights collected from expert interviews and moved them on to Miro for further consolidation using affinity mapping. Through this, the team had a better view of what pain points users are having and what exactly they want from the newsletter. 

Affinity Diagram.jpg
User Journey Map

The team then created corresponding designer & developer user journey maps to capture the workflow with the design system from different user groups. Through the map, the team was able to see clearly when is the touchpoint for users and this product, and what something can be done to improve the user experience.

designer.jpg

Key Findings 

​​

As a design system, it should :

  • Efficient,  flexible, and clearly organized

  • Provide clear design principles, guidelines, and use cases

  • Maintain consistent organization in Figma and Confluence 

  • Establish plans for design system updates

​

As a product for CRS,  it should :

  • Reflect the high-quality service offered by CRS experts

  • Reflect a modern design style

  • Improve readability/legibility on content-dense pages

03. Design the Product

Product Structure

The team first set up a basic product structure of the design system in order to be clear on what kind of thing they need to do and how should they assign tasks to team members with different backgrounds and skillsets to achieve maximum efficiency. The structure is listed below. After the main direction is set, the team then proceeded to fill in the content in each section.

design system structure.png
Style Guide

The actual design of the design system began with the overall style. Referencing the brand guide provided by CRS, the team decided to use royal blue and gold-ish yellow as the primary and secondary colors, which delivers a calm, noble, peaceful, and respectable visual identity to audiences. The team also chose to use EB Garamond and Public Sans as serif and sans serif fonts.  A color palette and a typography sheet were then created to standardize the overall design. 

color.png
Component/Pattern/Template Library

Per the client's requirement on adopting USWDS (United States Web Design System), the team used USWDS components as a foundation and customized the design to align with the CRS branding & usage. At the same time, the team also brainstormed different variations of those components for potential future uses. Referencing the Atomic Design system, the team divided all design elements into 3 levels: component, pattern, and template.

​

The team also set up some rules on how to display a particular element, a sample was listed below.

pagination.png

As the design library in Figma grows, the team also assembled several mock-up pages to showcase how this design system can be used. One of the designed pages - Place A Request Page - was listed below.

Documentation

In order to achieve the best efficiency, the team decided to form 2 sub-groups within the team and work on different tasks simultaneously. 3 people were working on the design library in Figma while the other 2 people were working on the documentation on Confluence.

​

Each element page listing on Confluence includes 7 sections: 

​

  1. Table of contents

  2. Description

  3. Preview

  4. Usage

  5. Usability guideline

  6. Accessibility guideline

  7. Resources.

 

For easier future implementation, the team set up a format template that can be directly applied to all pages through drag and drop. In the preview section, all elements were directly presented using iFrame so that any changes made in Figma will be automatically synchronized on Confluence. The team also embed the Confluence documentation link into each Figma element so that designers can check out documentation effortlessly.

​

 A sample documentation page is listed below:

​

​

​

​

1.png
2.png
3.png

04. Getting Feedback

Expert Review 

Throughout the development of this project, the team conducted several rounds of expert reviews and 1 round of user testing to validate the design. The focus of expert reviews was to understand if the visual design was aligned with design principles. Some of the feedback collected are listed as follows:

​

  • The meaning of some icons could be confusing.

  • The format of hyperlinks needs to be unified.

  • Some clickable items are not easily recognizable.

  • The spacing needs to be reconsidered.

User Testing

For user testing sessions, the focus was on testing the ease of use of the design system. A total of 13 participants were recruited, 4 of them were HCI students and the other 9 of them were professionals from the Library of Congress (Designer, Developer, Researcher).  The feedback was summarized as follows:

​

For Figma File

  • Variants are clearly organized (+)

  • The information hierarchy is well organized (+)

  • Design components are separate from the documentation (+)

  • “Pattern” terminology is not widely recognized (-)

  • The format of component designs needs to be unified and improved (-)

  • Some naming conventions of component are too technical for designers (-)

  • Certain components lack hover & selected state (-)

For Documentation

  • The documentation is well organized and easy to navigate (+)

  • The Figma frames linked in the documentation are helpful (+)

  • The Accessibility guidelines are helpful (+)

  • Lacks guidelines on when to use / not use a component (-)

  • Illustrations of do’s and don’ts in the guidelines would be helpful (-)

  • Guidelines on transitions for interactive components and illustrations of these components would be useful (-)

Limitation

Asides from the achievement,  the project also has some limitations that need to be considered in future development. 

​​

  • The code snippet is currently out of the scope of this project, but it will be definitely useful to add in the future.

  • Currently, the team was only able to implement and design elements for the web end. The tablet & mobile end design should be considered in future works.

  • When the team handed over the project, Figma hadn't published its component property feature update. Components can be further organized utilizing the latest Figma feature to 

Reflection

Personally, this is an extremely valuable project for me. I really appreciate having the opportunity to work with our amazing client - Libray of Congress, and my awesome teammates - Micheline Ziadee, Thi Nguyen, Wei-Farn Tang, and Ethan Cai. 

​

Through this project, I was able to get myself familiar with what is a design system and how to build up a design system from scratches. Technically, I got fluent in utilizing Figma's style system, variant feature, and auto-layout.  Working-wise, I learned how to set priorities for work, how to manage a project, how to deal with emergent situations with clients, and how to work with a team with different backgrounds & skillsets.

​​

bottom of page