Natural Elements – Managing a design system

Project Background

At Natsana, we recognized a growing need for a more cohesive and efficient design approach. Our existing design processes were becoming increasingly fragmented, with inconsistencies in visual elements, interaction patterns, and user experiences across different products and platforms. This lack of uniformity was not only causing confusion among our users but also leading to inefficiencies within our design and development teams.

Role

As a UX Designer, I proposed the idea of creating a Design System to address these challenges. I took on the role of Design System Manager, leading the initiative from inception to implementation. My responsibilities included conducting initial research, defining design principles, creating and documenting components, and ensuring smooth integration with our development workflows.

Goals

Ensure a cohesive look and feel across all products and platforms.
Streamline the design and development workflow.
Support the growth and evolution of our web shop interface.
Foster better communication and collaboration between designers, developers, and other stakeholders.
Maintain a strong and recognizable brand identity.

Challenges

Initial Buy-In

Challenge: One of the primary challenges was securing initial buy-in from all stakeholders, including designers, developers, and management. There was skepticism about the time and resources required to develop and implement a comprehensive Design System.

Solution: We addressed this by clearly communicating the long-term benefits of a Design System, such as increased efficiency, consistency, and scalability. Demonstrating early prototypes and quick wins helped illustrate the value and gain support.

Balancing Consistency with Flexibility

Challenge: Striking the right balance between consistency and flexibility was challenging. While it was essential to maintain a unified design language, different products and features sometimes required unique solutions.

Solution: We developed flexible components and patterns that could be easily adapted without breaking the overall consistency. Guidelines were created to help designers understand when and how to deviate from the standards when necessary.

Maintaining and Updating the System

Challenge: Keeping the Design System up-to-date with evolving design trends, new features, and feedback from users required ongoing effort and resources.

Solution: We established a dedicated team responsible for maintaining and updating the Design System. Regular reviews and a clear process for proposing and implementing changes ensured the system stayed relevant and effective.

Cross-Disciplinary Collaboration

Challenge: Ensuring effective collaboration between designers, developers, product managers, and brand managers was critical but sometimes difficult due to differing priorities and communication styles.

Solution: We fostered a culture of open communication and mutual respect. Regular workshops, feedback sessions, and shared goals helped align everyone’s efforts and maintain a collaborative environment.

Process

To begin, I conducted a thorough review of Natural Element’s product ecosystem. This included their e-commerce website and marketing materials. The goal was to understand not just the aesthetics, but also the functional requirements of the product. I examined the following:

Brand Alignment

The brand’s identity was already well-defined in terms of tone and visual elements (e.g., earthy color palettes, clean typography). However, these elements were not consistently applied across the digital platform. I worked closely with the brand team to ensure that the design system would capture the brand’s essence of health, trust, and simplicity, while also being flexible enough to evolve with future product offerings.

Product Goals

The product team emphasized the need for scalability, as the product line was expected to grow rapidly. This meant the design system needed to be flexible, allowing for new products, features, and categories to be added without introducing inconsistencies. Stakeholder interviews helped clarify long-term goals, ensuring that the design system could support new functionalities.

Audit of Existing Components

After gaining a clear understanding of Natural Element’s product needs, I conducted a comprehensive audit of their current UI components. The purpose of this audit was to identify inconsistencies in the user interface that were impacting both the user experience and the efficiency of the design-development workflow.

Cataloging UI Components: I began by compiling all the existing UI elements used across the website and mobile app. This included buttons, forms, navigation elements, icons, and product cards. I collected these elements into a shared document, which served as a reference for comparing visual and functional consistency. Each component was analyzed based on its appearance, behavior, and usage context.

Cross-Platform Inconsistencies: One of the key findings from the audit was that components varied significantly between the website and marketing materials, such as e-mail newsletters. For example:

Button Styles: Buttons on the website used different color schemes and sizes compared to the e-mail newsletters, even when they served the same purpose.

