About Project
This project aims to establish a cohesive design system that harmonizes components, providing clear guidelines and best practices. This initiative will streamline the design, testing, and development processes for Dezy's products, ensuring consistency across all the company's offerings.
When I joined Dezy, it was still in its early startup stage and lacked a design system entirely. There were no foundational components, resulting in products that were inconsistent, outdated, and sometimes designed by developers.
One-stop dental care solution
Dezy aims to establish itself as a premier, specialized brand within the dental care ecosystem.
The Problem
The lack of a design system led to inconsistent and disorganised designs across the company's platforms.
The Solution
Establishing a design system served as the singular source of truth, unifying design foundations, and components while providing clear and precise guidelines for implementation.
The Process
Initiation: Met with design team, and initiated Design System project. Reviewed company's design materials, and discussed with founders for insights.
Learning & Research: Explored the essence and significance of design systems through articles and videos, while also delving into existing design system libraries for insights and guidance.
Goal Setting: Defined project objectives with design and development heads, and prioritized components based on importance.
Design: Created foundational elements (grids, typography, colors) and designed responsive components.
Documentation: Documented component behaviors for developers and designers to ensure consistent implementation.
Development: Collaborated with the development team for component development and integration into existing/new products.
What is Design System
Design systems are continuously evolving collections of reusable components, principles, and guidelines. They provide designers and engineers with a common language to ensure consistency in product and web design.
The true essence of a design system lies in its capacity to offer guidance to designers and engineers, enabling them to craft seamless user experiences and digital products. Effective design systems not only assist designers in understanding what and how to create but also provide the reasoning and inspiration behind the design choices.
Why Design System is needed?
Design systems are crucial because they establish consistent design patterns, streamline development processes, enable scalability across different platforms, foster collaboration among teams, and simplify maintenance and updates.
Facilitates Consistency
Better Communication
Efficiency
Team Work
Clarity to developers
Atomic Design System
Atomic Design is a methodology created by Brad Frost seeking to provide direction on building interface design systems more deliberately and with explicit order and hierarchy.
Grid System
A grid comprises columns, gutters, and margins, forming a structural framework for arranging elements on a page. It serves as a consistent guideline for placing text, images, and functionalities throughout the design of a product or website, ensuring visual harmony and coherence.
Typography
Typography is the art of arranging text to make it clear and visually appealing to the reader. It involves the style, appearance, and structure of fonts, which can set the mood, tone, and emotions you want a product to convey.
Typeface: Buenos Aires
Our brand font is Buenos Aires for both online and offline applications. Buenos Aires feels approachable and clear. Due to subtle, playful moments, the font looks friendly. Whether body text or title, the open forms appear generous. Our logotype is also based on our brand font.
Buenos Aires comes in many weights, but we only use three – Book, Regular and Semibold. Headlines are written primarily in Buenos Aires Semi Bold. Subheadings are written in Buenos Aires Regular to allow them to stand out from the body copy. We use Buenos Aires Book across our body copy. If we need a part of sentence to stand out – we can use Buneos Aires Regular in the same.
Spacing
A fundamental yet critical aspect of exceptional design is proper spacing. It serves to organize information effectively, establishing the rhythm, structure, and hierarchy within our designs.
For spacing definition, 4px it's a good basic unit to work with. The number 4 is easily multiplied, and provides flexible and consistent, yet distinct enough, steps between.
Color Palette
The range of colours in our palette allows for diversity and richness. We combine a spectrum of lavenders and golden so we can appeal to everyone. Unique and stand-out in the world of dental care, our palette feels soft and positive as well as welcoming while also being a bit elevated.
Illustrations
Illustrations in a design system are essential for conveying complex ideas, guiding users, and adding personality to digital interfaces. They complement the user experience by providing visual context and warmth.
Style
Our illustration style comprises of clean and minimally drawn line drawings with an uneven stroke with a selective use of brand colors. The free flowing line forms make them look casual and approachable even while communicating medical and technical information about our various products and services. The digital style is easily scaleable and can be used across our touchpoints including packaging and environmental graphics
Guide
The main points to know while creating this style are :
- The brush stroke should be uneven (pressure sensitive).
- The strokes should be simple, the detailing can depend on the element being illustrated.
- The illustrations should be based on reference images as they are real-life scenarios.
- One composition should have maximum of 3 brand colors in use.
Iconography
Creating an icon family requires a thoughtful approach and a bit of iteration for the set to be organized, well-documented, and tested in context. To achieve harmony for an icon family, we need to maintain the same stylistic rules throughout: 1.5 px centred stroke and grid for 24x24px icon size.
Primary Icons
Our primary iconography is used to call out our services. They are clean and minimal with simplified forms in its design aesthetics. The compositions are mostly meant to be bilaterally symmetric visually, which means the main elements tend to come in the center of the framing circle and elements are divided in a balanced way on both the halves. The primary colors are used selectively on these icons.
Secondary Icons
Our secondary icon style is clean, minimal, rounded and soft. We can do a 2 color treatment or a single color treatment based on the use case.
Construction
We have a square grid divided into 11 equal parts both vertically and horizontally. All the icons are created within this space using the grid lines as a base for its construction. We will use our icons in our spaces as signages, in our digital platforms in relevant touchpoints and in some of our in-store collaterals.
UI Components
Components are the reusable building blocks of our design system. Each component meets a specific interaction or Ul need, and has been specifically created to work together to create patterns and intuitive user experiences.
Buttons
Buttons are typically stylized links, strategically designed to captivate users and guide them toward specific actions. They serve as interactive elements that can link to other pages or facilitate tasks such as form submissions or online purchases, directing user engagement and interaction within a digital interface.
Accordion
Text Fields
Text fields are UI elements enabling users to input text. They commonly appear within forms and dialog boxes. Designing text field components involves creating clear affordances for interaction, ensuring their visibility in layouts, optimizing them for efficient input, and making them accessible to all users, thereby enhancing usability and user experience.
Toast
A toast is a user interface element that provides users with brief, unobtrusive information about an action they took or a system event that occurred.
Selection Controls
Selection Controls in a design system refer to interactive elements that allow users to choose or pick items from a set of options. These selections can take various forms, including checkboxes, radio buttons and toggle switches.
Pagination
Navigation
Navigation within a design system refers to the structure and organization of elements that enable users to move between different sections, pages, or features within a website or application.
In Conclusion
Creating a design system is an ongoing journey, a project with no end in sight. Our initial steps in implementing basic components have already significantly impacted the company. The system has boosted the efficiency of our design and development teams, making work smoother and faster with less friction. The design system has established a clear identity for our brand, improved workflows, and enhanced the user experience for our customers.
It was definitely an 'Everest' of a challenge. I learned a lot about resource management, and syncing with developers to ensure everything went smoothly. Despite the difficulties, I'm proud that I convinced management to give the design systems initiative a well-deserved chance. I consider this one of the most ambitious, complex, and mature projects of my design career.