Project: Design System

Design System | 2024 | Role: UX Designer

🎯 Business Goal 🎯

Design and ship the first scalable UI Kit v1.0 to unify inconsistent internal product experiences, reduce design debt, and improve design-to-dev handoff efficiency. Create a Sharepoint site to help raise awareness of use cases and functionalities of system.

Discovery

Before building anything new, we audited everything old. With no PM and limited resources, this was a fully UX-driven initiative. Another designer and I defined priorities, timelines, and scope while aligning cross-functionally with engineering. We focused on evaluating the existing design system, applications, and workflows.

Existing Design System

  • Existing Hierarchy structure was not fully organized

  • Atomic Design methodology had been attempted but not fully realized

  • No design tokens or component mapping

  • Developer notes were high level and lacked depth of understanding for behavior or use cases

Audits

  • Audited available applications for UI inconsistencies

  • Audited the Design System file in XD

Conversations

  • Interviewed Developers separately

  • Open Discussion with Developer team

  • Open Discussion with full Design Team

Design Tool Review
 Evaluated tooling limitations (Adobe XD → Figma transition)

Why Figma?

  • Better collaboration

  • Scalable component architecture (auto layout and and nested components)

  • Emerging dev features (inspect panel)

  • plugin features

Insights Informing Redesign

Discovery revealed that inconsistency wasn't just visual - it was structural. Organization and prioritization was going to have to be the focus. Presenting discovery to full team allowed for alignment and open discussion about what direction the team envisioned for the future use of the design system.

Planning and ownership high priority

  • The design system lacked a formal owner, requiring the UX team to define priorities, scope, and execution structure.

  • Jira board project needed to be created for alignment

  • Atomic Design methodology desired so our first step was to start with foundational components and build up.

  • When there is a roadblock callouts need to be made to continue to avoid larger linking issues in the future

Design-development hand-off alignment process needed

  • Before working on new file the design team would need to agree on file management decisions.

  • Designers will need to include Notes including behaviors and use cases at times

  • Naming structures, behavioral, and use case notes would need to be reviewed and signed off before calling a component complete.

New tool = Opportunity to start from scratch

  • We chose to rebuild in Figma to ensure architectural clarity, consistent naming, and scalable component logic. Restructuring within the existing file would require more time and introduce greater complexity than starting fresh.

Lack of visibility means limited impact

  • To secure buy-in and future PM allocation, we needed to prioritize creating a SharePoint that communicated the system’s value, usage, and governance — ensuring adoption beyond the UX team.