button-iconBack

My Role

I led the entire initiative, from audit to documentation to evangelism. My role included:

  • Auditing existing UI across platforms
  • Designing the foundational styles (typography, color, spacing)
  • Building a scalable component library in Figma
  • Documenting usage and edge cases
  • Collaborating with engineers for naming consistency and future handoff

Tools used: Figma, Notion (for guidelines), Invision DSM (for dev handoff), Slack (for feedback and rollout)

Overview

When I joined Lykdat, one thing was clear: we were building fast, but not always cohesively. There were multiple digital products in play, each with their own visual quirks, patterns, and interpretations of “the button.”

To streamline design work and improve collaboration with engineers, I created a design system from scratch, a unified library of UI components, styles, and interaction patterns. The goal was simple: design once, use everywhere.

Context & Challenge

Before the system, Lykdat’s product team was moving quickly—shipping features and iterating based on customer feedback. But design consistency was suffering:

  • Buttons had different corner radii and color shades across pages
  • Typography styles were ad hoc and manually applied
  • Developers had no single source of truth to follow
  • New designers (including me!) had to reverse-engineer components just to get started

It wasn’t just a cosmetic issue. Inconsistent UI created rework, slowed down development, and made the user experience feel fragmented. It was time to fix that.

Goals & Success Criteria

My goals for the system were clear:

  • Establish a shared visual language across products
  • Create reusable, responsive components in Figma
  • Improve design-to-dev handoff by aligning naming and structure
  • Reduce the time spent recreating common patterns
  • Make onboarding easier for new team members

Success looked like this:

  • Engineers could build directly from documented designs
  • Designers didn’t have to ask, “Which button style are we using here?”
  • Stakeholders noticed cleaner, more consistent interfaces

Research & Audit

I started by auditing all live products - screenshots, Figma files, and in some cases, straight from the codebase. I created a UI inventory with a collection of every version of buttons, inputs, modals, etc. It was chaos, but it gave me a map.

I also conducted informal interviews with devs and PMs to understand where friction lived. Common feedback were:

  • “We never know which version to use.”
  • “Designs change, and we don’t hear about it.”
  • “There’s no centralized place to reference components.”
    Perfect. That gave me my checklist.

Design & Structure

I structured the system into three key levels:

FOUNDATION
Color System
Refined the palette for stronger contrast ratios and WCAG compliance. Introduced semantic tokens (e.g., success, warning, info) for accessibility. Scalable to light/dark themes and future brand extensions.
Typography
Standardized type hierarchy with clear headings, body, and captions. Improved legibility across devices and ensured accessible line height and font sizing. Scalable to multiple languages and weights without losing consistency.
Spacing & Grid
Established a consistent spacing scale to reduce visual clutter and improve rhythm. Designed token-based values for accessibility (touch-friendly tap targets). Scalable across components, layouts, and new breakpoints.

COMPONENTS
Buttons
Standardized sizes (small, medium, large) for consistent use across the system. Improved contrast ratios and focus states for accessibility. Scalable to different variants (primary, secondary, ghost, icon-only) without breaking hierarchy.
Input Field
Redesigned with consistent spacing, clear focus states, and accessible labels. Added support for error, success, and helper text for clarity. Scalable to multiple sizes (mobile, desktop) and types (text, email, password, search).
Table Component
Structural components used to group and present content. Containers provide layout boundaries, while cards highlight specific pieces of information or actions in a visually distinct way.
Container & Card
Structural components used to group and present content. Containers provide layout boundaries, while cards highlight specific pieces of information or actions in a visually distinct way.
Info State
Introduced clear color contrast and icon support for better readability. Standardized success, error, and warning states for scalability across the system.
Chip & Label
Chips allow users to enter information, make selections, filter content, or trigger actions. Chips are compact elements that represent an input, attribute, or action.
Product Card
Structural components used to group and present content. Containers provide layout boundaries, while cards highlight specific pieces of information or actions in a visually distinct way
Selection Control
Established a consistent spacing scale to reduce visual clutter and improve rhythm. Designed token-based values for accessibility (touch-friendly tap targets). Scalable across components, layouts, and new breakpoints.

PATTERN
Form
Standardized sizes (small, medium, large) for consistent use across the system. Improved contrast ratios and focus states for accessibility. Scalable to different variants (primary, secondary, ghost, icon-only) without breaking hierarchy.
Dialog
Redesigned with consistent spacing, clear focus states, and accessible labels. Added support for error, success, and helper text for clarity. Scalable to multiple sizes (mobile, desktop) and types (text, email, password, search).
Dropdown
Established a consistent spacing scale to reduce visual clutter and improve rhythm. Designed token-based values for accessibility (touch-friendly tap targets). Scalable across components, layouts, and new breakpoints.
Table
Introduced clear color contrast and icon support for better readability. Standardized success, error, and warning states for scalability across the system.
Navigation
Chips allow users to enter information, make selections, filter content, or trigger actions. Chips are compact elements that represent an input, attribute, or action.

Collaboration & Adoption

I didn’t build the system in a silo. From early stages, I:

  • Shared audit findings with the product team to build urgency
  • Created Notion pages with “How to Use This Component” docs
  • Set up weekly demos for designers and developers to test drive components
  • Integrated feedback loops via Slack and design reviews
    Engineers loved that Figma and code started speaking the same language. PMs appreciated faster prototyping. Designers? Let’s just say they stopped cursing at duplicate buttons.

Impact & Outcomes

Here’s what changed:

  • Design time dropped by 30–40% on new screens
  • Devs used Figma inspect mode more confidently—less back and forth
  • Visual consistency improved across the board, reducing UI QA revisions
  • New hires got up to speed in days instead of weeks
  • I became the go-to for design system onboarding

    Email   |    Linkedin    |    Blog
Back to top Arrow