Typography: Fonts were not consistently applied, with product descriptions and headings appearing in different sizes across different pages and platforms.

Accessibility Concerns: The audit also revealed accessibility issues. Certain text elements did not meet the minimum contrast ratio, particularly on product pages with lighter background colors. Additionally, some interactive elements, such as buttons and icons, were not sufficiently labeled for screen readers, making the product less accessible to users with disabilities.

Design Principles

To create a cohesive and scalable design system for Natural Elements, it was essential to define a set of core design principles. These principles would act as the guiding framework for all design decisions, ensuring that the system was not only visually consistent but also functional and adaptable across various platforms.

Consistency

Ensuring uniformity across all touchpoints of the brand was a top priority. From the website to every user entry point, every interaction and visual element needed to maintain a consistent look and feel. This principle focused on aligning typography, colors, and UI components across platforms to provide users with a seamless experience.

Scalability

With Natural Element’s product line expected to grow, the design system had to be flexible and scalable. New products, features, and categories would be added over time, and the system needed to accommodate these without introducing design debt or inconsistencies. The principle of scalability informed the creation of modular, reusable components that could be easily adapted as the brand expanded.

Accessibility

As a health-focused brand, accessibility was a fundamental consideration. The design system was built to be inclusive, ensuring that all users, regardless of ability, could engage with the brand’s products. This meant adhering to WCAG standards for color contrast, designing with keyboard and screen reader compatibility in mind, and creating clear, intuitive navigation.

Simplicity

The brand’s mission to promote natural health and well-being translated into a design philosophy of simplicity. The user interface needed to be clean, uncluttered, and easy to navigate, aligning with the idea that users should focus on product benefits without being overwhelmed by the interface.

Branding

Aligning the design system with Natural Element’s brand identity was crucial to maintaining brand recognition and trust. The brand’s core values—health, trust, and simplicity—were central to shaping the visual and functional aspects of the system.

Color Palette

This monochromatic palette also made the interface accessible, providing high contrast for users with visual impairments and meeting WCAG standards for readability.

Typography

The brand’s typography choices needed to balance readability with the aesthetic of simplicity. I selected a modern, sans-serif typeface that conveyed a clean and professional look, while being easy to read across all devices. Font weights were standardized for headings, subheadings, and body text to ensure consistency and clarity:

Headings: Used bold, large fonts to capture attention and guide users through the content hierarchy.
Body Text: Medium weights and ample line spacing ensured that product descriptions and details were easy to read, especially on mobile devices.
Callouts & Emphasis: I introduced subtle variations in font weight and size for call-to-action buttons and key product information, making these elements stand out without overwhelming the user.

Voice & Tone

The brand voice of Natural Element is calm, trustworthy, and informative. This was translated into the design system by ensuring that UI components like buttons, notifications, and labels communicated clearly and without jargon. For example, buttons for purchasing products or subscribing to a service used direct, simple language (“Buy Now,” “Subscribe,” etc.) to create a sense of confidence and ease for the user.

Core Components

The decision-making process behind selecting the foundational elements of the design system—such as color schemes, typography, grid systems, and spacing—was driven by both the brand identity and user needs. Each component was chosen to ensure clarity, ease of use, and scalability.

Color Scheme

With black and white serving as the primary colors, the design needed to maintain a clean, modern aesthetic that could accommodate future changes and scale without becoming visually overwhelming.

Primary Colors: Black was used for important elements like headings, text, and primary action buttons, ensuring contrast against white backgrounds.
Accent Colors: Shades of gray were sparingly introduced to differentiate sections, borders, and inactive states. These subtle contrasts ensured a sense of structure without cluttering the design.

Typography

Consistency in typography was crucial for both readability and brand alignment. A modern sans-serif font was selected, which had the versatility to work across various screen sizes and devices. Font sizes and weights were clearly defined to create a visual hierarchy that guided users through the product offerings:

