Menu
Menu
The Problem
The Nature Conservancy, a global leader in environmental conservation, uses its website as a vital tool to communicate its mission and drive user engagement.
After conducting an interface audit of The Nature Conservancy site, I identified various redundancies and inconsistencies in design components and patterns across the site.
For an organization with a large, content-rich platform, these issues can hinder user engagement on the site, compromise accessibility, and weaken brand integrity, leading to frustration and a potential loss of trust among users. This fragmented experience can make it harder for users to find information and contribute to the organization’s mission.
Internally, the lack of a cohesive design system impacts operational efficiency. Inconsistent design hinders collaboration between designers and developers, increases development time, and adds to maintenance costs. It also negatively affects website performance, leading to slower load times and scalability issues, which can limit The Nature Conservancy’s ability to adapt and grow their digital presence.
The Solution
To address these challenges, we developed Ecosystem, a unified design system that standardizes all design components and guidelines across The Nature Conservancy’s website.
Ecosystem is supported by two key resources:
Ecosystem transforms the user experience by promoting consistent, intuitive UI design to enhance usability, accessibility, and engagement on the site.
The system also fosters better collaboration between designers and developers, minimizing errors and streamlining workflows.
The open-source nature of Ecosystem further enhances these benefits, promoting transparency and inviting community contributions.
Overall, Ecosystem enhances website performance, reduces operational costs, and ensures a high-performing, maintainable platform, allowing The Nature Conservancy to focus more effectively on its core mission of global conservation.
Design System Users
Internal Users: Designers and developers in The Nature Conservancy.
External Users: Anyone in the public who wants use Ecosystem as inspiration for their own websites, or help the design system evolve by providing feedback.
The Team
Alya Zouaoui – MS Data Analytics & Visualization, Advanced Certificate in User Experience
Chu Yuan Chiu – MS Information Experience Design
Yeatasmin Shiropa – MS Information Experience Design
Tools Used
In order to uncover issues with The Nature Conservancy’s current design system, it was crucial to understand how it’s structured. This involved deconstructing the website’s interface and categorizing its unique elements in a UI Inventory.
Analyzing the website’s interface in this manner provided valuable insights into recurring patterns and notable discrepancies.
Inconsistencies in component usage
Various inconsistencies were identified in how components were utilized across different sections of the website, leading to a lack of cohesion.
Variability across similar components
While certain components recurred throughout the site, several discrepancies in size, color, and spacing were observed, indicating a need for standardization.
Absence of clear typographical hierarchy
A consistent typographical hierarchy was notably absent, impacting readability, visual coherence, and communication of the organization’s message.
This comprehensive deconstruction process served as a foundation for understanding The Nature Conservancy’s current design landscape and informed the development of a cohesive and standardized design system tailored to its specific needs.
The process of deconstructing the design system and creating a UI inventory was conducted individually. Before coming together to recreate the design system as a team, it was crucial to communicate my observations and challenges.
This fostered a collaborative discussion on how to tackle these issues, while also drawing inspiration from other design systems, such as The Goldman Sachs Design System, Google’s Material Design, and Adobe’s Spectrum, to enrich our new design systems framework.
Understanding the organization’s values and principles, as well as our own, allowed us to establish a common language and vision for our new design system.
Connected
Our design system fosters connectedness by ensuring that every component, guideline, and interaction seamlessly integrate together.
Concise
We prioritize simplicity to streamline the user experience, eliminating clutter and enhancing usability for efficient task completion.
Confident
Our bold design language instills trust and reliability, empowering users to navigate with assurance and strengthening brand loyalty.
Impactful
We create memorable experiences that resonate emotionally, leaving a lasting impression of inspired and motivated users.
Our clearly defined principles allowed us to work together as a team to solve design problems with consistency and a shared purpose.
Brad Frost’s Atomic Design methodology aligned perfectly with our design system’s core principles.
Atomic Design bridges the gap between designers and developers by constructing components in a modular approach using a token system, ensuring seamless integration within Ecosystem.
This approach not only promotes simplicity and consistency but also guarantees reliability, resulting in user experiences that are both clear and impactful.
By prioritizing reusable components that can be combined and repurposed, this enables the creation of cohesive and memorable interfaces that align with Ecosystem’s core design principles.
This process allows Ecosystem users to switch component variants and styles seamlessly, promoting efficiency when designing pages and prototyping interactions.
The UI kit integrates all component states into the system while offering clear visual examples for designers and developers.
This establishes consistency and streamlines component implementation, leading to more intuitive and user-friendly interfaces.
The UI Kit features all available organisms and their variations (e.g., navbar in dark or light mode), allowing users to explore and interact with different states. This approach maintains design consistency, clarifies how element appear in various scenarios, and simplifies adaptation to different design requirements.
Tokens are the fundamental building blocks of a design system that encapsulate visual attributes, or primitives, such as colors and spacing into reusable units. The token system I developed promotes consistency across site pages by offering a shared language for both designers and developers.
The Central Hub of the UI Kit: Primitives
The primitives communicate all of the possible color and spacing options available in Ecosystem. These are the baseline elements for all tokens, while tokens are the elements directly applied to components.
Creating a Clear Hierarchy with Tokens
The token system is structured in a hierarchical manner and labeled according to specific component usage to increase the efficiency in locating and applying tokens.
Light & Dark Mode
Light and dark mode are directly embedded into the token system as this promotes efficiency by preventing the need to redesign components for each mode. Designers can easily translate components into dark mode through one click on the right panel of the UI kit.
Dark mode was implemented into our design system as it promotes accessibility for users with visual impairments or sensitivity to light, allows users to adapt the interface to their specific needs and preferences, and reduces a user’s exposure to blue light.
Incredibly time consuming and labor intensive process
Requires a comprehensive understanding of how every single component connects in the UI kit
Naming each token took several iterations to establish a clear and understandable hierarchy
Documenting a design system is crucial for ensuring that design and development teams have a shared understanding of how to create consistent, cohesive digital products.
A well-documented design system serves as a single source of truth, providing clear guidelines and resources that streamline the design process, reduce redundancy, and promote collaboration across disciplines. It helps designers and developers align on visual styles, interactions, and accessibility standards, ultimately enhancing the user experience and maintaining brand integrity.
Challenges
I was unable to export the token system from UI kit into Documentation Site aside from JSON format as Figma’s token system was still in the Beta version, so every token was manually inserted.
Creating examples to visually communicate how to use the UI kit was time consuming.
The documentation phase exposed several issues and gaps in the UI kit that needed to be addressed (i.e. ensuring all components have tokens, are linked to the correct tokens, and are labeled consistently).
Key Takeaways
Helped us justify and communicate the design decisions we made in a clear and concise manner.
Showed us how there is no right or wrong in creating and documenting design systems.
Helped us communicate and emphasize accessibility.
Zero-height was incredibly easy to use and gave us the ability to link components directly from the Figma UI kit.