A new design system for CarmaCare website
A design system is not just a collection of components but a framework that fosters collaboration, ensures brand consistency, and accelerates product development. At CarmaCare, I took on the challenge of evolving our design practices by creating a robust Design System that integrates seamlessly across our digital products.
In this project, I concentrated on establishing design principles, setting up an accessible color palette, and defining responsive layouts. These elements are not just aesthetic choices but strategic decisions that drive our user experience. This system was built with scalability in mind, enabling our team to maintain a consistent and unified brand voice, regardless of the platform or device.
Below, you'll see a selection of the components, documentation, and guidelines I developed. This project illustrates how thoughtful, user-centered design standards can enhance efficiency, reduce redundancy, and enable our team to deliver cohesive, high-quality experiences across all touchpoints.
A clunky user interface and user experience flaws raise questions about the platform's credibility, while cluttered design files tend to reduce productivity.
Enhance user experience by introducing a powerful design system to build better workflows. This also means the design process will be streamlined.
Grid Layout
I have implemented a meticulously designed grid system to ensure optimal visual effects and user experience across different devices. For mobile devices (390px), I used a 4 column layout with a 16px gutter width and a 16px margin. This design ensures that each element has sufficient space, enhancing readability and usability. For tablet devices (960px), I chose a 12 column layout with a 24px gutter width and a 32px margin. This setup allows for more layout options and greater flexibility, meeting various design needs while providing better visual effects and user experience. Finally, for desktop devices (1512px), I also used a 12 column layout but with a 32px gutter width and a 64px margin. This configuration offers maximum flexibility, accommodating more content and complex layouts, while ensuring the content is centered and has ample breathing space, enhancing the overall aesthetic and balance of the design. These grid system settings are carefully designed based on the characteristics and user needs of different devices, ensuring a consistent and excellent user experience across all devices.
Typography
Typography is an important aspect of design that refers to the style and appearance of text in a design. Typography includes elements like font face, font sizes, font weights (e.g., bold, italic), line spacing, and other formatting options. These elements are chosen and used consistently within the design system to create a cohesive visual language.
For the CarmaCare website, I chose Roboto because of its modern design and clean lines, making it suitable for various applications. Additionally, Roboto has excellent readability, especially on small screens and low-resolution displays, which is crucial since a significant portion of our users access the site via mobile devices. Furthermore, Roboto is a Google font, ensuring good compatibility across different operating systems and browsers, providing a consistent display on all devices.
Color palette
In CarmaCare's design system, each color is assigned a specific role, carrying distinct meanings based on their function within the interface. Defining these color roles simplifies modifications and customization in the future. Additionally, this approach extends the color system to ensure consistency across multiple touchpoints.
Iconography
Icons serve as visual aids, helping users complete tasks efficiently. In the CarmaCare design system, I selected the Petal icon library due to its simplicity and information-rich design, which complements the overall visual language of our system. I opted for a straightforward icon set to minimize cognitive load, as detailed icons can overwhelm users. By focusing on simplicity, I aim to ensure that users can easily comprehend the concepts represented by the icons and recognize them on smaller screens.
Button
A single button can have various states, with the most common being default, active, hover, and disabled. Given that the majority of CarmaCare's users access the site via mobile devices, I decided to combine the hover and active states into a single form in the Design System. The image below illustrates three different types of buttons: default, active/hover, and disabled. Each type also has an associated icon version. You can see examples of buttons in different states below. In addition, I divided the buttons into two types according to color: general use and CTA. Finally, to facilitate future interface design across different touchpoints, I designed the buttons to be appropriately sized for each screen size.
Cards
I designed the cards in the CarmaCare Design System to present complex information to users in a more easily understandable way. Through a structured layout, the cards clearly display various types of content, including text, images, links, and actions. This enhances the user experience and the overall aesthetics of the interface.
Form Fields
Another major component category I created for CarmaCare is form fields, which, like buttons, need to accommodate different states such as default, focus, error, and disabled. A key aspect of designing these fields is ensuring accessibility, such as keeping labels visible when selected and using more than just color to indicate errors. Each state is defined with clear visual cues to guide users effectively. This approach ensures that all users, including those on mobile devices, can interact with the form fields easily and efficiently, providing a consistent user experience across all touchpoints.
Other Components
Design systems are inherently complex, and while buttons and form fields are among the most essential components, in CarmaCare design system, also includes other crucial elements such as Accordions, Alerts, Progress/Notification Bars, Dropdowns, Tables, and Tabs. These components are meticulously designed to meet the specific needs of our website, ensuring usability, accessibility, and consistency across all devices. Each component works seamlessly together to create a cohesive and efficient user experience, adaptable to various scenarios and user requirements.
A design system is like a living organism—complex and constantly evolving. I am continually updating this design system. Here are the main components of the complete system:
Documentation
Documentation is a shared space that explains when and how to use the design system, including design principles and best practices.
Visual Language
The visual language defines the brand's visual style, including colors, fonts, icons, and typography, ensuring a consistent brand image.
Pattern Library
The pattern library (component library) includes all reusable design elements, such as buttons, form fields, and cards, ensuring a consistent user experience.
Brand Guidelines
Brand guidelines cover design principles, tone of voice, and writing style, ensuring brand consistency across all communication channels.
CSS Framework
The CSS framework provides the foundational style rules for developing the product's front end, helping developers quickly implement designs, improving efficiency, and ensuring product consistency.
These components together form a complete design system, enhancing the efficiency and quality of work for design and development teams.
