Role
Lead Product Designer
Timeline
Sep 2023 - Dec 2023 (3 months)
Responsibility
Research, UX Canvas facilitation, toolkit architecture, prototyping, and validation
Internal Wireframe Toolkit
Building a mid-fidelty toolkit for faster, clearer ideation
In late 2023, Console Connect’s design team saw early mocks read as “final” because we leaned on high-fidelity components to present ideas. Stakeholders mistook explorations for final products—derailing feedback sessions and delaying decisions.
I led the design of an internal wireframe kit that introduced a lightweight, mid-fidelity visual language for ideation—helping designers communicate early concepts clearly, iterate faster, and avoid stakeholder misalignment.
Project Outcome
Problem: High-fidelity mocks looked “final,” derailing reviews toward polish
Solution: A mid-fidelity wireframe kit + templates that signal WIP and speed up ideation
Impact: ~40% faster mockups, clearer conversations, tighter iteration loops
The Problem
Hi-fi design system caused confusion
Designers needed to visualise ideas quickly, but Nimbus, the existing high-fidelity design system, created the wrong impression.
Stakeholders saw mockups that looked “final” and provided feedback on visual polish instead of functionality or flow. This slowed down early exploration and often caused teams to waste time refining details too early.
The core question became:
How might we help designers create quick, low-commitment mockups that still feel consistent and professional—without being mistaken for final designs?
The Challenge
Designing for designers — balancing speed, clarity, and restraint
Designing the toolkit required balancing speed, clarity, and restraint. It had to support quick exploration, clearly signal work-in-progress, and adapt to different product contexts without introducing extra maintenance. Most importantly, it needed to stay lightweight and distinct from our production design system so designers could move fast without the pull of high-fidelity polish.
My Approach
From research and requirements to an intentional toolkit
To shape the direction of the kit, I worked closely with the design team to understand how they were creating early concepts and where friction appeared. This included reviewing existing resources, mapping workflows, and aligning on goals through collaborative sessions. The team consistently highlighted the same issues: mock preparation took too long for early-stage discussions, stakeholders often misread intent without a mid-fi standard, and designers needed a neutral visual language that helped them move faster without being pulled into high-fidelity detail.
Based on this, I created a requirements table outlining essential components, states, and styles needed for clarity and scalability.
The Solution
Intentional simplicity as a design language
Using the requirements as a guide, I designed the core UI elements and grouped them into modular sets with a clear mid-fidelity tone. The component work focused on common interaction patterns, a neutral and desaturated colour palette, simplified typography, and reusable templates for dashboards, flows, and layouts. The intent was deliberate simplicity—enough structure to stay consistent, without adding the level of detail that would make early concepts appear final.
Mid-Fidelity Components
Simplified shapes and typography kept focus on layout and flow.
Intentional Colours
Limited palette reduced visual noise and clearly signaled “work in progress.”
Prebuilt Templates
Ready-to-use layouts helped designers start quickly.
Testing & Iteration
Proving speed and clarity in real sessions
I validated the kit through a series of task-based time trials during active concept reviews. Designers recreated existing screens, drafted new flows, and prepared annotated walkthroughs.
The kit reduced time-to-first-frame by 37% and cut mock preparation time by 34%. Feedback also revealed usability issues in our early components, including unnecessary layers and auto-layout complexity.
Together with the team, I simplified structures and consolidated everything into a single component page. This made the kit easier to navigate and improved speed during early-stage exploration.
Governance & Maintenance
Maintaining a Lightweight, Scalable System
To keep the wireframe kit accurate and easy to use as adoption grew, I defined a clear governance flow. Designers shared requests through Slack or Figma, and I triaged each one by clarifying the need, documenting it in Jira, sizing the work, and deciding whether it entered the backlog. This ensured updates were intentional rather than reactive.
I introduced three levels of work — small fixes, medium updates, and larger component additions — which helped us prioritise requests and plan effort realistically. We also locked the master Figma file to maintain version stability and created a dedicated Slack channel for fast feedback, with another designer supporting ongoing triage.
These operational structures allowed the kit to scale without becoming heavy, ensuring it remained a dependable system for fast exploration.
Results
~40% Faster mockups, clearer conversations, tighter loops
The wireframe kit quickly became the standard way to explore ideas.
Mockup creation time dropped by roughly 40%
Early reviews shifted toward flow and intent rather than visual polish
Within the first 60 days, 75% of designers had used the kit, and 95% of new concepts started from its templates.
This consistency created clearer conversations, reduced rework, and gave teams a faster path through discovery. The kit also strengthened stakeholder confidence in early design discussions by making intent easier to read and align on.
Most importantly, I learned how small, well-defined guardrails can meaningfully shift team culture and improve the quality of early design conversations.