From scattered styles to structured systems

From scattered styles

to structured systems

From scattered styles to structured systems

Role

Design System Architect

Skills

Design Systems,

Design Documentation

Figma, Mockup

Type

Self-Initiated Internal Project,

Design System Foundation

Context

Context

When I joined the Ask Smarty team, the application had been serving retail businesses successfully for several years. However, the product's design infrastructure had accumulated significant technical debt that was impacting our team's efficiency and the user experience.

The application had undergone three major design tool migrations—from Adobe Photoshop to Adobe XD, and finally to Figma. Each transition, while necessary for staying current with industry tools, resulted in lost components, missing documentation, and broken design patterns.

The inconsistencies weren't immediately obvious to end users, but they created friction throughout the development process. Different modules displayed varying button sizes, typography scales differed across features, and color usage lacked systematic logic. 

When I joined the Ask Smarty team, the application had been serving retail businesses successfully for several years. However, the product's design infrastructure had accumulated significant technical debt that was impacting our team's efficiency and the user experience.

The application had undergone three major design tool migrations—from Adobe Photoshop to Adobe XD, and finally to Figma. Each transition, while necessary for staying current with industry tools, resulted in lost components, missing documentation, and broken design patterns.

The inconsistencies weren't immediately obvious to end users,
but they created friction throughout the development process. Different modules displayed varying button sizes, typography scales differed across features, and color usage lacked
systematic logic. 

When I joined the Ask Smarty team, the application had been serving retail businesses successfully for several years. However, the product's design infrastructure had accumulated significant technical debt that was impacting our team's efficiency and the user experience.

The application had undergone three major design tool migrations—from Adobe Photoshop to Adobe XD, and finally to Figma. Each transition, while necessary for staying current with industry tools, resulted in lost components, missing documentation, and broken design patterns.

The inconsistencies weren't immediately obvious to end users,
but they created friction throughout the development process. Different modules displayed varying button sizes, typography scales differed across features, and color usage lacked
systematic logic. 

Problem Statement


Problem

Statement


Problem

Statement


To build a scalable design system that:

  • Established consistency across the entire product

  • Streamlined collaboration between designers and developers

  • Reduced duplication of effort

  • Could evolve smoothly as new features were added

To build a scalable design system that:

  • Established consistency across the entire product

  • Streamlined collaboration between designers and developers

  • Reduced duplication of effort

  • Could evolve smoothly as new features were added

Solution

Solution

I recognised that while these issues weren't critical failures, they represented a significant opportunity for improvement. I proposed building a comprehensive design system to our leadership team, presenting it as an investment in our long-term efficiency and product quality. The initiative was approved, and I led the effort from conception through implementation.

We turned the five-day crunch into a tight relay. UX delivered flows, UI picked them up instantly, and dev shipped them the same day. Each flow was tested as soon as it went live, keeping everything fast and clean. The result: a smooth attendee app, a focused admin dashboard, and a fully tested system ready for event day.

How the system took shape

How the system

took shape

Full Product Audit

We turned the five-day crunch into a tight relay. UX delivered flows, UI picked them up instantly, and dev shipped them the same day. Each flow was tested as soon as it went live, keeping everything fast and clean. The result: a smooth attendee app, a focused admin dashboard, and a fully tested system ready for event day.

Full Product Audit

(AI + Manual Review)

We turned the five-day crunch into a tight relay. UX delivered flows, UI picked them up instantly, and dev shipped them the same day. Each flow was tested as soon as it went live, keeping everything fast and clean. The result: a smooth attendee app, a focused admin dashboard, and a fully tested system ready for event day.

(AI + Manual Review)