Asterism Design System

A systematic approach to our product development — a source of truth for the team — simplifying the entire product design process while ensuring consistency across the organization.

  • Role

    UX Design Lead

  • Organization

    Wellstar Health System (2019 – 2021)

  • Tools

    Figma, Notion, Grammarly, VS Code, Miro

Overview

The Asterism Design System provides everything necessary to meet the requirements of the various digital products at Wellstar. Its high flexibility allows for easy customization of the system for new products or redesigning existing ones, ensuring consistency and coherence in visual style and user experience.

Goals

  • Accelerated time to market

  • Reduced development costs

  • Consistency and uniformity in visual appearance and user experience

  • Reuse of ready-made components and resources

  • Improved user experience

  • Scalability and adaptability to changing requirements

  • Reduced maintenance costs and simplified process of implementing changes

Role & Process

Design System Designer

As a designer, my work involved thorough project analysis, development of component libraries and guides, close collaboration with the product teams, and a constant commitment to ensuring high quality and design consistency within the project.

Here are some of the tasks I performed:

  • Conducted research to fully understand the task, target audience, context of use, pains, and needs of future users

  • Collaborated with the creative marketing team to develop a color palette that became the foundation for all company products

  • Created the architecture of the design system that met all necessary requirements and criteria

  • Developed product themes, including a set of tokens for various parameters

  • Defined the appearance, behavior, and structure of the core components of the design system, considering user needs and product requirements

  • Established standards and guidelines for the application of design system components and elements to ensure a consistent and harmonious project visual identity

  • Collaborated with the team through discussions and explanations of design decisions, idea exchange, and feedback

  • Tested and iterated on developed components based on user feedback to achieve optimal results

  • Created documentation and guides for using the design system to facilitate adoption by teams and ensure its consistent usage

Design System Manager

As a design system manager, I was responsible for effectively managing, developing, and ensuring consistency of the company’s design system. My work focused on establishing a strong foundation, developing new components and standards, and supporting teams in utilizing the design system. The following are the key tasks I performed in this role:

  • Management — developing a development plan, coordinating team work and processes

  • Development and Improvement — analyzing user needs, developing new components and standards

  • Consistency and Quality — establishing standards and guidelines, quality control

  • Training and Support — providing training on using the design system, offering support and consultations

  • Collaboration and Partnership — collaborating with other teams, participating in events and communities

  • Implementation and Adoption — presenting and demonstrating the design system, implementing and supporting it in projects

  • Growth and Learning — keeping up with trends and innovations, professional development

  • Feedback and Improvement — collecting feedback and analyzing data, making changes and improving the design system

Team

  • Design & Research

    Mellonee Mayo, JF Steele, Craig Brimanson. Liz McGee, Natalie Craig, Maggie De Barros

  • Product & Marketing

    Rob Zanin, Momi Redmon, Chris Kallio, Stephen Harper, Ted Darr, Fernando Mattos

  • Engineering & QA

    Leah Lindsey, Ralph Mallebranch, Nicholas Castro Price, Dianne Kokotoff, Nick Yaitsky

Project Background

Research

Previously, Wellstar lacked a unified design standard and common rules, resulting in inconsistent solutions and a lack of a unified user experience. Different products could use different component libraries, styles, and rules, leading to increased development costs and longer time to market.

Recognizing the importance of addressing this issue, we initiated the creation of a design system. Our goal was to establish a unified standard and develop a set of resources that ensured consistency and optimization in product design.

Before embarking on the development of the design system, we conducted thorough research to fully understand the current state of our products and identify key issues and user needs. This involved analyzing existing layouts and designs, as well as actively engaging with our target audience. We conducted user research, conversations, and interviews to gather valuable feedback and understand what our users specifically expected from the design system.

As a result of this research, we identified the necessary criteria and parameters that our future design system should meet. We had a clear vision of how we could enhance the user experience and ensure more efficient utilization of our products. These findings served as the foundation for the development of Asterism, aligning it with the needs and expectations of our users and establishing a solid groundwork for subsequent stages of product development and improvement.

Definition of the Main Components