Titles and Headers: Larger, bold text helped highlight important content, such as product names and section titles.
Body Text: A medium weight with ample line spacing ensured easy readability, especially for users navigating detailed product descriptions or blog articles on smaller screens.

Grid System

To create a structured layout that worked across both desktop and mobile platforms, I implemented a flexible 12-column grid system. This allowed for adaptable layouts that could easily scale down for mobile without losing visual balance or structure. The grid system also ensured that components like product cards, navigation menus, and call-to-action buttons were aligned uniformly across the interface.

Spacing & Padding

Consistent spacing was crucial to maintaining a clean and uncluttered user interface. I defined a set of spacing rules for margins and padding to ensure that all components had adequate breathing room. This not only improved readability but also reinforced the brand’s commitment to simplicity and ease of use. By establishing a standardized spacing system, I eliminated the visual clutter that had previously existed in the product pages, creating a more harmonious and organized layout.

Interactive States

To ensure consistency in user interactions, I standardized the behavior of interactive components such as buttons, links, and form fields. Hover states, active states, and focus indicators were defined using shades of black and gray, ensuring a cohesive experience across all platforms.

Buttons: I used black for active states and darker shades of gray for hover states, providing clear visual feedback for users.
Form Fields: Clear, consistent error messages and success states were defined to guide users through tasks like product purchases or subscription sign-ups.

Outcome

The introduction of a design system for Natural Elements significantly improved workflow efficiency specially within the Design Team. Prior to the system’s implementation, inconsistencies in UI components, color usage, and typography led to redundant work, as designers, marketers and developers frequently needed to re-create or adjust elements for each new project or feature.

Reduction in Design Inconsistencies

By standardizing components, typography, and color schemes, the design system eliminated the variations that had been present across different platforms. This ensured that all UI elements followed a unified style guide, reducing the need for constant revisions and feedback loops. In fact, post-launch, we saw a 30% reduction in design revisions, as the system provided a clear and consistent reference for all projects.

Adoption Across Teams

The design system was not just a tool for the design and development teams; it was adopted across multiple departments within Natural Element, ensuring that all stakeholders worked with a unified brand vision.

The marketing team utilized the design system to ensure that all digital campaigns, landing pages, and promotional content adhered to the same visual and functional guidelines. This consistency across marketing materials resulted in a more cohesive brand presence, leading to higher engagement rates on promotional content.

Takeaways

Start Small and Scale Gradually: Starting with a few key components and gradually expanding the Design System proved to be an effective strategy. It allowed us to demonstrate value quickly, gather feedback, and refine our approach before scaling up.

Clear and Comprehensive Documentation is Crucial: Detailed documentation in Zeroheight was essential for ensuring that the Design System was used correctly and effectively. Providing clear guidelines, examples, and best practices helped team members understand and adopt the system.

Continuous Feedback and Iteration: Establishing a continuous feedback loop with all stakeholders was vital. Regular feedback sessions and iterative improvements ensured that the Design System remained useful and aligned with the needs of the team.

Prioritize User Needs: Keeping user needs at the forefront of our design decisions helped maintain focus and drive the success of the Design System. User research and testing were integral to creating components that provided real value.

Foster a Culture of Collaboration: Encouraging collaboration across disciplines enriched the Design System and ensured that it addressed the needs of different teams. Cross-disciplinary workshops and open communication channels were key to fostering this culture.

Adaptability is Key: While consistency is important, being too rigid can stifle creativity and responsiveness to unique project requirements. Building flexibility into the Design System allowed it to be more widely adopted and useful in diverse contexts.

Commit to Accessibility Early: Integrating accessibility from the beginning rather than as an afterthought was crucial. This proactive approach ensured that our Design System was inclusive and met the needs of all users.

By overcoming these challenges and learning from the process, we developed a robust and effective Design System for Natural Elements. This experience not only improved our current workflows and products but also provided valuable insights that will inform future projects.