Announcing the Open Y design system

Design system photo

Open Y has come a long way in three years. What started as a philosophy based on the idea of sharing has evolved into an active platform serving more than one-third of Y members in the United States. We’ve made remarkable progress but we’re just getting started. We plan to take some more big steps in 2020, including the creation of a new design system for Open Y.

The need for a design system is proof that Open Y has established its place within the greater YMCA movement. As part of a world-renowned institution that has improved the quality of life for countless individuals and communities, we need to keep pace with technology’s relentless evolution to stay relevant. To do that, Open Y products must be built smarter and work harder to make peoples’ lives easier. A design system will help us do just that.


What is a design system?

“A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.” [1]

Specifically, a design system defines the front-end components that make up a user interface (UI) and how they work together to improve the user experience (UX). Or in other words, it defines the ‘look and feel’ of digital products, including websites.


Why is a design system important?

There are many reasons why a design system is important – especially for industry-leading brands that support countless digital products – but for the sake of brevity let’s focus on three:

  • Build: Saves time and money creating digital products. Creating and maintaining multiple themes is incredibly costly to the Open Y Core Team. A design system will allow Y Associations to have highly accessible, unique, brand-compliant products that are much easier for the community to create and maintain.
     
  • Improve: Creates a better, more consistent customer experience. Consistent design standards make Open Y products easier for our customers to use. They also make it easier for partners to create (and contribute) new products back to the distribution (by being less theme-dependent).
     
  • Maintain: Saves time and money maintaining digital products. Limitations within individual themes often require Y associations and their partners to customize the Open Y codebase. Design systems help reduce the need for such customizations. This helps simplify the upgrade path and reduces the time and cost needed to support customizations when new code updates are released.


How will it be created?

The new Open Y design system will be based on the Atomic Design philosophy developed by Brad Frost, which breaks digital designs down into the following components [2]:

Atoms > Molecules > Organisms > Templates > Pages

This approach will help YMCA associations and their partners better understand how and why products are designed as they are, while enabling them to create new products quicker and easier. 

In addition, a corresponding set of CMS improvements should also make it easier for content managers to ‘customize’ the look and feel of their products through the admin interface, instead of needing to manipulate the underlying code.


Who is leading the charge?

The Open Y Core Team will begin creating and developing an official design system in collaboration with our partners at Image X Media. At the same time, our partners at Five Jars will be developing the ‘modular site building tools’ that will leverage this design system to make creating and maintaining Open Y website easier than ever.


When will it be ready?

The Open Y design system project officially kicked off in January 2020. While specific details are still being worked out, we hope to have it added to the Open Y distribution by early 2021. 


Where can I learn more about design systems?

There are a myriad resources on the Web regarding design systems. We find that the following resources provided by InVision are particularly helpful:


Content Sources

[1] https://www.invisionapp.com/inside-design/guide-to-design-systems/
[2] https://bradfrost.com/blog/post/atomic-web-design/

Photo by Balázs Kétyi on Unsplash