Building a Design System Foundation at Eyeconic

Overview

Eyeconic's Site Optimization team operated without a shared design language. Designers worked in one tool, developers built in another, and the gap between them showed up in every project — mismatched components, duplicated work, and no reliable reference point for either side.

Addressing that gap became a team priority. I contributed heavily to the design and front-end implementation side — rebuilding templates in Figma, creating coded component counterparts in Salesforce Commerce Cloud, and helping shape the Design System documentation shared across Creative, Development, and accessibility teams.

The Problem

Without a shared source of truth, the team experienced compounding inefficiencies across every project cycle:

• Frontend output frequently mismatched design specs, requiring rework on both sides
• Multiple versions of the same component existed simultaneously — in some cases three or more conflicting variants
• Landing page templates lived outside Figma, making them invisible to designers and inaccessible for systematic updates
• Each new campaign effectively started from scratch, with no reusable foundation to build from

The cost wasn't just time — it was consistency. Every mismatch eroded trust between Creative and Development, and every duplicated component made the divergence harder to resolve.

My Role

This was a team initiative with shared ownership. My contributions were concentrated in design architecture and front-end implementation.

• Audited existing templates and components to identify redundancy and inconsistency
• Rebuilt 4–5 core landing page templates in Figma using the team's new component architecture
• Created coded HTML/CSS component counterparts within Salesforce Commerce Cloud
• Contributed documentation for 4 core components — modal, pagination, icons, and tooltip
• Updated 2-slot and single-slot card/tile layout specifications
• Participated in distributing the completed system to Creative, Development, and accessibility teams in March 2025

Design Approach

The team's strategy was consolidation before expansion — establish a reliable foundation rather than adding new components on top of an inconsistent base.

Component-first rebuilds

Existing templates were rebuilt from components up, not patched in place. This meant Figma templates and their coded counterparts were structurally aligned from the start — reducing the translation gap that had caused downstream mismatches.

Figma as the single source of truth

Moving templates into Figma gave designers visibility they didn't previously have, and gave developers a stable reference to build against. The goal wasn't to constrain Creative — it was to give everyone the same starting point.

Documentation as a handoff tool

The Design System documentation was written to serve three distinct audiences: designers, frontend developers, and accessibility reviewers. That required clear component specs, usage guidance, and accessibility annotations — not just visual references.

Process

• Audited the existing template and component landscape as a team
• Identified redundant and conflicting component variants
• Established component architecture and naming conventions collaboratively
• Rebuilt core landing page templates using the new component structure
• Built coded HTML/CSS counterparts in Salesforce Commerce Cloud
• Contributed component documentation to the shared Design System
• Presented and distributed the system to Creative, Dev, and accessibility teams
• Worked through stakeholder concerns from Creative — focusing on transparency: to create consistency, not reduce creative agency
• Continued iterating on the system monthly alongside active campaign work

Outcome

The Design System was completed and distributed in March 2025, with the team continuing to iterate monthly. It established a shared reference across Creative, Development, and accessibility teams — where none had existed before.

The impact compounded over the year. Campaigns including Follow Your Heart, Top Nav Optimization, and multiple seasonal refreshes were executed against a more consistent component foundation. The broader effort was cited by our manager as one of the team's top UX/UI accomplishments of 2025.

Reflections

The most challenging aspect wasn't technical — it was organizational. Introducing a design system into a team where designers had previously operated with full autonomy required careful framing. The goal was never to reduce creative agency; it was to ensure that creative decisions could actually be built as intended.

If I were to revisit this work, I'd advocate for formalizing a contribution process earlier — a clear path for Creative to propose new components or variations, rather than having the system feel like a closed document. Shared ownership would have accelerated adoption.

Alongside this project, I completed two AI-focused certifications through IxDF and Designlab — covering design tokens, AI-powered UX workflows, and design patterns for AI products. That coursework directly informed how I think about systematic design and scalable component logic.