From Style to System: UX Design in Action for The Exchange

For the past two years we’ve been happily inundated with work from our friends at The Texas Education Exchange. If you haven’t caught word, they’ve built a comprehensive solution to help districts, school leaders and educators across the state get actionable insights about their schools and students in a way that is consistent and securely managed. This includes large-scale, secure data warehousing, intuitive data visualizations, and more.

Pretty cool, right? Well, here’s where we come in. As an official design partner of The Exchange, we had the awesome opportunity to develop a brand identity for the organization (check that out here). Moving into the beta launch of the solution, we knew that things could get a bit tricky. After all, more than seven different dev teams supported the creation of The Exchange infrastructure and its core applications. We recognized an opportunity — and a need — to establish a comprehensive design system for the organization. This system is all about making sure the user experience is seamless, consistent, and enjoyable. Keep reading for the inside scoop on how we did it.

A design system is so much more than a style guide (though this system began as one!). While it does include guidance for visual style, like how color should be used or which fonts to pick, the design system we created for The Exchange builds on that guidance by incorporating custom, reusable components and layout patterns to ensure all aspects of design across applications are consistent and cohesive. The Exchange Design System features guidelines, tools, and even the code that ties everything together. This tight guidance ensures that all aspects of the design are consistent and cohesive.

Initially, The Exchange worked on a simple component library to help siloed dev teams “speak” a similar design language (and code quickly). But The Exchange quickly realized we needed more than just the basics. While pre-existing component libraries have some theming options, they don’t do quite enough to surface the brand; what’s more, the simplicity of component libraries leaves a lot of gray area in terms of how components can be used. We knew it'd be helpful for our developer teammates but also essential for users to see consistent navigation patterns, button activities and data infographic behavior to help them find their way. Without this, users would’ve had to relearn styles with each new app, leading to a fragmented experience. Not great for helping educators find the data they need.

So we turned our visual identity and brand guidelines into a full-fledged design system. This system helps us stay aligned across teams and includes auto-update functions to keep everything current.

The Exchange Design System was used by multiple development teams who developed apps for the Exchange. We’ve given them:

Style guidance and recommendations…

• Accessibility standards for color contrast, font sizes and other development best practices.

• Color palette, revised and expanded for digital use to ensure consistency and accessibility.

• Data visualization standards to present data consistently across applications.

• Color semantics and theme formulas, to standardize color usage for different contexts.

• Border width and corner rounding styling specifics.

• Guidance and styled components to support light and dark mode to offer flexibility for different viewing preferences.

…Plus a toolkit that includes:

• A robust UX/UI guidelines document containing the style guidance and recommendations listed above.

• A Design Starter Figma File loaded up with ready-to-use color styles, type styles and components.

• Storybook documentation that provides guidance and code for each component to streamline processes and serve as a source of truth for both designers and developers.

These elements create a strong foundation that delivers a predictable user experience across all applications within The Exchange.

The design system cuts the guesswork and helps end users find what they need.

• Enhanced Usability: Important information, such as common assessments and performance data, is easy to find.

• Time Savings: Users don't have to relearn how to use each app.

• Smooth Transitions: Switching between apps is seamless — not only because the design language is the same, but also because similar paradigms for navigation are present in every app.

• Brand Trust: Consistent design builds credibility for The Exchange.

• Security and Credibility: Well-designed apps feel secure and trustworthy.

This design system isn't just for now; it's setting the stage for future development too. By standardizing basic functionalities it acts as a springboard for new applications. Last spring we spent four to five months developing the base components along with version one of the guidelines. Since then, we've continuously added to and refined the system alongside the other design and development teams contributing to The Exchange.

Here are some of the cool things we’ve included in the design system — these visuals show just how detailed and comprehensive the system is.

Here at CDW we're pretty dang impressed with how far we've grown with The Exchange Design System — it’s a great example of what we can achieve with collaboration and attention to detail. This system not only makes current apps better but also sets the stage for future projects, ensuring a seamless and efficient experience for schools across Texas. That’s something we’re happy to hang our hats on!

• Letty Fuentes at The Texas Education Exchange.
  
• Amy Musgrave and Miki Moynihan at Texas Education Agency.
• Josh Jeffryes at Data Society. 
• Jami O'Toole and Noah Bookman from Education Analytics, who supported us in our work.
• The EdWire team, who lead the initial coding of the components and integration into Storybook.
• Other UX folks across the teams with whom we collaborated.