Product Design & UX

A low-fidelity schematic of a screen or interface showing layout, structure, and content hierarchy without visual styling — used early in design to explore ideas cheaply.

"We created wireframes for the onboarding flow in Balsamiq before involving the visual designer — iterating on structure is much faster when there's no colour or typography to debate."

A simulation of a product or feature — ranging from paper sketches to interactive click-through models — used to test ideas with users before committing to full development.

"We ran usability tests on a Figma prototype before writing a single line of code — users consistently missed the primary CTA, so we redesigned the layout based on that finding."

A collection of reusable components, guidelines, principles, and standards that define how a product looks and behaves — ensuring consistency across teams and platforms.

"Introducing a design system cut our design-to-dev handoff time in half — designers work with the same component names that engineers use in code, so there's no translation layer."

A coded implementation of a design system's components — reusable UI elements (buttons, modals, form fields) shared across products to ensure visual and behavioural consistency.

"The component library meant the new admin panel could be built in two weeks rather than six — engineers composed screens from existing components instead of building UI from scratch."

Named variables that store design decisions — colours, spacing, typography, shadows — in a platform-agnostic format that can be consumed by web, iOS, and Android apps from a single source of truth.

"When we rebranded, updating the primary colour took minutes instead of months — we changed the design token value once and it propagated through every product that consumed the token library."

A browser-based collaborative design tool widely used for creating wireframes, prototypes, and production-ready designs, with real-time multiplayer editing and developer handoff features.

"The entire design, engineering, and PM team reviews designs in Figma together — engineers inspect component specs, copy CSS values, and export assets directly without needing separate handoff tools."

The structural design of content and navigation within a product — defining how information is organised, labelled, and connected to help users find what they need efficiently.

"User testing revealed the information architecture was the root problem: users couldn't find account settings because they were nested under 'Profile' rather than the expected 'Account' label — a card sorting exercise with 20 users guided the restructure."

A diagram or sequence that maps every step a user takes to complete a specific task within a product — from entry point to successful completion — helping identify friction points.

"Mapping the checkout user flow revealed 11 steps between adding an item to the cart and order confirmation. We reduced it to 5 by removing redundant screens, and the conversion rate improved by 18%."

A quality of an object or interface element that communicates to users how it can be used — a button looks pressable, a text field looks editable. Good affordance reduces the need for instructions.

"The flat card design lacked affordance — users didn't realise the cards were clickable until we added a subtle shadow and hover state, which increased click-through rate by 34%."

A user's internal understanding of how a system works, built from prior experience. Good design aligns with users' existing mental models to minimise cognitive load and learning time.

"Users expected the trash icon to immediately delete the file — matching the mental model from their desktop OS. Our 'archive' flow broke that model; we renamed the action and added confirmation wording to align expectations."

A usability inspection method where evaluators judge an interface against a set of recognised usability principles (heuristics), such as Nielsen's 10 heuristics, to identify design problems without user testing.

"A heuristic evaluation found seven issues before we ran user tests: the error messages violated 'Help users recognise, diagnose, and recover from errors' — they showed technical codes instead of plain-language explanations."

An approach to web and UI design where layouts adapt fluidly to different screen sizes and orientations using flexible grids, fluid images, and CSS media queries.

"The dashboard was built desktop-first with no responsive design — on mobile, tables overflowed and CTAs were unreachable. A mobile-first rebuild using CSS Grid with breakpoints resolved all reported issues."