What do you do when you grow quickly? You cheer! You Smile! Investors are happy, customers are loving the product, management is on fire (figuratively and literally). But what happens to product teams? How does that look like to Engineers, Designers and Product Managers? Throw in Acquisitions, growing number of contractors, new hires and you get yourself a problem that costs millions in inefficiencies. Specially if you're dealing with a modest clientele of 11,000 organizations as your customers.
Design and code inconsistencies in product lines, spotty communication between squads, different codebases. This means that there's a lot of double work... which means a lot more than double the expenses. So teams are gradually thrown into an expensive pickle. What do we do?
Although not the entire solution, a design system is a big part of the answer. We partnered with Relias' product leadership to define and create a design system to reduce these problems and systematically deploy across the org. We designed a robust, beautiful but also scalable system as the single source of truth. A collection of predefined, reusable design elements and guidelines that help ensure consistency and coherence in the design of a product and across all brand touch points. Alleviating varying codebases from the burden of inconsistencies, bringing it a clearer focus towards re-usalability to gear resources into meeting the customer needs more effectively.
The design system had several characteristics, specially because of their clientele. Healthcare workers are busy, on-the-move and demand clarity in the interfaces they work with on a daily basis. Accessibility, scalability and practicality were the core principles that drove the work we did for Relias.
It's pleasure working with products that actually do make a difference in peoples lives.
In the realm of design systems, "atoms" refer to the most elemental building blocks of design, encompassing basic design elements such as fonts, colors, icons, and fundamental user interface components like buttons and input fields. They serve as the fundamental building blocks upon which the entire design system is constructed.
It's the foundational elements that enable consistency, efficiency, scalability, and collaboration. They form the cornerstone of a well-structured design system, leading to a more streamlined design and development process and, ultimately, a more cohesive and user-friendly end product.
These represent the next level of design elements, one step up from the atomic level. Molecules are created by combining multiple atomic elements, such as buttons, input fields, and labels, to form more complex and self-contained components like search bars, form groups, or card elements. These cohesive combinations of atoms provide a practical and reusable solution for common design patterns within a project. Molecules help maintain consistency and efficiency by encapsulating related elements and interactions, making it easier for designers and developers to construct higher-level components and ensure a cohesive user interface across the system.
These are higher-level design components that integrate both molecules and atoms, forming self-contained and functional parts of a user interface. These complex elements, such as navigation bars, product cards, or content sections, bring together smaller building blocks to create coherent and reusable units. Organisms play a key role in maintaining consistency, efficiency, and a unified user experience throughout a project, as they encapsulate related elements and interactions within structured, modular design components.
Templates establish the layout and structure of pages or sections, guiding the placement of organisms, molecules, and atoms. They offer a consistent framework for designing and development, facilitating content integration while ensuring overall design cohesion.
Pages represent the highest-level components, embodying the specific content and data presented to users. They are the actual instances of templates, where real content is incorporated into the predefined layout and structure. Pages ensure that the design system adapts to the unique requirements of different contexts, allowing for a tailored and user-focused presentation of information and functionality.
I highly recommend working with LIFT Agency! They worked to get our new design system implemented, which has been the foundation for many of Relias’ products. The team delivers high-quality and thoughtful work. They've been a great partner throughout the process.