Designing and documenting a design system for Princeton University's School of Engineering and Applied Sciences
Myself — Junior Visual Designer
Neil Adelantar — Design and Web Development Lead
Josh Cartagena — User Research and Web Development Lead
Steven Schultz — Director
January 2019 - August 2019
September 2018 - July 2019
Although Princeton Engineering already had a distinct branding from the overall university, it was lacking a design system for its digital platforms. It was my job to help design user interface components and organize documentation of the design system.
Before I joined the team at Princeton Engineering, my supervisor, Neil Adelantar, had already created a basis of their design system at the time via Sketch Library. However, by the beginning of January, we decided it was critical to make a comprehensive design system to speed up the design process, allowing us to be faster at creating prototype web pages. In addition, the engineering school was rapidly growing in interested applicants, and as a school that wanted to stand out in terms of quality of education and talented students, it was important to focus on branding that fit those standards.
During this process, we decided to transition from Sketch to Figma being our main preference of design software. This allowed the team to quickly construct user interfaces & flows and enforce collaboration so that we could work on components simultaneously. It also allowed external people outside of the team to easily see our progress so far without having to download the application.
As you can see below, the direction and style of the former design system was limited to some cards and followed the orange and black scheme of Princeton University's identity.
Princeton University, especially the engineering school, is committed to ensuring that digital accessibility is a priority in their resources. Thus, it was extremely important to make sure that we were proactive rather than reactive in our design choices (such as in font sizing and colors) to make it accessible to any visitor for our website. Our design system was made to fit WCAG 2.1 AA requirements.
The former system was predominantly black and white. The standard Princeton University's color is orange along with this, but we wanted to distinguish the engineering school from its main body. Accordingly, we decided to implement gradient colors to add to the flat and minimal basis of the design. From doing this, gradient colors allowed for more visual impact and to leave a better impression on visitors. It should also be noted that these specific gradient colors were chosen to be accessible on white backgrounds.
Before starting this rendition of our design system, most of the components/symbols were made to be as consistent as possible, but there was still much "eyeballing" and estimating on which formatting (ex. margins, padding, alignment) looked good. This time around, we wanted to focus on making our design system to be as consistent and scalable so that it would be much easier to build new designs in the future. Although it was considerably more time-consuming to focus on each component's details and documentation, we knew it would be much more beneficial in the long run.
This gif is a quick tour of the Figma file containing all the high-fidelity prototypes of webpages for the Princeton Engineering website. These were created using the components created from our design system.
As beautiful and frustating as it is, creating an active design system takes a lot of work because it is never really complete. After all, components were - and still are - being redesigned and modified. It was truly an iterative and challenging process, but knowing that I was part of creating a great resource for future work made it all worth it as the system continues to grow.
If you are interested in reading about user research that went into this design system, you can read Josh Cartagena's insights about Designing Findability Grounded in User Research or User Lexicon and Expectations: Building a Better Search Experience.