Project Overview

Freshbricks is FreshBooks' comprehensive design system developed to unify design and development practices across the organization. Now in its third iteration, Freshbricks addresses previous challenges in adoption and scalability by fostering cross-functional collaboration. Unlike earlier attempts that were design-centric and lacked broader team involvement, this iteration was led by a dedicated team comprising designers, engineers, and a product manager. Our primary objective was to create a system that is consistent, cohesive, scalable, and easy to use for all team members.

The design system primarily serves our web applications but is also built with future mobile integration in mind, aligning with ongoing projects like the FreshBooks Connect mobile app.

Identifying the Need

We observed significant challenges in our existing design and development processes:

• Inconsistency Across Teams: Different product teams often created components that were not consistent with each other.
• Duplication of Efforts: Absence of a centralized component repository led to multiple versions of the same component being developed independently.
• Customization Issues: Engineers using Tailwind CSS could unintentionally alter components' colors or spacing, resulting in design inconsistencies and potential production issues.

These challenges impacted teams by increasing the time spent recreating or adjusting components, leading to inefficiencies and delayed project timelines. For end-users, inconsistent user interfaces resulted in a fragmented experience, affecting overall satisfaction and usability.

Research and Planning

To address these issues, we conducted a comprehensive audit of our entire product suite to identify necessary components, patterns, and guidelines. We discovered inconsistencies in color palettes, spacing, and typography, which led us to develop standardized design tokens.

We held workshops to collect product needs from stakeholders and finalize approaches to solve identified problems. User testing was performed on general patterns and components to ensure usability and effectiveness. We also researched industry best practices to inform our decisions.

Our goals and success metrics were defined collaboratively:

• Establish a Solid Foundation: Prioritize foundational elements before iterating on additional features.
• Adoption Rate: Measure success by the percentage of teams adopting the design system in new projects.
• Support Technology Transition: Facilitate the engineering team's shift from Ember to React for better integration with the design system.

Design Principles and Foundations

Our design system is guided by four core principles:

• Consistency: Maintain uniformity across all components and products.
• Accessibility: Embed accessibility standards into all components and patterns.
• Clarity: Promote clear and straightforward design for better user comprehension.
• Innovation: Encourage creativity within the framework of the design system.

We established foundational elements including color palettes, spacing, typography, and grid systems. Assets such as standardized icons and illustrations were developed, along with a comprehensive library of UI components for designers and engineers. Reusable patterns and detailed guidelines were created to ensure effective utilization of the design system.

Accessibility was a critical focus. We employed automated testing tools like linters and scripts to ensure components comply with WCAG guidelines. By integrating accessibility considerations from the outset, we reduced the need for retroactive fixes and ensured our products are usable by all.

Challenges and Problem-Solving

We faced significant challenges, such as balancing the development of the design system while projects were rapidly evolving. Immediate business needs required us to address urgent requirements like updating complex components such as tables.

Overcoming Obstacles:

• Strategic Scheduling: Set clear timelines for beta and GA releases, keeping stakeholders informed to manage expectations.
• Team Allocation: Divided the team to focus on both foundational components and complex elements simultaneously.
• Incremental Integration: Leveraged the transition to React to gradually introduce design system components into existing products.

Impact and Outcomes

The design system has brought measurable benefits to the organization:

• Design Efficiency: Reduced the time for designers to start projects by threefold using page templates.
• High Adoption Rate: Achieved a 93% adoption rate in products developed with React.
• Design Consistency: Maintained a Figma detach rate of less than 2%, indicating strong adherence to the design system.

Improved Collaboration and Workflow:

• Designers can create prototypes much faster for user research and testing.
• Engineers build features more rapidly with consistent, pre-built components.
• Product teams have confidence that they are using standardized components and following best practices.

Component Library Development

We developed key components ranging from atomic elements like buttons and dropdowns to complex components like data tables and modals.

Design and Development Process:

• Assessment: Evaluated requests from product teams to understand their needs.
• Planning: Created strategic plans and defined solutions to address these needs.
• Design Iteration: Developed components, gathered feedback, and refined designs.
• Collaboration with Engineers: Partnered with engineers to ensure feasibility and robustness.
• Implementation: Built and integrated components into the design system.

To ensure consistency and flexibility, we defined solid presets for components while allowing flexibility where necessary. Design tokens were recreated in collaboration with the brand team, aligning names and usage between Figma and engineering use cases.

Implementation and Adoption

The design system was rolled out strategically:

• Beta Release: Introduced to a select group for initial use and feedback.
• General Availability (GA): Launched organization-wide after achieving an 85% success rate during the beta phase.

Adoption Initiatives:

• Conducted roadshows to raise awareness and encourage adoption.
• Created educational materials like how-to videos for self-paced learning.
• Established support channels and office hours for questions and discussions.

We initially encountered resistance from engineers accustomed to Ember's flexibility. Through collaborative workshops and demonstrating the efficiency gains with React components, we were able to overcome this challenge and encourage adoption.

Documentation and Tools

We centralized all documentation, guidelines, and best practices in Confluence, providing comprehensive guides that include style guides, component usage instructions, and code snippets.

Tools Utilized:

• Design: Figma for creating and maintaining design components.
• Development: GitHub for version control, Storybook for component visualization.
• Task Management: Jira for tracking tasks and progress.

Version Control and Updates:

We managed version control through a branching strategy, ensuring the main branch remains production-ready. Controlled access prevented incomplete components from being prematurely accessed by product teams.

Changes and updates were proposed through Jira forms, allowing designers and engineers to submit requests for new components or modifications. We adopted Brad Frost’s atomic design methodology, with regular reviews and iterations based on feedback.

Collaboration and Governance

Our core team consisted of two designers, five engineers, and one product manager. Stakeholders included the leadership team and team leads, with representatives from requesting teams involved as stakeholders in the development process of components they needed.

Fostering Collaboration:

• Conducted educational workshops to align understanding and expectations between designers and engineers.
• Established shared naming conventions and terminologies to enhance communication.
• Involved requesting teams as stakeholders, ensuring they felt ownership in the components developed.

Governance Model:

We established a steering committee comprising leadership and design system team leads to oversee and make decisions. Currently, the design system team manages contributions and merges to maintain quality. We plan to transition to a more collaborative model, allowing other teams to contribute components under core team review.

Future Developments

We are committed to continuously evolving Freshbricks to adapt to new needs and technologies.

Ongoing Plans:

• Refine Communication Channels: Improve leadership visibility into progress and ensure alignment with product needs.
• Mobile Integration: Fully incorporate mobile platforms into the design system.
• Enhanced Efficiency: Develop pre-made templates and default states to streamline design and development processes.
• Accessibility Focus: Embed accessibility into every aspect of the design system, reducing the burden on individual team members.

Personal Contributions and Leadership

As the Design Lead for the team, I played a pivotal role in advocating for the design system's importance to leadership. My key responsibilities included:

• Initiating the Project: Educated leadership on the need for a dedicated team and cross-functional collaboration.
• Designing Components: Actively involved in building design components and setting up guidelines within Figma.
• Establishing Guidelines: Created foundational guidelines and best practices for the design system.
• Mentoring Team Members: Guided an intermediate designer, recognizing her strengths in documentation and supporting her growth in component development and cross-team collaboration.

I leveraged my prior experience from leading the Ceridian Design System to inform strategies and avoid past mistakes.