top of page
Screenshot 2026-03-31 at 12.15.44.png

Overview

While working at CatchApp, I helped develop and maintain a design system to improve consistency across the product and speed up design and development workflows. As a fast-moving startup working in an agile environment, the team needed a way to design and ship features quickly without recreating UI elements each time.

The problem

Working in a fast-paced startup environment meant we were constantly shipping new features. Over time, this led to:

  • Inconsistent UI patterns across the product

  • Repeated design work for common components

  • Slower handoff between design and engineering

  • Lack of a shared system between designers and developers

This made it harder to move quickly while maintaining a high-quality user experience.

My role

I worked closely with a UI designer to help build and maintain the design system.
My focus was on:

  • Auditing the existing UI to identify inconsistencies

  • Creating reusable components and defining patterns

  • Ensuring designs were clear and easy for developers to implement

  • Contributing to a system that could scale with the product

The process

1. UI Audit

Screenshot 2026-03-30 at 16.13.31.png

I reviewed existing screens across the product to identify inconsistencies in:

  • Colours

  • Typography

  • Spacing

  • Component usage

This helped highlight where standardisation was needed.

*Multiple variations of the same components across the product

2. Foundations

We defined core design foundations, including:

  • Colour styles

  • Typography scales

  • Spacing and layout rules

This created a consistent visual language across the product.

Screenshot 2026-03-30 at 16.34.07.png
Screenshot 2026-03-30 at 16.44.44.png
Screenshot 2026-03-30 at 16.47.06.png

3. Component system

We built a set of reusable components, including:

  • Buttons (with states and variants)

  • Form inputs

  • Cards and layout elements

Each component was designed to be flexible and scalable.

Screenshot 2026-03-30 at 16.50.52.png
Screenshot 2026-03-30 at 16.54.04.png
Screenshot 2026-03-30 at 17.17.06.png
Screenshot 2026-03-30 at 17.18.56.png

4. Collaboration with engineers

We worked closely with developers to ensure:

  • Components were practical to implement

  • Designs translated clearly into code

  • Handoffs were smooth and efficient

This helped bridge the gap between design and development.

From idea to implementation

The design system created a shared language between design and engineering, reducing friction and enabling faster product delivery

Screenshot 2026-03-31 at 11.14.12.png

Outcome

The design system had a noticeable impact on how the team worked:

  • Improved consistency across the product, creating a more cohesive user experience

  • Faster design workflows, as components could be reused instead of redesigned

  • More efficient development, with clearer handoff and reusable patterns

  • Quicker iteration cycles, which was critical in a fast-moving startup environment

Reflection

This project showed me the value of thinking beyond individual screens and designing for scale.
By introducing a shared system, we were able to move faster without sacrificing quality, something that’s essential in any growing product team.

bottom of page