Refill with Consistency and Accessibility for The Nature Conservancy

Type

Research Project. Create the design system - Ecosystem for The Nature Conservancy.

Duration

6 weeks

My Role

UI kits
User Testing
Documentation

Tool

Figma

Team

3 Designers
Chiu(me), Yeatasmin, Alya

Overview

About

The Nature Conservancy, a global environmental nonprofit organization dedicated to conserving environment and providing sustainable solutions.

Project Goal

The goal was to create an accessible and consistent design system for The Nature Conservancy.
We began by analyzing and deconstructing all the elements on the website. Inspired by core values of the organization, we named the design system as Ecosystem. As a result, the UI kit was published on the Figma community and the design system was documented by Zeroheight.

Explore

Current issues on the existing website

After a careful review and analysis, most of the issues that our team found on the current website of the Nature Conservancy are:

Inaccessible: A lot of white space appeared on the website that would lead to a bad navigation experience in a dark environment.

Inconsistent: Same type of components across the website displayed various styles and interactive effects, causing navigation burden to users.

Inefficiency: The usage of each components lacks indication of when to use, showing no logic to product team when managing website content.

Solution

How would Design system help The Nature Conservancy?

- Imagine you as a new website user, what kind of design would help you effortlessly navigate and understand the site's content?
- Imagine you as a new employee, what would help you understand the product and communicate with colleagues effectively?
A design system improves navigation experience with ease on the website by providing consistency and accessibility in design and provides a shared vocabulary and a more collaborative workflow to designers, developers and teams.

How did we start creating a design system?

First, deconstruct the Pages

We screen-captured every UI element on the Nature Conservancy, categorizing each of them in sections such as Typography, Color, Blocks, Forms and more.

"There are too many typography!"

We analyzed how their UI components are used on the site, and noted down the inconsistencies / usage confusion we found in the element styles.
One example of usage confusion is, the Nature Conservancy website has up to 13 different type of styles for paragraph text and it is difficult to learn the pattern of the usage of each style.

Design Scope

With the time limit, we decided to narrow down the scope, excluding several pages that contain more one-time using elements, such as Donate pages and How to Help pages.
After learning major issues and design scopes, the next step is...

Explore the Brand Strength to Help us Define the Design System!

Define

What should Our design System convey?

Looking thoroughly the company's values and perspectives, we brainstormed the name and principles of the design system by combining our team's design and The Nature Conservancy's value.

Ecosystem's Design Priniciples

Soon, we decided to name it as Ecosystem, accompanied with 4 design guidelines represent and embrace The Nature Conservancy's core value:

Connected

Looking thoroughly the company's values and perspectives, we brainstormed the name and principles of the design system by combining our team's design and The Nature Conservancy's value.

Concise

We prioritize simplicity to streamline the user experience, eliminating clutter and enhancing usability for efficient task completion. This clarity and simplicity contribute to a more enjoyable user experience.

Confident

Our bold design language instills trust and reliability, empowering users to navigate with assurance and strengthening brand loyalty.

Impactful

Looking thoroughly the company's values and perspectives, we brainstormed the name and principles of the design system by combining our team's design and The Nature Conservancy's value.

Start with the foundation

Get Started Building UI kits with Figma

First, we checked all reusable components we aim to include in Ecosystem and split up works. The parts I took over including sections Color, Buttons, DropDown, Text Link, Icons and Text Area.

What problem did we Face While Creating UI kits?

At the beginning, we ran into a problem which is that most of the UI components (buttons, cards, blocks, etc.) are difficult to be built without building the foundation rules first.

How did we solve this?

1. Established a set of foundational styles first: Color, Grid, Typography, Spacing.

2. Followed atomic design principle by Brad Frost: Start from building smaller reusable components called atoms, then created a larger, more complex components (molecules, organisms) and pages.

What Other things we prioritized?

- Accessibility Considerations

We aimed to revamp all components with consideration of both light / dark modes to improve visual accessibility.
Furthermore, we built focused states, checked color contrast ratios and spacing while creating components to make sure great readability and every user using the website with ease.

- Efficiency and Consistence

Our main goal of the design system is to speed up the work flow to teams and provide a common design language to not only designers but all the team members while communication. In long term, it helps maintain a cohesive visual of the product.
To reach the goal, we put a lot effort on structuring the settings of Tokens and Components / Variants of UI components on Figma:

Tokens: Setting tokens thoroughly allow flexible changes in a long-term maintenance and help switching components into dark / light mode effortlessly.

Components / Variables: Components and variables functions supports building design faster, allowing designers swap a component into different states or styles seamlessly.

Our UI kit could be found on Figma!

Documentation

Create an interactive documentation for our design system - Ecosystem

View our Design System on Zeroheight!
Within our documentation, we divided content into 4 sections, Overview, Foundation, Components, and Resources:
Overview: Guide user how to start
Foundation: Introduce foundation Elements
Components: List all reusable UI components and Usage Guideline
Resources: help guideline and assistant contact

"Design system is not just a UI kit."

Our Design system, is not just a document listing UI elements, but a communicative tool that conveys the brand, explains usage of each component, and helps users understand the design concept comprehensively in a short amount of time.
For example, as the image showed above, in text link section, readers would understand "What is the limit?" "What is our recommendation to use this component?" and "What is the accessible guideline the design follows?"

Pitch Time

Why should the nature Conservancy team adopt Ecosystem?

1. Ecosystem, echoes the core value of The Nature Conservancy, emphasizing connectedness. Its simple yet accessible design language effortlessly connects with users, fostering trust and reliability in our brand.
2. Internally, it bridges gaps among stakeholders, designers, and developers, enhancing development and communication efficiency through a shared vocabulary. Over time, it ensures product development remains consistent, guiding new team members to adhere to design standards.

Takeaways

Refined my collaboration and organizational skills: I discovered how to effectively coordinate with team members and prioritize tasks in time limits. Also, I've gained a deep understanding of the importance of sequencing content creation and structuring it in an easy language.
Enhanced my proficiency with design software: Figma, with its Design Token feature, which opened up a whole new learning process to me. Exploring this tool has empowered me to create more versatile design systems!

Thanks for stopping by, let's keep in touch!

Or find me here...

© Chu Yuan Chiu 2024 Copyright. All Rights Reserved.