Expanding Stanford's design system
Scaling consistency without sacrificing flexibility across 50+ Stanford entities
Role
Lead designer
Co-owner, Decanter
Design System
Client
Stanford University
Platform
Web
Decanter's new components on live sites, including Stanford's primary donation site, Make a Gift.
As lead designer and co-owner of Stanford University's design system, Decanter, I led its expansion to meet the needs of Stanford entities, help bridge the brand-product gap, and ensure a consistent user experience across Stanford's digital properties. I built components from scratch to match the design language, accessibility standards, and flexibility of the existing system.
New form components on Stanford Alumni Association's Travel/Study program website.
Challenge & Opportunity
Disparate teams, varied solutions, and inconsistent experiences
Stanford University's entities (offices, departments, research facilities, labs etc.) felt limited by the existing Decanter design system. They required a more robust tool kit, with alerts, form UI components, button options and more in order to increase business efficiency and deliver the modern experiences their users expected from a cutting-edge university.
The expanded Decanter design system components increase efficiency and bring sites up to modern standards, but we wanted to go further. Built-in accessibility and customization options make it frictionless for Stanford entities to be distinct, brand compliant, consistent, and fully accessible without compromising creative expression or flexibility.
From left to right: Decanter's new banner component on the Stanford Engineering, Stanford Alumni Association, and Stanford University homepages.
Solution
An improved, more robust design system for all
Form building made simple
Content creators were empowered to create experiences requiring user input, like e-commerce or log-in experiences, without spending internal resources. We thoughtfully designed validations, interactive states, and a variety of options to meet the vast needs of the university.
Urgent communication at the ready
We designed an Alerts component to enable clear communication of urgent information to the Stanford and global communities. This included everything from the latest COVID-19 information at the peak of the pandemic to building closures over holidays.
Unified, not uniform
Each Stanford entity's branding needs are markedly different. To strike a balance between flexibility and consistency, we drew color choices for interactive components from Stanford University's Identity Guide.
Impact
Since launch, the expanded Decanter Design System has seen quick and wide adoption, with every new site and release leveraging its new additions to reduce design and development time. Content authors, regardless of design or technical expertise, can now ship user experiences worthy of a globally prestigious university that align with Stanford's branding guidelines by default. Forms, once inconsistent across every entity, are now unified across more than 50 Stanford sites. The Decanter Design System continues to be actively maintained and extended through a consultative model, one that empowers teams to build with quality and confidence.
selected
work