UX & Product Design

Low-fidelity layout sketch showing structure, content placement, and navigation without colour, typography, or visual styling.

"We presented wireframes to stakeholders in week one so feedback focused on layout and flow rather than on font choices and colours."

Interactive mockup used to simulate user flows and gather feedback before investing in full development.

"The Figma prototype let us run usability tests on the checkout flow with five users before a single line of code was written."

Rough sketch or greyscale wireframe used for early-stage concept validation; fast to create and easy to discard.

"The designer sketched lo-fi mockups on paper during the discovery session — we discarded three concepts within an hour before committing to a direction."

High-fidelity design that closely resembles the final product in colour, typography, spacing, and interactive behaviour.

"The hi-fi mockup was pixel-perfect — developers used it as a direct specification and the finished product matched it in every detail."

The structure and organisation of content within a product, designed to support findability, usability, and comprehension.

"A card sorting workshop revealed that users expected billing settings under Account, not under the top-level Billing menu — the information architecture needed a rethink."

Diagram showing the sequence of screens and decisions a user encounters while completing a specific task.

"The password reset user flow has five steps — mapping it revealed an unnecessary confirmation screen that we removed to reduce drop-off."

A collection of reusable UI components, design tokens, patterns, and usage guidelines that ensure visual and behavioural consistency across a product.

"Every new feature uses components from the design system — it eliminated the inconsistency where five different button styles existed across the app."

Named variable storing a design decision such as a colour, spacing value, or font size; bridges the design tool and the codebase.

"Changing the brand primary colour means updating one design token — every component that references it updates automatically in both Figma and the CSS."

Visual or tactile property of an element that intuitively suggests how it should be used; a bevelled button suggests it can be pressed.

"The flat text link had no affordance — users did not realise it was clickable until we added an underline and hover colour."

The total mental effort required for a user to understand and operate a product; high cognitive load leads to errors and abandonment.

"Splitting the 12-field registration form into three focused steps reduced cognitive load and increased completion rate by 28%."

Structured session where representative users attempt to complete tasks while a moderator observes and records pain points and errors.

"In the usability test all five participants tried to click the page header image as a home button — it was not a link, revealing an unmet affordance expectation."

Expert review of a user interface against established usability principles such as Nielsen's 10 heuristics; fast and inexpensive compared to user testing.

"The heuristic evaluation flagged that our error messages violated Nielsen's visibility of system status heuristic — they disappeared after 2 seconds leaving users confused."

Collaborative tool describing what a user segment says, thinks, feels, and does; used during discovery to build shared understanding of user needs.

"The empathy map exercise revealed a tension: users said they wanted more features but felt overwhelmed — it shaped our decision to simplify before adding."

Controlled experiment comparing two versions of a feature to determine which performs better on a defined metric.

"An A/B test on the CTA button copy showed 'Start free trial' outperformed 'Get started' with a 12% higher click-through rate."

Design and development practice ensuring products are usable by people with disabilities; governed by WCAG guidelines from the W3C.

"Making the dropdown keyboard-navigable and announcing selection changes to screen readers brought the feature into WCAG 2.1 AA compliance."