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 Overview

Client: ApricotLaw / www.apricotlaw.com

Goal: Streamline and unify an inconsistent website by building a scalable, cohesive design system.

Outcome: A clean, efficient design system currently in use, ensuring consistency, scalability, and smoother dev handoffs.


Problem

The website and brand were created without consistent rules, leading to multiple redundant elements — buttons, fonts, color styles, and layouts — all clashing visually and causing confusion for both users and developers. Additionally, brand colors were inaccessible and had to be rethought.

Solution

Streamlined and unified the existing design elements into a scalable, efficient design system, as well as added accessible colors to the palette and design.

Design Process




  1. Audit & Inventory: Conducted a thorough audit of all existing website components — identifying redundancies in buttons, typography, and layout elements.

  2. Organizing & Reducing Redundancy: Merged similar styles, removed unnecessary components, and pared down the visual clutter, focusing on consistency and simplicity.

  3. System Creation: Built a scalable design system including:

    • Standardized button styles

    • Consistent typography hierarchy

    • Grid system and spacing rules

    • Accessibility brought up to WCAG standards (contrast ratios, scalable text, etc.)

  4. Documentation: Created comprehensive documentation within Figma for developers and designers, detailing usage guidelines and component specs.

  5. Handoff & Implementation: Delivered the system to the development team, ensuring smooth adoption and alignment across teams.


Key Features

  • Scalable, easy-to-maintain design system

  • Visual consistency across the website

  • Reduced cognitive load for users

  • Streamlined dev/design collaboration

  • Accessibility-compliant components



Check out the website at www.apricotaw.com

Developer Collaboration

Worked closely with the development team, providing detailed documentation and specs to ensure seamless implementation.

Reflection

This project strengthened my ability to work within an existing brand and simplify complex systems. I learned the value of paring down to essentials while maintaining a visually engaging and user-friendly experience.