01. OVERVIEW

Our sprint from MVP to product-market fit left us with a costly legacy. In racing to validate features and capture demand, we'd accumulated layers of technical debt that extended beyond code into our user experience itself. Quick fixes had become permanent solutions, creating inconsistent interfaces and confusing user flows that violated basic usability principles. The scrappy approach that fuelled our early growth now threatened to undermine the very experience we needed to scale.

<aside> 🎯 OBJECTIVE

Reduce the design to a development bottleneck

</aside>

<aside> ✅ OBSERVED KEY RESULTS

60% increase in UI consistency and 2X decrease in time to release

</aside>

MY ROLE

Product Designer, UX Engineer

THE TEAM AND DECISION FLOW

Product → Engineering → Business (final) → Engineering

DURATION

3 months (Phase 1: 2 weeks)

Tools

Figma (design hand-off), Notion (PRD), Storybook(components)

02. DISCOVERY

<aside> 😖 TEAM PROBLEMS (Why?)

• What is the problem/challenge?
  • As a developer, I want to focus on building the features agreed upon within a stipulated deadline and not worry about the fundamentals of an interface design
  • As a designer, I want to focus on driving business growth and not worry about testing and reporting the same fundamental heuristics, as it's time-consuming
  • As a business and sales team, we want the planned product releases to be delivered on the committed dates, so that we can align our sales strategy and customer expectations with confidence. </aside>

<aside> 💼 BUSINESS PERSPECTIVE AND CONSIDERATION

• Why should we solve it?
  • The growing problems are slowing down the release cycles, which leads to missed promises with customers and planned product releases
• Key principles & considerations
  • Make sure the process is an improvement to the current workflow
  • Doesn’t disrupt the product roadmap and projection </aside>

UI Audit

A quick UI audit based on the style used and taking inventory of the UI reveals the following:

<aside> 🎨 COLOR

54, color, including system status colors

</aside>

<aside> ⏸️ SPACING

8-point grid system not followed

</aside>

<aside> 💬 TYPOGRAPHY

17 different types of font sizes and weights

</aside>

<aside> 💬 SHADOW & BORDER RADIUS

Inconsistent implementation

</aside>

UI inventory

Untitled

KEY FINDINGS

No consistent layout rules

This means the development team need constant guidelines, heavily reliant on the current product sprint Figma screens

No proper copy guidelines

There wasn’t a proper standard for how we communicate system and other communications with users

No consistent colour palette rules

There weren’t any defined rules for how colours can be applied across the Product/Platform

QA bottleneck for design

As the inconsistent design keeps blocking the QA as repeated issues keep cropping up

Design System planning