Summary
Yale set out to build a new site-building product, and they needed their first design system.
Role: Lead UI/UX designer for the design system, working with internal teams of front and backend engineers and multiple client-side teams in charge of product, identity, UX, and accessibility.
The problem
The Yale ITS team supported over 1,300 individually-operated sites in the Yale University ecosphere. The dispersed system was causing them to invest a substantial amount of time in providing unique solutions and support for each site. They partnered with Four Kitchens to build a digital platform that would better support site owners and authors, unify the sites under Yale branding, ensure accessibility standards, and allow their team to shift a significant amount of their focus from technical support to storytelling. The new product needed a design system to serve as its foundation to provide visual consistency, sustainability, and scalability while ensuring accessibility.
The solution
After discovery workshops, stakeholder interviews, and project road mapping were completed, the design system work began. The teams agreed on starting with the basics so the design system could adapt to future needs as it matured. The UX team at Yale had identified user personas and commonly requested components. Based on these personas, the system would aim to support the novice user. I proposed the first batch of components to be built based on discovery findings in a spreadsheet and worked to get cross-team signoff. Then, a timeline for the initial component designs was set, beginning with establishing tokens and how they would appear in the components.
We planned to build the design system based on the principles of Atomic Design. These tokens, or atoms, would be the system’s core. They required presentations and iterations with the identity team at Yale to ensure adherence to brand standards and its adaptation to the digital space.
Samples from the first presentation of a few of the proposed tokens and their use.
As bundles of new components were presented, previous component bundles would be tested with users by the client’s UX team so we could work together to iterate on function and naming. We had encouraged Yale to set their guiding principles: uniformity, inclusivity, user-centricity, standardization, and sustainability. All elements added to the design system would fulfill these requirements. The guiding principles would direct revisions and additions to the design system.
A high-fidelity prototype of the image grid component after revisiting how captions will appear in the modal.
I worked with UI designers on my team to transfer the designs into a UI kit for Yale. They were beginning to switch their design work from Adobe XD to Figma, and the kit was to help them get acquainted with the new tool and better understand how to use the new system.
One component from the UI kit. A fantastic teammate did the majority of this work.
As part of the original design system planning, we introduced the concept of dials and levers to bring dynamic control to individual sites. Components needed to be fool-proof for content authors but would also contain a few built-in customizations to allow authors to create a personalized experience for their site.
I worked with our internal development teams to create a list of global site settings users could select. These settings were sweeping changes made in one location that would change the site’s appearance, referred to as the levers. The dials, existing on select components to give the user extra options for its appearance, would be affected by lever choices. For example, if the color palette lever was set to night, then the banner component would have three color options. Since these colors would be systematized and set in one location within the code, I had to map out strict requirements for how color palettes and dial choices would work to ensure accessibility.
Video of a test page of how someone would experience their dial options under the Old Blues color palette lever plus a description of the color “slots” and how they affect a site.
As front-end developers passed items off for code review, they had to run through approval with Yale’s accessibility team, a second internal code reviewer, and me. Many hours were spent screen-sharing with an FE as they live-coded and adjusted components to meet our revisions before they entered the component libarary. (I not-so-secretly loved these sessions.)
With components entering the QA phase, we began documentation for them in Notion. My team was responsible for documenting each component and their variations, states, and behaviors and outlining best practices for use and content. This draft documentation was eventually moved to a dedicated site that served as the help resource for authors and developers working with the system.
With the first iteration of the design system in place, the team began to migrate sites over to the new platform in phased launches. Training sessions for components, written by our talented content strategist, helped to guide site authors on how to use the design system. We also continued to build example content available on installation so authors could use the pages as inspirational templates.
”Adding new content to the new YaleSites platform is easy and efficient. The interface is intuitive, and the pre-styled components offer a new and refreshing look to how content is displayed. I am pleased with the accessibility of the platform and the tools provided to ensure that every site is inclusive. Overall, I am very satisfied with the final product and excited to continue using the new platform.
Justin LaingWebsite Manager
”The new YaleSites offering allowed us to swiftly and easily rebuild the Yale Visitor Center website, transforming it from a static, text-heavy site to a more dynamic, visually-rich vehicle tailored to the center’s key audiences. We’ve received so much positive feedback since it launched, and we couldn’t be happier with both the authoring experience and the front-end results.
Andrea MacAdamDirector, Digital Strategy
Testimonials from product users posted on YaleSites.
The results
The new product has been well received and continues to generate a lot of excitement about the new authoring options and variations and their ease of use. The team will continue the work of migrating sites, improving design system resources and documentation, and iterating based on user feedback.
See the design system in action at YaleSites.
© 2024 Ashley Hitson.