Children’s National Hospital, Design System + Component Library
Scope Web design, UI design, Research
After providing several years of digital support to Children’s, Threespot partnered with Velir, a development agency that specializes in Sitecore builds, to give DC’s premier pediatric hospital an updated, elevated, and more personalized web experience. Over the course of the project, Threespot and Velir strategized, designed, and built 5 sites under the CNHS digital system.
Team
Sid Barcelona, Creative Director
Jack Nank, Producer
Olivia Stetler, UX Strategist
Liz Lord, Analyst
Megan Lewin-Smith, Design Lead
Clare Mahr, Design Support
Velir, Development (partner)
Discovery
Through the visual audit, we discovered that CNHS had been using its visual identity inconsistently across its digital landscape. Between varying button styles, color combinations, layout shifts, type choices, and photography styles, it was sometimes hard to tell that certain sites were even part of CNHS at all. This exercise lead me to believe that we would have to build a system that could be consistently applied across the digital landscape, but also had room for unique moments and adaptability.
To achieve that, I implemented an atomic design process—starting from the atoms (color, typeface) of the visual system and building up into molecules (type stack, accepted color combinations) cells (components), and organisms (pages).
Mood boards + Page design directions
We synthesized our research and visual strategy through mood boards. By exploring the beginnings of a system through its approach to color, type, and image, we were able to have targeted discussions with the client about their need for liveliness, paired with credibility as a best in class healthcare provider.
Once we had gathered feedback on mood boards, we were able to continue to solidify the system by applying our design choices to page.
Page Design
Over 30 sprints, including 144 screens, we built a system that is both lively and credible.
In addition to the main hospital site, we applied our system to other sites within the Children’s National digital ecosystem. The primary care experience focuses on local pediatrician’s offices. The international sites include important overview information for potential patient families overseas. The Children’s National Foundation site focuses on celebrating the impact of innovation at Children’s.
Figma prototype
To navigate, click within the frame to advance to the next page, or hover your cursor at the bottom of the frame to reveal arrow controls.