NORY design system banner 2.png

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.

audit bg.png
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.

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.

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.

Buttons.png

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.

solution 1.png
solution 2.png