.png)
This article was co-written by John Kellejian, Jen Lee, and Van Nguyen.
West 14 was created by the Summer 2022 graduate assistants (GAs) Jen Lee, John Kellejian, and Van Nguyen at the Center for Digital Experiences at Pratt Institute under the supervision of Professor Craig MacDonald. The goal for the designers was to create a design system for the DX Center at Pratt that focused on accessibility and adaptability for the future. The system will be continuously maintained by Professor MacDonald and the current/future GAs.
Our goal was to build a future-proof design system from the ground up to create a common design language within the DX Center. We provided design guidelines and components to help future designers create and develop the Center’s website to be more cohesive and consistent. Additionally, we worked to provide a design system that can be accessible and built upon as the DX Center grows over time.
Before all the designers began the West 14 Design system project, we read through Brad Frost’s Atomic Design. We learned that Atomic Design has five distinct levels in the atomic design methodology: atoms, molecules, organisms, templates, and pages. From here, we started to understand why building a robust design system is vital for the DX Center. This also gave us a better understanding of the building blocks when crafting a design system and helped us conduct a website audit of the previous DX Center website.
Firstly we looked at the atoms of the site. Atoms are the fundamental building blocks of matter. Applied to web interfaces, atoms are elements such as Iconography, Buttons, Typography, and Images. Once we understood the atoms, we began categorizing the molecules of the site, including blocks, cards, and headers.
From there, the molecules gave us a strong base, which was then combined to form organisms. Organisms are molecules merging together to create an interface’s categorical section. The organisms of the DX Center’s site included publication lists, peoples list, and project lists.
Having the atoms, molecules, and organisms categorized, we knew we now had the essential cornerstones to form a design system, lay out the templates and pages, and address any issues we encountered.
After breaking down the atoms, molecules, and organisms, we conducted a competitive analysis of several design systems. We looked at roughly 14 separate design systems. But we narrowed our focus to three main design systems: The Goldman Sachs Design System, Pajamas from GitLab, and The Washington Post Design System. Dissecting these design systems was beneficial to gain further knowledge of what industry design systems look like and how they categorize fundamentals, components, and patterns. We also identified valuable insights to develop a UX strategy for how we wanted to craft the West 14 design system to be adaptable and accessible.
Since its inception, the DX Center has had no designated design system. With no design system, there was a disconnected user experience throughout the DX Center’s website. There was a need for a better approach.
- Inconsistent guidelines and direction
- Duplication of standard components
- No set of standards or design kit for growth
- Shades of colors that did not meet ADA Accessibility Standards
Developing Consistency
One of the key goals in developing a design system for the Center for Digital Experience website was to create consistency for the site going forward. The Center for Digital Experience often grows as quickly as its students and faculty do, illustrating a need for a design system that could be used to both maintain and develop the site. We found that many pages seemed to be designed independently from one another as the DX Center, which gave the impression of a less cohesive design.
We first began by creating a UI inventory of existing foundational elements such as typography, colors, icons, various types of content blocks, form fields, and CTAs. During this inventory process, we discovered that the existing website had many different font types chosen for typography, a variety of image ratio sizes, and inconsistent CTAs depending on the page.
To address this, the font Nunito was chosen as the sole font for our design system with stylistic and size differences to this font to indicate text hierarchy. Additionally, most images for the website were standardized to a 3:2 ratio and a 12-column 72px grid was added to all pages to standardize layout elements.
Addressing Accessibility
As developing a design system allowed us to review all components of the website, we also paid special attention to making sure that all the new elements that were developed or changed as a part of the design system would be accessible for users. Throughout the creation of the design system, special attention was paid to the accessibility of each component to ensure that the overall design system would be accessible as well. The color scheme of the design system was darkened and the shades of blue were changed to allow greater contrast between text and background as well as better accessibility overall. Special attention was also paid to the background hero images to ensure that text would be visible and an overlay was added to images with text to further increase visibility.
We looked at trends from ten various design agencies’ websites to help garner inspiration for solutions, aesthetics, and resources. We chose 15 insights that could be directly applied to our design system. Some of the examples include:
IA:
- Many newsletter sign-ups were in the footer for a seamless experience
- Many websites utilize accordion style dropdowns for service cards & further discussion on IA of services
- The contact us forms were located at the bottom of the home page
- Many competitors had a contact us button or page that was found in the top navigation bar
- Many had companies structured their services around core design principles
Visual:
- Video/motion graphic heroes were becoming increasingly popular
- Color overlays on images to keep a unified color scheme
- Simple and modern card design
- Full bleed image backgrounds with text overlay were stylish and inviting
Critical to the West 14 system’s success is the alignment of all the foundational elements, from the guidelines and components to the design principles. West 14 is structured to be scaled for each page, component, and foundational element. This foundation defines characteristics such as typography, colors, icons, spacing, and information architecture. Each component has a detailed breakdown with specific guidelines on how to use them. This means that our foundational system must account for every potential UI pattern. Our foundations support the grid systems, spacing scales, typography scales, color palettes, and image aspect ratios.
All of the design fundamentals of West 14 can be found documented in Notion.
The team decided on four value statements that frame our design decisions and reinforce consistency in decision making. Additionally, we decided on the name West 14 because it is the street on which Pratt’s Manhattan Campus is located and would allow us to highlight the unique perspectives the students of PMC bring to design projects.
These four principles go as follows:
Accessibility
A design system is only effective if it’s accessible, and sound design should reflect all voices and perspectives. West 14 promotes inclusivity and access to information for people from all backgrounds and abilities by providing a clear rationale for accessibility.
For example, according to ADA guidelines, “People with limited vision or color blindness cannot read text if there is not enough contrast between the text and background (for example, light gray text on a light-colored background).”
This is why West 14 uses a set of colors that inherits the existing branding identity of DX Center while also providing a good visual hierarchy. When using one of the darker shades (darkblue, accentblue, or textgray) and one of the lighter shades (lightblue or white) together, the color combination meets a color contrast ratio of 4.5:1.
Continuity
Good design is timeless. West 14 uses foundational design principles that should stand the test of time while still being adaptable to new technology and design trends.
Balance
Good design is about balance. West 14 strikes a balance between simplicity and complexity, creative expression and practicality, and beauty and functionality.
Trust
Good design is about establishing trust. West 14 promotes trustworthiness and reliability by presenting information clearly and consistently.
Together we created a ready-to-use components library with foundational elements by taking inventory of the current components that existed on the DX Center website and individually applying the new design system concepts to them. The component library is a collection of reusable interface elements based on West 14’s foundational elements. It was critical to define the framework of components so that design decisions are consistent and logical based on the page’s context.
Every component is refined into seven categories with content specifications in a components library located in Notion (accordion, button, card, carousel, footer, header, and input). Thus, future designers can use this classification to design or prototype new experiences, allowing components to be updated when needed.
Notion for Documentation
Notion was selected as a platform for documenting the work we have done on our project. This platform was chosen as it allowed for a customizable yet collaborative way to shape our narrative of how we wanted to present the West 14 design system. The Notion site for West 14 documents all the various components that are part of the design system, specifications for the design of each element, and links to our component library in Figma.
Figma Component Library
As a part of the West 14 design system, a corresponding Figma component library was also created. All elements of the website were created as Figma components initially, allowing us to enact widespread changes to multiple components by only changing the main component. This Figma library allows future users of the design system to use any elements directly from the component library to their own designs. Additionally, people working for the Center for Digital Experience may edit the main components as needed in the future allowing for consistency and continuity in the website’s design.
What’s Next?
As the field of UX rapidly grows and new technological trends and best practices emerge in the field, we have no doubt that future edits will need to be made to the design system to keep it on par with future industry standards. Additionally, as the DX Center grows and students and faculty generate new research and projects, content will need to continuously be added to the site.
In anticipation of such changes, we’ve ensured that each component is optimized so that if new information is added to the page, the visual design remains accessible and appealing despite variations in information (i.e. number of cards in a block, the length of a title, etc.). Additionally, we’ve also optimized the Figma component library for design system-wide changes to components. By accessing the main component in a separate Figma file only viewable and editable by DX Center staff, future staff can create changes to any main components and have them automatically be applied to the design system Figma component library. The creation of the design system allows for all future changes to the design system to still maintain a sense of cohesion, continuity, and consistency.
Read the full article here
