Building Homepage Components for Our Design System
Designed five new Figma components for the design system and lead collaborative discussions that standardized design decisions across the ACLU team.
Duration
August 2025
Role
Product Designer
Process
Audit
Competitive Analysis
Accessibility Audit
Design
Documentation
Background & Objective
Based on A/B testing led by Ritika, our Educate Pod designer, we removed homepage sections with almost no user interaction. This allowed us to keep sections with higher engagement, which better align with the ACLU’s focus on news, information, and ways to take action. I was asked to assist with redesigning these homepage components for our design system.
The Problem
Without reusable components, the homepage design is inefficient and inconsistent. This misalignment with our recent brand refresh creates extra work for both design and development.
Solution
Created five new reusable Figma components and updated existing ones, ensuring all assets aligned with our recent brand refresh. Implemented design changes and boolean properties to enhance consistency and scalability.
Led the effort to unify design choices across the team, establishing clear rules for the property panel, button colors, and text truncation.
Wrote documentation for all new components, including accessibility guidelines, to ensure a consistent and inclusive design workflow for the entire team.
Research Process
As our design system continues to expand, its importance for uniformity grows. To ensure that new additions align with our component structure and documentation standards, I utilize several research methods before beginning any new component creation.
Design System Audit
I analyzed all existing ACLU components to learn how the the team builds variants and utilizes the property panel.
After a thorough audit of all existing components, I gained a strong understanding of the team’s established methods. This foundational research ensured any new components I created would integrate smoothly into the desgign system, maintaining consistency and prevent future confusion.
Competitive Analysis
Analyzing component best practices in other Design Systems.
I explored well-established design systems to understand their component-building methods and property panel utilization, not just to copy them, but to learn the rationale behind their design choices. This research helped me to create components that not only followed industry best practices but also aligned with the unique needs of our tech team.
🧐
Although it was important to see how other design systems create components, the ACLU prioritizes building components and a property panel that best suit our designers' needs because they are the ones using it the most, as long as we still utilize industry best practices.
Accessibility Audit
Conducting an accessibility audit of ACLU guidelines to make sure new components are inclusively designed from the start.
I focused on a comprehensive review of the ACLU’s accessibility guidelines and documentation to ensure our components were designed for a more inclusive user base. This research helps me establish best practices and document accessibility requirements for our engineering team.
Design
With a solid understanding from my research into the team’s methodology and documentation practices, I was ready to design these new set of components and integrate smoothly into the design system.
Components Designed
Designed and integrated five new components into the design system.
These new components were a mix of newly created designs and existing ones that were updated to improve scalability and align with the recent brand refresh. Building out these five components involved several important design decisions along the way.
Components Designed: Design Decision
Making components more scalable through minor design updates and the addition of boolean property.
By making a few minor updates, we've made our components more scalable. Our carousel component now features a text link element, which gives designers more options. We've also introduced boolean properties so designers can toggle parts of the design on and off. This flexibility allows designers to use existing components more often, which saves engineering time.
Components Designed: Design Decision
Unifying design decisions on property panels, button color use, and text truncation.
To address a lack of guidelines within our design system, I initiated discussions on key topics, including the structure of component property panels, the purpose of different button colors, and when to truncate text. By facilitating these team-wide conversations, we create a unified set of guidelines, which now allow consistency across our components.
Documentation
Now that I was done building out the components, it was time for me to document. I followed the documentation guidelines the ACLU design team has created for components.
Documentation
Documenting usage guidelines including component summary, properties variants, specs and spacing guidelines.
I began documenting our new components in the design system, providing a summary of the component and why it exists, specifying the existing variants and their uses, along with the specifications and guidelines.
🧐
Documentation
Providing a historical record of component changes by documenting before-and-after states.
I documented the before and after versions of the components I changed and left annotations for the design.
🧐
Designer benefit: Understand why design choices were made.
Engineer benefit: Helps with troubleshooting and debugging by knowing which parts of the components were updated.
Documentation
Documented accessibility specifications, including focus order, alternative text, read order, and heading structure.
Another important documentation was accessibility. This will help bridge the gap between engineers and designers and also ensure that designers always consider whether their component designs provide a truly inclusive user experience.
Results and Impact
Improving scalability and site consistency with these five new components.
I researched, designed, and documented five new components that can be used consistently across the ACLU site. They not only have many use cases but also replace similar, existing designs, which creates a more consistent user experience.
🧱
5 New Components Created
Designs now match our brand refresh and better meet designer needs. I made key design changes and add boolean properties for improved consistency and scalability.
🗝️
Standardized Key Decisions
Led the effort to unify design choices across the team, establishing clear rules for the property panel, button colors and text truncation.
📃
Document Accessibility and Guidelines
Wrote documentation for all new components, including accessibility guidelines, to ensure a consistent and inclusive design workflow for the entire team.
Learnings
Create components for scalable designs.
Building components that align with our designers’ needs is important for the scalability of our site. This approach empowers us to create highly reusable designers, which help users see things consistently, act intuitively, and build trust.
Documentation drives collaboration and accessibility.
Thorough documentation is a powerful tool. It not only improves collaboration between designers and engineers but also ensures we create a truly accessible and excellent user experience from the ground up.