Roots Collective

Establishing, designing, and documenting a design system for the website launch.

Role

Sole designer

Timeline

2024-2025

Platforms

Web, Mobile-web

Areas

UI, Branding, Design systems

Background

Roots Collective is a non-profit organization that is fostering connections by celebrating Asian pop culture. They had an established social media presence but did not have a website. Without one, they wouldn’t be able to apply for grants. I created the design system and website from the ground up.

Creating a website for the non-profit to expand their reach

Creating a website for the non-profit to expand their reach

Creating a website for the non-profit to expand their reach

The challenge

The organization had some simple brand guidelines to address social media needs but nothing beyond that. As a design team of one, I needed to gather, analyze and research user and business requirements. I collaborated closely with the developer to ensure feasibility throughout the project.

Challenge #1

Though the non-profit founders had a vision for the organization, it did not translate easily to creating a brand new website.

Gathering requirements

Challenge #1

Though the non-profit founders had a vision for the organization, it did not translate easily to creating a brand new website.

Gathering requirements

Challenge #1

Though the non-profit founders had a vision for the organization, it did not translate easily to creating a brand new website.

Gathering requirements

Challenge #2

As the only designer, I would need to build a reusable system that could continue to scale as the organization grew.

Creating a scalable system

Challenge #2

As the only designer, I would need to build a reusable system that could continue to scale as the organization grew.

Creating a scalable system

Challenge #2

As the only designer, I would need to build a reusable system that could continue to scale as the organization grew.

Creating a scalable system

Goal #1

Creating a clean, professional website would allow users to easily understand what the organization’s mission and activities are.

Providing transparency

Goal #1

Creating a clean, professional website would allow users to easily understand what the organization’s mission and activities are.

Providing transparency

Goal #1

Creating a clean, professional website would allow users to easily understand what the organization’s mission and activities are.

Providing transparency

Impact

With a growing collection of design system components, Roots Collective will be able to scale their website easily. Their brand identity can shine through the consistent look and feel across platforms. The launch of the website will provide the organization more credibility while also expanding their reach.

Roots Collective can make a greater impact with a unified online experience showing their accomplishments.

Roots Collective can make a greater impact with a unified online experience showing their accomplishments.

Roots Collective can make a greater impact with a unified online experience showing their accomplishments.

Takeaways

Working efficiently

Being able to design a website from scratch is always fun but it can be difficult when there is no direction. On top of that, I wanted to make sure the website could grow without me. It seemed overwhelming but a design system seemed to be the best choice. I was able to break down business needs into specific components and design variants to meet different needs. This method of designing also allowed for simpler development.

Lean teams

Most people working for the organization are volunteers and have day jobs. There was a lot of start and stop with the design and development progress. In the future, I would want to have a proper kickoff with some work back schedule, even if it had loose dates. To address the slow progress of the website, I worked with the marketing lead to implement project management tools into our process.

Gina Hsu 2025