During the development of the design system, we carefully crafted its architecture and defined the following key components and their purposes:

  • Base Components — a universal set of components that serve as the foundation for all our products

  • Product Component Libraries — in these libraries, we placed unique components specific to each individual product that cannot be reused in others

  • Color Palette — we developed a comprehensive set of colors that serve as the basis for all our products. Defining the color palette ensures a consistent visual identity and brand recognition.

  • Color Themes — we created a set of color tokens that were semantically assigned to various design elements. This development stage was challenging but exciting. Our goal was to create a compact and comprehensive set of variables that every designer can easily work with.

  • Typography — we defined a set of fonts and their usage in different contexts. For example, we established primary variables for headings and determined fonts for various textual elements in our products. This approach ensures consistency and legibility of the text.

  • Graphic — we collaboratively designed a set icons that can be used in various situations. They were specifically created with the expectations and preferences of our users in mind. Additionally, we developed a guide for using the icons to ensure their consistent application in our products.

Creating Product Themes

Creating product themes is a key stage in the development of a design system. A theme is a collection of tokens that describe various interface properties, including colors, typography, shadows, sizes, spacing, and more. Thanks to this theme, each component of Asterism can quickly and easily adapt to the requirement of a specific product.

Creating a theme is a process that requires significant effort and time. We conducted an analysis of the base components, categorized them into semantic groups, and developed a set of variables that cover various usage scenarios and future needs.

Testing Process

We didn’t have a dedicated tester position in the team, however, we found an effective approach to ensuring the quality of the design system. We actively conducted internal peer reviews of components, but we were aware that unforeseen issues could arise in new usage scenarios. Therefore, the main testing phase became the process of integrating the design system into products. We implemented the components into the product, gathered feedback from users and the team, carefully analyzed the data obtained, and made improvements when necessary. This flexible approach allowed us to reduce the development costs, but it required careful resource planning and team coordination.

It was important to allocate sufficient time and resources to the integration stage to ensure high quality and consistency of the components within the products. Communication and feedback with the team and users played a crucial role in identifying issues and finding optimal solutions. This allowed us to continuously improve, meeting the requirements and expectations of users.

Integration into Products

We always placed special emphasis on the process of integrating the design system into our products. It was an active and crucial stage for which we allocated significant resources within our quarterly planning. Our team actively engaged in the integration, taking on associated tasks to ensure the continuity and successful implementation of the design system. We closely collaborated with the user and engineering teams, gathered feedback, and analyzed it, striving to constantly improve and evolve the system at each integration stage.

Thanks to our efforts and resource planning, the integration into the products went smoothly and efficiently. We took into account all aspects of the process and aimed to create a safe and reliable environment for successful implementation. Continuous information exchange, feedback, and ongoing improvement were our guiding principles to ensure the quality and compliance of our design system when integrated into products.

Results and Achievements

With the implementation of Asterism, we have achieved significant results and accomplishments. Firstly, the engineering team’s productivity has noticeably improved. Consistent components and ready-made solutions from Asterism have allowed engineers to work more effectively, reducing development time and accelerating time-to-market.

The second important result is the enhancement of the user experience. A unified design language and cohesive interface elements have made our products more intuitive and user-friendly. They now have a consistent visual appearance, promoting recognition and strengthening our brand.

Furthermore, the implementation of Asterism has enabled us to significantly reduce development costs. Ready-made components and themes prevent redundant development efforts and bring significant economic benefits. The quick creation and modification of interface elements using pre-existing solutions greatly save time and resources.

In summary, the use of Asterism has led to increased productivity, reduced development time, and improved user experience. These achievements validate the value of the design system and contribute to our growth and success in the industry.

Conclusion

The design system development project has had a significant impact on my career and the success of the company. We have reduced development time, improved the user experience and solidified our reputation in the eyes of our users.

I express sincere gratitude to the entire team who enthusiastically and devotedly brought Asterism to life. Without their creative contributions and diligent work, we could not have achieved such significant results.

Asterism has become an example of success and will inspire us in future projects. I am proud of the accomplishments we have achieved and confident that they will serve as a foundation for further success and growth of Wellstar.