NORY STEM
A design system for a suite of products.
Project Details
About NORY STEM
As the first design hire at NORY, one of my projects was to help elevate their website presence by developing a design system that would lead to a more on-brand, quality, consistent product.
ROLE:
Product Design, Visual Design
YEAR:
2019-2020
PLATFORMS:
Web
The Problem
When I first joined NORY, their online tools and applications were not part of a cohesive experience. As a result, users faced difficulty utilizing the product.
Goals
The high-level goals of this project were:
• To build and sustain a design system
• Create a visual language and foundational component library to support NORY web applications
Process
Design Audit
I performed a design audit on all the existing products to get a sense of the inconsistencies between each one.​
​
This also helped to identify the components that are used most frequently so it would be clear what to prioritize in the design system.
Choosing a Font Family
Typography was a crucial step in the development of this design system since it plays such a significant role throughout the entire website.
​
After some research and testing with a variety of typefaces, I eventually landed on Montserrat headings with Raleway text. The playful simplicity of the combination felt appropriate for the company mission.
.png)
Choosing a Color Palette
When deciding on the color palette, there were several specific cases that needed to be taken into consideration:​
​
• Primary & accent colors
• Grays
• State colors (success, error, warnings, ect)
• Secondary colors
​
The color palette was tested using compliance checkers online in order to ensure that the designs would be easy to use and accessible to all users.
.png)
Since NORY is a children's STEM education startup, it was important to go with a bright, approachable color palette that would convey the company services well.
Components
At the time of the design audit, it became clear that there weren't many components in use. In addition, it also showed which of the existing components needed to be redesigned.
​
I researched other design systems to see which components would be necessary for ours. This research in combination with the data gathered from the design audit led to a collection of components to be used in our product.
Solution & Next Steps
The integration of this new design system into the website is still in progress. Going forward, it will be important to continue testing how effective the system is with users and adjusting when needed.
Luckily, with the system already in place, it has allowed the creation of marketing collateral and other social media campaigns to be created under a consistent design framework.
