Evolving a brand into a hands-on toolkit, for those who design and build online.
Cincinnati Children’s Digital Toolkit
How might we build brand guidelines in a way that makes people want to use them?
The Challenge
In preparation for a hospital expansion, Cincinnati Children's Hospital overhauled their brand from a static experience to one that was colorful, playful, and held kids at the center. When their branding agency signed off, they came to us to finish the work, and extrapolate a print-first brand onto digital.
Our Solution
Rather than introducing another static guidebook into the design architecture, I developed a digital extension that was not only informative, but functioned as a living toolkit. From .ASE swatch panels to font stacks to SASS variables, the digital extension became a destination for those building online.
The Results
After launching our 1.0, I continued to evolve to the digital toolkit, expanding it for new audiences, including robust visual and code assets, and revising guidance to comply with updated best practices for inclusionary design.
Key Contributions
Adapt Design Standards into Digital Toolkit
Collaborate with Multidiscipline Team
Build ASE Panels
Write CSS Snippets
Develop Grids, Patterns, and Frameworks for Use
Tools
Frontify
Sketch
Adobe Photoshop & Illustrator
Zeplin
SASS/LESS
The Process
While most brand standards travel in PDF, I knew that there had to be a better way, especially for a digital extension. Auditing our options, I selected Frontify as a host: there, I built in hexadecimal/RGB color palettes, em/rem-scale typography guides, and code snippets so that the digital extension could function as a living toolkit rather than a static book of rules.
Consulting with front-end and full-stack developers already immersed in the digital ecosystem, I took the Foundation framework and applied it to the new brand's grid system.
With collaboration from our client, I developed a full font stack, including web-safe, depreciable universal, and fallback fonts, ADA-compliant color palettes, and usable patterns for small screens.
Click to enlarge ⤴
With the foundational work underway, I designed tiered set of iconography, from wayfinding UI elements to an icon library, prioritizing consistency across the digital ecosystem in functional elements and ownable visuals as the work became more complex.
In Practice
Taking it one step further, I explored how the brand came to life for different executions, from social platforms to display ads. Leveraging the guidelines as a brand language, I developed different use cases for color scale, typography, and photography selection, supplying tangible elements to bring the guidance to life.
Post-Launch + Beyond
The guidelines continue to grow as the landscape expands through technological advancements like telehealth, industry-changing events like Covid-19, and expanding audiences like teens and young adults. As the digital landscape evolves, the toolkit updates with assets, guidance, and best practices for inclusionary design.