SOLUTION

I leaned into the design system I developed for the University to effectively tackle the challenge of maintaining a cohesive brand experience at scale.

• Designed a comprehensive library of scalable components and a versatile UI kit to meet a wide range of communication and display needs across various audiences and applications.
• Rigorously tested components and layout combinations using edge cases to ensure they seamlessly integrate into diverse contexts and scenarios.
• Provided user guidelines, implementation and layout examples, tooltips, do’s and don’ts, along with training and support for content administrators.
• Implemented “guardrails” within the component build to maintain display integrity, even when content administrators upload content with incorrect specifications, such as the wrong aspect ratio on images.
• Baked accessibility into components reducing the dependency on content administrators’ expertise.
• Created a library of WYSIWYG styles to supplement the component library to ensure that text-heavy layouts are accessible and delivery a cohesive brand experience.

02

Accelerate page creation and creative options

Deciding which component to use to provide an optimal user experience can be a trial process.

To help content editors pick the best display for their content, I created progressive design collections that give content editors with a range of display choices. Once the content has been uploaded into Drupal, editors can view display options via a drop down selection.

This accelerates layout and page creation, allows content editors make optimal choices for the display of their content, and creates a better user experience.

04

Keep it simple and build in guardrails so the display cannot break

For the 1,000+ individuals granted website admin privileges, managing the website is just a small part of their job duties. Most lack basic asset preparation skills, with many unable to perform simple tasks like cropping images to specific aspect ratios.

I kept things simple by utilizing only two image aspect ratios on the website: 16×9 and 1×1. Additionally, we built in guardrails so the display doesn’t break if an incorrectly sized image is uploaded into the CMS- something that happens more often than not!

06

Be prescriptive when it enhances the user experience

We decided to standardize layouts for academic program pages across the University’s 7 schools and colleges to provide a consistent user/customer experience and and to facilitate program comparison. This consistency helps convey a sense of unity across the institution, lays the data foundation for future Academic Program Finder functionality, streamlines content management, and expedites the process of launching these pages.