Building a Design System for Ascend
Ascend Innovations
We help communities leverage data and technology to enhance the impact of behavioral health programs and services.
While Ascend is still fairly young, like any organization, over the years, we’ve built up a library of applications and products built in different languages for various clients, using many different design guidelines and with varying degrees of documentation depending on the budget and timeline of each project. As you can imagine, and as you’ve likely experienced, if you’ve ever been part of a product team or client-focused agency, this can cause issues and headaches when it comes to maintaining and updating these applications over time, both from an engineering and a design standpoint. “What language is that dashboard written in again?” “What color should this button be?”
With new team members coming on, new product efforts spinning up, and many new engineering and design projects on the horizon, it became clear that establishing a clear set of guidelines and a single source of truth for design and engineering efforts for future projects and rebuilds was going to be incredibly valuable. Like many organizations today, that meant building a design system for Ascend.
What is a Design System?
A design system is a collection of reusable components and guidelines that help designers and developers work together more efficiently. It establishes a common language, enabling teams to build consistent, cohesive, and user-friendly products.
For those unfamiliar, design systems have become the primary method for organizations to maintain consistent, user-friendly interfaces at scale and allow designers and engineers to focus on larger, more complex problems rather than re-hashing small components and interactions for every new initiative or project. By building a flexible core set of guidelines, components, and shared language, teams can work quickly to assemble screens and components from smaller components, enabling efficient, cohesive designs.
Design Systems & Small Teams
If you’ve looked at some of the larger, more established design systems like Google’s Material Design system, or IBM’s Carbon Design System, it’s natural to feel intimidated by the concept of building one for your team. But you must remember that any design system's most important aspect is building to your team’s needs. Ascend’s team is still very small and close-knit, with engineering, design, and product team members communicating constantly, and what we need to implement to build products efficiently looks a lot different from what a massive, global company like Google needs to maintain their brand and usability standards across thousands of screens and thousands of developers and designers.
While the eventual goal is to get to that level of documentation, what we needed to get started was much more straightforward. Teams can approach building a design system in the way that best fits the needs of the current project and goals.
So what were those goals for Ascend? Primarily, we wanted to create some simple, standard tokens (or elements) for color, typography, spacing, and layouts and use them to define a base set of components—form fields, buttons, tables, and cards that align to Ascend’s brand, while being flexible enough to be used for other client’s projects as well if needed, all while ensuring we’re aligning to ADA accessibility compliance standards. From there, those base components can be combined into larger elements and pages in our products, and we could continue to add new components as needed.
Building the Basics
So you’ve decided to start building a design system. Where do you start? Luckily, over the last decade, there’s been a ton of thinking about the best way to build modern applications. At Ascend, we adopted a loose version of the atomic approach to design, a methodology established by Brad Frost that you may have heard of.
Atomic design breaks down a design into smaller, more manageable components, starting with basic building blocks and working up to more complex structures. The basic building blocks are called "atoms" and can include colors, fonts, and icons. These atoms are combined to create "molecules," more complex components like buttons or form fields. These molecules can then be combined to create even more complex components like headers and footers, resulting in a fully functional design system. The atomic design methodology emphasizes modularity, consistency, and scalability in design systems, making it a popular choice for many organizations.
Using this method, we started by looking at Ascend’s brand and establishing tokens—the smallest building blocks of a design system—like color palettes, typography styles, spacing units, and layout grids for designs.
领英推荐
While establishing these core building blocks, it’s important to keep in mind the principles and usage of the design system as much as possible. We needed to represent Ascend’s brand well in the design system. Still, we also knew that the design system might need to be used to build products for other brands as well—what happens when we need to white label an application or change the color palette to match one of our clients? The components needed to be simple and highly flexible. We also knew that, primarily, the applications we’d be building with our design system would be focused on things like improving admin workflows, speeding up processes at public health departments, and providing information to at-risk individuals, so making sure our design language was clean, compliant, immediately understandable, and highly functional was incredibly important.
Getting Started
We’re still in the early days of establishing Ascend’s design system, testing it on multiple products, and establishing the processes we’ll need to maintain it over time. And, as anyone who has ever worked on a design system will tell you, a design system is never finished—it’s always evolving, taking in iterative feedback from product stakeholders and users to make it as usable and flexible as possible.
But, by working quickly, building only what we need to keep moving on current projects, and maintaining clear communication between different aspects of the product team, we’ve already found a lot of value in building out our design system’s components. Setting these core elements up with care and clear intention means we can create and iterate on designs quickly and have one source of truth for products moving forward at Ascend.
We’re currently building out the design system alongside?Ascend Notify, a text alert system for community health alerting. Focusing on the components we need for that system first while trying to take a long view and build for future applications to use these same elements in the future is setting us up for success in building out future applications using the same pieces.
Are you or your team building a design system right now? Are you on a small team wondering how design systems could work for your team? Let us know!
Some great places to learn more about design systems:
Great design systems to check out: