scroll down

A versatile design system for Stanford University digital properities

A versatile design system for Stanford University digital properities

A versatile design system for Stanford University digital properities

in collaboration with Stanford's
Office of University Communications team
in collaboration with Stanford's
Office of University Communications team

Goal

How might we design components for a flexible, scalable design system that meets the diverse needs of each Stanford entity and their users?

Solution

Decanter design system

Role

UI/UX designer, major contributor to Decanter

Summary

Decanter is an open source design system and front-end framework designed for Stanford University entities and vendors. As a major contributor to the design system as a whole, my efforts spanned from designing Alert components (largely in response to Covid-19) to defining the responsive displays of components.


One of my primary focus areas was Form component design. This work was completed in collaboration with fellow Stanford Web Services designer and lead creative, Kerri Augenstein. We defined responsive displays for multiple breakpoints and opted to make each component accessible. This facilitated best practices for those using the design system — from faculty members to research facilities to schools.that suited their individual visual design needs.

Because the visual design needs of Stanford digital properties vastly vary, we designed components with flexibility in mind. Stanford entities and vendors could customize components stylistically through University Communications team- recommended colors, typography, and iconography.

Applications of form components

Applications of form components

Throughout my tenure at Stanford Web Services, I had the opportunity to collaborate with several client teams on various online forms.

Designed for the Stanford Alumni Association (SAA), the Stanford Pass portal allows for current students, alumni, and other Stanford community members to access SAA digital properties, including Stanford's alumni directory, email, groups, and events.

Designed for the Office of Development, I led the design of donor engagement forms in collaboration with a team from GiveGab, a fundraising platform. This included designing a seamless donation experience through Stanford's Make a Gift and Make a Pledge websites. These projects focused on enhancing donor engagement while maintaining accessibility and alignment with Stanford’s brand identity.


Travel/Study registration, payment, and interest forms

Travel/Study registration, payment, and interest forms

In addition to designing the Travel/Study website, I also led the design for the Travel/Study website's online forms. These forms allowed users to register for trips, make additional payments towards trips if needed, and express interest in creating a custom itinerary with the Travel/Study team. While these experiences are live, they require logging in through Stanford Pass to view.