ApricotLaw Design System

Taking an existing brand and creating a design system, which they were lacking
COMPANY

ApricotLaw

ROLE

Designer

EXPERTISE

Design Systems

YEAR

2024

Project Goal

To address significant visual inconsistency and accessibility issues on the ApricotLaw website by creating and implementing a scalable, cohesive design system that would improve user experience and streamline development.

The Challenge

The existing ApricotLaw website was a tangle of visual inconsistencies. It lacked any defined design rules, leading to a chaotic mix of redundant elements – numerous button styles, a multitude of font sizes and weights, clashing color applications, and inconsistent layouts. This not only created a confusing and frustrating experience for users but also made development cumbersome and inefficient. A major problem was also the existing brand colors, which did not meet accessibility standards, requiring a complete re-evaluation to ensure inclusivity. Furthermore, distracting background elements like busy images behind text significantly hindered readability and accessibility.

The Solution

My approach began with a comprehensive audit to inventory every single element on the website, identifying the full scope of the inconsistencies. I then systematically streamlined and unified these disparate elements, reducing redundancy and creating a clean, logical structure. This involved defining clear standards for components, typography, and layout. A critical part of the solution was establishing a new, accessible color palette that met WCAG guidelines. I also rigorously standardized text hierarchy (H1, H2, paragraph styles), ensured consistent button sizing and color usage, and addressed distracting background elements to significantly improve readability and accessibility across the site.


My Role & Process

As the sole designer on this project, I had full autonomy from discovery through implementation. My process was highly iterative and collaborative with the development team:

  1. Comprehensive Audit: Detailed inventory of all existing website components to pinpoint inconsistencies and redundancies.

  2. Consolidation & Refinement: Merging similar styles, eliminating unnecessary elements, and simplifying the visual language to create a clean foundation.

  3. Design System Creation: Building the core system in Figma, defining accessible color palettes, precise typography scales, consistent spacing, and standardized component behaviors.

  4. Accessibility Integration: Weaving WCAG standards throughout the system, from color contrast and text sizing to clear hierarchy and focus states (where applicable based on implementation).

  5. Detailed Documentation: Creating a centralized, easy-to-reference guide within Figma detailing the usage guidelines and specifications for every component and style.

  6. Collaborative Handoff: Working closely with the development team, providing clear documentation and being available for questions to ensure a smooth and accurate implementation.

Outcome & Impact

The implementation of the design system has transformed the ApricotLaw website. It now features a consistent, predictable, and visually cohesive interface that significantly reduces cognitive load for users. The accessible color palette and streamlined typography have dramatically improved readability and inclusivity. While specific development efficiency metrics aren't available, the standardized components and clear documentation were highly appreciated by the development team, simplifying their workflow. From a business perspective, these design improvements contributed to an increase in form submissions (though specific numbers are not available), indicating a positive impact on conversion goals by creating a more trustworthy and user-friendly experience.


Before photos:



Key Takeaways

This project underscored the profound impact a well-structured design system can have on both user experience and development efficiency, even within existing brand constraints. It solidified my ability to simplify complex visual landscapes, prioritize accessibility in practical application, and effectively collaborate with developers for successful implementation. Having full control allowed for rapid decision-making and direct application of best practices.

Key Features of the Design System

  • WCAG-compliant and accessible color palette

  • Clearly defined and consistent typography hierarchy (H1, H2, paragraphs, etc.)

  • Standardized button styles and sizing

  • Consistent spacing rules and grid system

  • Reusable and well-documented UI components

  • Elimination of distracting background elements behind text for improved readability

Deliverables

  • Comprehensive Design System library within Figma, serving as a single source of truth.

  • Detailed usage guidelines and component specifications documented within Figma.

  • Accessible color palette specifications.

  • Screenshots illustrating the "before" (inconsistent) and "after" (consistent) states of key website components are included in the case study.



Collaboration

Worked closely and effectively with a remote developer. The clear documentation and streamlined system were well-received and facilitated a smooth implementation process. There was no resistance from the development team, who welcomed the structure and clarity the system provided.

Challenges Faced

The primary challenge was the initial state of the website, which had accumulated a significant number of inconsistencies over time. Conducting a thorough audit and strategically consolidating elements required meticulous attention to detail. Ensuring the new, accessible color palette still felt aligned with the brand's identity was also a careful balancing act. While direct metrics on development efficiency were not available, the anecdotal feedback from the developer indicated a positive impact.

Measuring Success

Success is primarily measured by the successful adoption and ongoing use of the design system by the development team, the visible improvement in consistency and accessibility on the live website, and the positive contribution to user experience which correlates with increased form submissions.



Link to Live Website: www.apricotlaw.com (The current live site reflects the implemented design system)