Case Study — Kanban SaaS Redesign

Ideajam

Kanban SaaS & White‑label Redesign.

Kanban BoardTask ManagementDesign SystemWhite-label
Flow Reduced
4 Steps 2 Steps
System Built
Design Tokens Component Library White-label Kit
Enterprise Fit
0 Modification
Requests

Redesigned a Kanban SaaS platform to remove collaboration bottlenecks and build a white-label system adopted by enterprise clients without modification.

SaaSKanbanUI DesignB2B

UI/UX Designer · Kanban Board · Design System

Restructured Kanban hierarchy and shipped a white-label design system that enterprise clients deployed without modification.

Client Ideajam
Type Kanban SaaS · B2B Platform
Progression Steps
−40%

Steps to move a card from submission to review, post-redesign.

1
2
3
4

4 stages → 2 active

Enterprise Adoption
0
Custom Requests

White-label system deployed by enterprise clients without any engineering rework.

Design System
Built

From Scratch

Separated brand tokens from structural components for zero-friction white-labeling.

Colors
Typography
Components
Before → After

From legacy table rows
to structured visual hierarchy.

Before Legacy Enterprise UI · Pre-2021
After Redesigned Kanban · 2022
Key Screens

Every surface designed
for structured ideation.

Idea Detail — Stage Pipeline
Evaluation Panel
Cumulative Innovation Score
Data Room — Document Versioning
Research Signals · 5-Screen Audit4-Stage PipelineZero Token System

The potential was there.
The navigation wasn't.

"It has the potential to be something like Jira — but I can't figure out how to navigate between my task and the other features. And I can't tell who's working on what."

User research · Pre-redesign
Finding Critical
4

Steps required to move a card from submission to review — each on a separate page with no persistent status indicator.

Pipeline Friction
Finding Critical
0

Shared design tokens in the original UI — colors, spacing, and radii were hand-coded per screen with no source of truth.

No Source of Truth
Finding High
6+

Distinct visual patterns for buttons, inputs, and cards across the same product — each screen designed in isolation with no shared component language.

Pattern Silos
Finding High
2

Core visibility features absent at audit: contributor profile pages and per-idea member counts. Users couldn't see who created what or who was supporting it.

Missing Visibility
Finding Medium
30

Total scoring inputs per idea evaluation — 5 criteria × 6-point scale, presented sequentially with no progress indicator or guided completion flow.

Evaluator Load
Finding Medium

More navigation steps to switch between idea detail and the project board versus comparable Kanban tools. Context switching was the primary source of user drop-off.

Navigation Depth
Design Rationale

Three hypotheses.
Three confirmed decisions.

Hypothesis

Reducing card progression from 4 explicit steps to 2 — with inline status indicators — would eliminate workflow confusion and cut time-to-review.

What changed
01

Collapsed 4-step flow to 2 explicit stages

Submission → In Review. Status surfaced inline on the card itself, no external doc needed.

02

Visual stage pipeline on Idea Detail page

Pre-Validation → EH Program → Approval Case → Incorporation — always visible at the top.

03

Persistent "Ideation Stages" panel on every idea

Progress tracker with team assignment and evaluation count visible without scrolling.

Result
−40% Steps to review 4 → 2 stages
Zero Support tickets "where's my card?"

Hypothesis confirmed — users stopped losing track of card status after the inline pipeline launched.

Hypothesis

Separating brand tokens from structural components would let enterprise clients deploy Ideajam under their own identity — zero engineering rework post-handoff.

What changed
01

Two-layer token system in Figma

Default Colourstyle layer (brand) fully decoupled from the component structure layer. Swap one, the other stays intact.

02

NBT white-label variant shipped as a parallel file

Enterprise clients received a second Figma handoff with their palette applied — no structural changes required.

03

Rounded corner + shadow system standardised

6px card, 4px normal, 40px radius buttons — documented and applied consistently across every component.

Result
0 Custom requests post-deployment
Day 1 Deployed no rework

Hypothesis confirmed — enterprise clients deployed the white-label variant without a single engineering modification request.

Hypothesis

Surfacing cumulative innovation scores inline — visible on the idea card — would reduce evaluator fatigue and increase scoring completion rates per idea.

What shipped
01

5-dimension scoring panel

Innovation Degree, Feasibility, Viability, Strategic Fit, Sustainable Impact — each on a 1–6 scale.

02

Cumulative aggregate score surface

Single score (e.g. 4.3) visible on the idea detail and on the card in grid view.

03

Evaluation progress counter

"6 out of 8 evaluated this idea" — gives social proof and creates completion pressure.

Status
Tested at launch

Scoring completion improved in early enterprise cohorts. A forced-rank system would have been a stronger test — this is the main design regret (see Reflection).

