Chaser • Design System - Gregory Padilla

Redefining Chaser's design system

Problem

Upon joining the team, I noticed the existing design system at Chaser had several inconsistencies that were impacting the design team's workflow and the overall design quality of the product.

goal

My goal was to improve workflow efficiency and design quality by addressing the existing design system discrepancies and inconsistencies.

Solution highlights

design productivity

Leveraging a ready-made system and established patterns streamlined productivity, reducing redundant design decisions and accelerating project timelines.

better hand offs

Enabled smoother collaboration with developers and significantly cutting down on clarification meetings.

Promote accessibility

Integrated principles of accessibility and inclusion into our design system to promote universal design, following WCAG guidelines.

A cohesive and efficient design system that's well-documented and was well-received by stakeholders.

II. Research

What is Chaser?

background

Chaser is a social app for college students dedicated to building authentic communities and fostering genuine connections that will shape the future of social media. Students can connect with others, share experiences, and build meaningful relationships.

Identifying a problem

weak design system

Our broken design system—filled with inconsistencies in spacing, typography, and components—harmed usability, slowed workflows, and weakened brand identity. These issues led to redundant components, detached instances, and excessive developer handoff meetings. To streamline collaboration and boost efficiency, I documented these gaps, using the profile page as a key example.

typography

Typography lacked hierarchy, with inconsistent fonts, sizes, and weights disrupting readability.

colors

Colors were inconsistently applied, affecting brand identity and accessibility.

spacing

Spacing varied, leading to cluttered or overly spacious layouts that hurt usability.

components

Components lacked uniformity in styles and descriptions, making design cohesion difficult to maintain.

absent component guidelines

Here's what the button overview looked like when I first joined—I found myself with more questions than answers while reviewing it.

Impact on workflow

a lot of back-and-forth

Design inconsistencies caused frequent back-and-forth between designers and developers, delaying projects and reducing productivity. I documented these issues and their impact, highlighting the need for a cohesive design system. Here’s a developer’s perspective on the handoff challenges.

"To be honest, the handoff process feels like a game of broken telephone."
- developer

Accessibility issues

failure to meet wcag standards

Our design system failed to meet WCAG standards, with poor contrast and inconsistent typography affecting readability and understandability. These issues compromised accessibility, making it crucial to address them to ensure our product was usable for all users.

2-week research sprint

Identifying Pain Points & User Needs

I aimed to gain a clear understanding of the team's needs, existing guidelines, and pain points. I wanted to identify current frustrations and determine what improvements the team truly required.

To answer these critical questions, I conducted an intensive 2-week research sprint focused on problem discovery. Here's how I approached it, and some key insights uncovered from each

User interviews

I conducted 10 interviews to understand challenges. Here's what I found.

Design system review

I evaluated pain points in the current system. I found these themes.

competitive analysis

I analyzed industry standards for best practices. I uncovered these rooms for improvement.

III. Conceptualizing

Synthesizing to narrow the focus

Finding overarching insights

At this stage, I had gathered a vast amount of low-level insights that needed to be synthesized into overarching themes to define clear problem statements. Using methods like affinity mapping and journey mapping, I connected pain points to tangible design opportunities, ensuring a structured approach to problem-solving.

a framework to design opportunites

Following the Double Diamond method, I entered the Define stage, where I synthesized my research into HMW (How Might We) questions to guide the design process. The visualization below illustrates this process.

Creating a strategy

Connecting pain points to Hmw's

With a clearer focus, crafting HMW questions allowed me to develop a strategic approach to tackling the identified pain points. Here’s how I made the connections:

Design is blocked from the beginning

How might we make a stronger design system?

Time is wasted clarifying specs with developers

How might we facilitate better hand offs?

Accessibility gaps leaves user needs unaddressed

How might we incorporate accessibility?

IV. Design system enhancement

Making a stronger design system

Design tokens

Given the existing design system with established styles, variables, and components, some adjustments were straightforward: I made tweaks to enhance consistency in the styles tab. Here's some foundations pages that keep the team aligned.

Component overview

Here's an example of the overview page for Button.

In Figma, button variants are designed to match the properties used in code by engineers. Plus, Figma’s component props make things easier—if the left icon is disabled, the icon options won’t appear since they aren’t needed.

Accessibility baked into the process

Meeting WCAG standards was essential for creating an inclusive experience for all users. To achieve this, I:

• Checked color contrast on various backgrounds and across different interaction states, which included a deep dive into accessibility standards for disabled buttons.

• Ensured that font sizes and touch targets on mobile were appropriate

• Included text labels with icons in mobile navigation

• Maintained consistency across layouts and similar UI elements.

Now let's take a look at the profile page with the new design system in place.

Before

After

Facilitating better hand offs

value of collaboration and communication

We held weekly meetings to keep developers informed about updates and improvements, and to gather their feedback. This enhanced communication fostered better collaboration between the design and development teams, ensuring a more seamless integration of the design system into new projects.

As often as we met, it still wasn't sufficient for all interaction details...

asynchronous communication

Since I was part of a remote team, my handovers featured contextual notes in Figma, video walkthroughs of interactions via Loom, and visualizations of expected behaviors. When adding new components to the library, I linked screens to the components to ensure developers always had access to the source of truth.

This thorough documentation was vital for developer handoff, reducing the need for ongoing correspondence and providing clear instructions on how to use each element of the design system.

V. Project impact and learnings

Results

Improvement in workflow

Within two months of my role, we successfully redesigned the design system, leading to significant improvements in workflow efficiency and design quality. Design productivity increased, handoff clarification meetings dropped, and we ensured compliance with WCAG guidelines. These enhancements played a key role in a successful design system redesign by:

cohesiveness

Ensured a cohesive look and feel for the redesign.

structure

Offered a structured set of principles to guide decision-making amidst conflicting requests from the team.

streamlined

Streamlined the design process, which was crucial for the design team.

speed

Accelerated the design-to-market time by providing developers with a single source of truth and a set of reusable components and patterns.

Reflection

key takeaways

Identifying all instances of inconsistencies within the design system and ensuring team alignment during implementation was challenging but necessary.

I learned the importance of a data-driven approach to design improvements and the value of collaboration and communication within the design and development teams.

Substantial increase in workflow efficiency and design quality

I. Project overview

Redefining Chaser's design system

Solution highlights

A cohesive and efficient design system that's well-documented and was well-received by stakeholders.

II. Research

What is Chaser?

Identifying a problem

Impact on workflow

"To be honest, the handoff process feels like a game of broken telephone."
- developer

Accessibility issues

2-week research sprint

III. Conceptualizing

Synthesizing to narrow the focus

Creating a strategy

IV. Design system enhancement

Making a stronger design system

Facilitating better hand offs

V. Project impact and learnings

Results

Reflection

Want to see more of my work?

GTA V

Substantial increase in workflow efficiency and design quality

I. Project overview

Redefining Chaser's design system

Solution highlights

A cohesive and efficient design system that's well-documented and was well-received by stakeholders.

II. Research

What is Chaser?

Identifying a problem

Impact on workflow

"To be honest, the handoff process feels like a game of broken telephone."- developer

Accessibility issues

2-week research sprint

III. Conceptualizing

Synthesizing to narrow the focus

Creating a strategy

IV. Design system enhancement

Making a stronger design system

Facilitating better hand offs

V. Project impact and learnings

Results

Reflection

Want to see more of my work?

GTA V

"To be honest, the handoff process feels like a game of broken telephone."
- developer