RAFT Design System

Senior UX Strategist at Throughline

September 2020-January 2021
August 2022-Current

UI/UX Design

Information Architecture

Accesibility

Context

Originally the team I was on was contracted to do exploratory work on an internal tool for a government entity. After a few research based phases, I identified an opportunity to standardize and collect design ideas into a system that would grow as we refine the tool we sought to create, Request For Additional Funding Tool (RAFT).

To see product details of RAFT, go here.

In creating this system, the team's goals were:

• Standardize previous iterations and organizing design elements into a single place.
• Provide development with details and standards to align to.
• Create a structure for the system to grow as more work is done.

Origins of the System

Matrix of UX Grammar and descriptions of UI elements

Where this idea started with some beginning designs before RAFT was initiated. We had a few screens that were more wireframe based than fully designed, and it was a little cumbersome to design within the file. No components or standards were used and written down, so I started to form ideas on what that could include going forward, based on what we already had. With the help of some other strategists, we created a matrix of UI elements that could be included in the final product. As time went on, we identified more specific elements and combinations for the system as well.

Screenshot of design system assets and zeroheight windows

From my work in developing RAFT, I established a basic system to facilitate quicker designs and easier changes in the future. In addition, the goal was to continue to mature this system with more work that was on the horizon, implementing the system and bolstering documentation along the way. Documentation was done in Zeroheight to expand the reasoning and use for elements in the system. Once the design system was solidified, I ran an accessibility audit to make sure all contrast and sizing would pass WCAG, which was carried out through the entire product.

Improvements

In 2022, we revisisted RAFT with another government entity to expand the scope and help integrate other parts of the process in the tool. With this, I wanted to revisit and refine the basic system we created. Functionally there were new capabilities in Figma that I wanted to implement so components would be easier to use and keep stronger consistency across screens and sizes.

I created two different categories of improvements: functional and system. Functional improvements dealt with capabilities in Figma that were added since the system was first created like a finer tuned auto layout and file organization whereas system improvements dealt with the structure and detailing of the system. There were some details already existing from when the system was documented in Zeroheight, but I wanted to add in more values, accessibility terms, and intent to the system as a whole.

Most of all, the team and I wanted to accomplish the following goals:

• Have an area for repeatable design standards, including the ability to scale the system.
• Collecting design ideas, information, and methodology for the system.
• Giving clients the design language, reasoning, and specifics of the system they use.
• Giving development specifics on design elements and patterns.

I worked with the rest of the team to gather feedback and execute on my ideas. We started with some of the functional improvements like analyzing what we already had and organizing it in a better way. After that, we started to work on the system improvements, writing details and uses into the component library.

Image of figma board that contains details of RAFT values and intro information

The overall system was organized into Figma boards that went into detail of the systems use, value, and other information a designer or developer would need to execute an instance of RAFT.

Image of figma board that contains details of RAFT visual style guidelines
Image of figma board that contains details of RAFT component elements

From this state I maintained and updated as needed and focused on how to better prepare new colleagues coming into the project. I developed some basic page templates in wireframe and full designed fidelity to help facilitate easier modifications and new creations. An intent with wireframes was to be able to quickly create ideas to validate with, or call out specific areas of funtionality for cilent review.

Final Product & Use

The first round of this system helped the team keep better consistency and standards throughout the designs that we made for RAFT. This also helped design and development communciate requirements and have a source to reference for any basic design questions. In general, this sytem helped free up time in the design process to explore some aesthetic improvements throughout the tool.

On the second round we took this further in identifying areas of improvement, as well as feedback from the first round of development. With our improvements, we formed a more cohesive style and base for future work on this tool. This would give designers a clearer idea of what components existed and afforded more time for new designs or more intricate interactions.