Brand & visual system
Logo, icon and brand-surface work supporting the product family — the visual layer that product UI had to stay consistent with.
Overview
Logo, icon and brand-surface work supporting the product family — the visual layer that product UI had to stay consistent with.
Consistent brand surfaces across web, mobile and marketing output.
What I owned
Visual Designer — end-to-end interface and interaction design, working with product and engineering through delivery.
What it runs on
Brand · Product surfaces. Design decisions were made against the real constraints of that surface.
Problem
Product design and brand design drift apart unless someone keeps translating between them.
User context
People arrive at this product with a task already in mind and limited tolerance for exploration. The interface has to confirm they are in the right place, show the shortest path to the outcome, and stay predictable when conditions are poor. Replace this paragraph with observations from your own research notes.
Research
Research combined stakeholder conversations, a review of the existing product, and usability sessions with people representative of the primary audience. Findings were translated directly into wireframes rather than stopping at a report.
Stakeholder interviews
Product, operations and engineering — what the business needs the flow to do.
Product review
A pass over the current experience, cataloguing friction, inconsistency and dead ends.
Usability sessions
Watching people attempt the core task, noting hesitation rather than opinion.
Insights
Insight 01 — the decisive information appears too late in the flow.
Insight 02 — people re-check the same detail more than once, so it belongs on screen permanently.
Insight 03 — the error path is more common than assumed and was not designed.
Replace with the specific findings from this project.
Structure
Information architecture and flow came before any visual decision. The goal was a structure that could absorb new features later without a redesign.
Journey
Before
Intent, comparison and doubt — what the person needs to feel confident enough to start.
During
The core task, with state, progress and cost visible at all times.
After
Confirmation, recovery and the next reasonable action.
Exploration
Wireframes stayed deliberately rough for as long as possible so that layout arguments did not turn into colour arguments. Several structural directions were tested against the same content before committing.
UI direction
The visual direction was set from the product family it belongs to: type scale, spacing rhythm and colour roles first, decoration last. Every component had to survive the densest screen in the product.
Colour carries role, not mood: one action colour, one attention colour, one positive state, and a neutral scale doing most of the work.
Interaction & states
Each component was specified across its full state range — including the ones nobody demos. Loading, empty, partial and error states were designed alongside the happy path, not after it.
Design system
Patterns that appeared more than twice were promoted into the shared library with tokens, usage notes and redlines, so engineering could build without interpreting.
Final screens
The delivered interface, shown across the surfaces it actually ships on.
Testing & iteration
Prototypes were put in front of people before build. Where someone hesitated, the design changed — not the explanation.
Round 01 — what was tested, with whom, and what changed as a result.
Round 02 — the follow-up pass and remaining open questions.
Replace with the real testing record for this project.
Outcome & reflection
Outcome — describe what shipped and what it changed for users and the business. No numbers are claimed here; add verified figures if you have them.
What I would do differently
Structure earlier and decorate later. The strongest gains on this project came from fixing the order of information, not from any single visual decision — and that work could have started a week sooner.