Partially confirmed — completion improved but evaluator fatigue on 5×6 sequential scoring was not fully resolved.

Interactions

Motion-first,
keyboard-accessible.

Main Design Elements

Core layout, card structure, and primary navigation patterns.

Create + Reply Thread

Idea creation flow, FAQ modal, and threaded discussion replies.

Mobile View

Responsive layout adapted for mobile-first users in the field.

01

The
Problem

The existing Kanban interface had no clear visual hierarchy between idea stages, causing users to lose track of card status and rely on external documentation. The product also lacked a white-label foundation, blocking enterprise clients who required brand-neutral deployments.

4 Pipeline Steps to move a card to review
6+ Pattern Silos no shared component language
0 Design Tokens colors hand-coded per screen
02

Process
& Strategy

Mapped user-reported friction points against session recordings to identify where cards stalled in the workflow. Designed a structured 4-stage visual flow and built a white-label design system from scratch, separating brand tokens from structural components so enterprise clients could apply their own identity without engineering rework.

01

Discovery & Audit

Mapped user-reported friction against 5 key screens. Catalogued 6+ inconsistent UI patterns and identified 2 missing visibility features — contributor profiles and per-idea member metrics.

02

Pipeline Architecture

Collapsed the 4-stage card flow to 2 explicit stages with inline status visible on every card — eliminating the need for external documentation to track where an idea was in review.

03

Token System & Handoff

Built a two-layer token architecture in Figma — brand palette fully decoupled from structural components. Delivered a white-label variant that enterprise clients deployed on Day 1 without a single engineering modification.

03

The
Solution

Delivered a restructured Kanban interface with explicit stage progression, visual status indicators, and a white-label component system built on separated brand tokens. Enterprise clients received a single Figma handoff they could deploy without modification.

What changed Before After
Card progression 4 stages 2 stages −40%
Token system None 2-layer Figma system
UI pattern count 6+ silos 1 unified system
Enterprise custom requests Multiple 0 post-deployment
04 — Features Shipped

What got
built.

White-label Support

Brand tokens fully decoupled from structural components. Enterprise clients swapped palette in Figma and deployed — no engineering changes.

Idea Preview on Create

Live preview pane visible while drafting an idea — users saw their card as it would appear in the Kanban grid before submitting.

Thread Reply

Nested reply threads on each idea post. Inline Reply action expands a sub-thread without leaving the idea card.

Global Channel Shoutouts

Broadcast promising ideas to the organisation-wide channel. Members outside the project get visibility on high-scoring concepts.

Detailed Progress View

Stage pipeline with evaluation count, team assignment list, and cumulative score — all visible on a single idea detail screen without scrolling.

Per-User Idea Profile

Each user profile shows ideas they pitched and ideas they are supporting — creating accountability and peer visibility into contribution.

05 — Outcome

Results.

Reduced the steps required to progress an idea from submission to review by 40%. The white-label design system was adopted by enterprise clients without any custom implementation requests to the engineering team post-launch.

Idea Progression −40% Steps

Enterprise White-label: 0 Custom Requests

0 Engineering Rework Post-Handoff

06 — Design System

Design
System

Default Colour Styles
NBT Colour Styles — White-label
Type Scale — Major Third · Poppins
Rounded Corners + Colour Shadows
07 — Research Artifact

User
Flow

Authentication and onboarding flow mapped before any visual design began — sign in, sign up, and credential recovery paths documented to surface where drop-off risk was highest.

08 — Reflection

What I'd do
differently.

30 inputs per evaluation
What shipped

30 scoring inputs
per idea.

5 criteria × 6-point scale, presented sequentially with no progress indicator. Evaluators completed the form but reported decision fatigue — especially on ideas with large team counts where everyone was expected to score independently.

What I'd ship instead

A forced-rank model — drag 5 criteria into priority order rather than scoring each on a scale. One decision instead of thirty. Faster signal, no number fatigue, more consistent cross-evaluator results.

Design sequence regret

Evaluation panel
came too late.

The scoring UI was designed after the Kanban structure was already locked — it inherited the card pipeline's logic without its own usability pass. The 1–6 scale was never pressure-tested in isolation before handoff. The task-completion improvement was real, but the evaluator fatigue issue was always there and went unresolved.

What I'd do instead

Run a dedicated usability session on the scoring flow independently — before any visual design begins. Even a paper prototype with 5 evaluators would have surfaced the sequential fatigue early enough to change the model.

Explore

More Projects

Eclectic AI-Powered Travel App Work

Regional Markets

Product Designer · 2025

One codebase. Three markets. Eight languages.

Designed a mobile-first AI travel app with a generative asset pipeline and a DLS built for simultaneous deployment across Asia-Pacific, MENA, and Latin America.

AI asset pipelineMobile-first DLSMulti-locale
View