Product design / A clear next move
Wizzo
As Wizzo’s founder and creative director, I shaped its celestial identity, Wisp character, and AI mentor experience.
Creative direction and product identity for Wizzo, Wizzo Labs’ AI mentor: a recognizable visual world, a clear next move, and deliberate user control.
- My role
- Founder & Creative Director — concept, visual identity, product design, prototyping, and implementation
- Product
- Wizzo Labs
- Period
- August 2025 - Present
- Resources
- Case study + two guides
“The original Wizzo was functional, but it felt too generic to me. It did not express the identity or sense of direction I wanted the product to have.”
The Wizzo experience
01 / 10Home: recommendation hierarchy
September 2026 Figma screen. A dominant next move, quiet task surface and amber action establish a clear starting point.
Direction
Give ambition a clear next move.
I wanted Wizzo to make progress feel tangible: one useful action, a visible place in a Campaign, and a clear way to begin. I directed the product toward a Living Observatory identity and made hierarchy, user control and consistency the organizing principles.
A recognizable identity
Deep space, Cinzel display typography and Wisp create a distinct world. Quiet panels and Inter working text keep reading and action clear.
One leading action
The recommended move receives the strongest hierarchy. Supporting context and other Campaign moves remain available without competing for equal attention.
Home
How does the interface make the next action clear?
Home gives the task a destination. The primary card pairs an actionable title with a short instruction, duration and Start Focus. Amber identifies the action; cyan organizes context; the atmosphere stays behind the working surface.
Hierarchy before density
I concentrated emphasis on the next move instead of giving every card the same visual weight.
Choice remains visible
Other Campaign moves sit alongside the recommendation. A strong default should still leave room to choose differently.
Home: recommendation hierarchy
September 2026 Figma screen. A dominant next move, quiet task surface and amber action establish a clear starting point.
Commitment
What stays editable before commitment?
Onboarding turns an intention into a first move through selection, definition and review. The review screen makes the Campaign, task and duration explicit before anything is saved.
A deliberate review step
Review adds effort, but it lets someone inspect the commitment and return to edit it.
Carry context forward
The selected Campaign and duration persist through review and back navigation, then carry into Focus.
Onboarding: review before commitment
Campaign, first move, supporting detail and duration remain visible before confirmation. Figma prototype with illustrative content.
Recovery + mobile
How does the experience recover from failure?
A failed save should preserve the decision. The error state retains the plan and explains the next action. On mobile, scrolling content sits above fixed navigation so the continuation remains reachable.
Recovery: preserve the decision
A failed save keeps the entered plan in view and provides a retry. Prototype save outcomes are simulated.
Mobile: a reachable confirmation
The real mobile prototype, scrolled to Confirm first move. The action is fully visible above fixed navigation.
The Figma prototype simulates saves and uses predefined field content and static timers. Its desktop, 390 px and 360 px screens are review samples; responsive components are evaluated separately.
Shared system
How do shared components preserve consistency?
I carried the same action hierarchy, feedback and spacing logic across the product. The editable Figma system includes reusable controls, named semantic roles and instances that can be inspected with long content and narrower widths.
Name the purpose
Text, surface, border, action and feedback roles make the reason for a value visible. Bindings let shared controls inherit those decisions.
Test the content
Long labels, multiline Campaign names, state variants and icon swaps reveal where a component needs to wrap, grow or preserve alignment.
Reusable controls and interaction states
Native Figma Action variants: default, focus, disabled and busy, with editable labels and swappable icons.
Components under content stress
Long labels, multiline Campaign content, responsive review rows and state variants expose the shared layout rules.
Wisp
How does identity support the task?
I chose the Celestial Familiar direction for its warm core, asymmetric silhouette and ribbon-like form. I rejected an early simplified export because it lost the character that made the direction work. The accepted replacement became a shared visual and behavioral family.
Art direction is an acceptance decision
AI-assisted exploration expanded the options. I set the direction, critiqued fidelity and judged the result at product sizes.
One character, explicit behavior
Eight states and four size tiers preserve identity across contexts. Static fallbacks and text status keep the experience useful when motion is reduced or unavailable.
Wisp: accepted replacement
The accepted Celestial Familiar image follows the direction critique. This is the replacement, not the rejected export.
Wisp: a shared state family
Eight distinct states carry one recognizable character across surfaces. Essential status also remains available in text.
Home exploration
Can the explanation help someone choose?
I explored two new alternatives in Figma before implementation. Both separate the recommendation reason from the task instruction and make adjustment consequences explicit. The inline proposal keeps the reason visible during adjustment and is recommended for the current two-action scope, pending review.
A / Inline adjustment
Keeps the task, reason and controls together, with a small interaction cost. Expanded controls take space inside the recommendation card.
B / Context drawer
Makes room for richer context and more controls, but requires a shift away from the main card.
Comparison criteria
Can someone explain the recommendation, predict what Snooze or Not for now changes, and cancel or recover without losing their place?
Home proposal A: inline adjustment
Recommended proposal, pending review by Mike. The reason remains visible while Snooze, Not for now and Keep this recommendation stay beside the task.
Home proposal B: context drawer
Alternative proposal with the same task and consequences. The drawer adds a context shift; closing it keeps the recommendation unchanged.
Alternative A is recommended pending review by Mike; not implemented. Illustrative tasks, reason signals and metrics. Snooze moves the due date to tomorrow. Not for now removes this as a suggested first step; the task stays in Trials and can still be recommended when due.
Play Home proposal AResult + evaluation
A coherent experience with deliberate control.
The result brings a recognizable identity, a clearer next-action hierarchy, an explicit commitment boundary and reusable interaction rules into one experience. The next evaluation should test whether that clarity supports useful action.
Understand and choose
Ask people to explain why a move leads and predict an adjustment before using it.
Act and recover
Observe useful first actions and independent recovery, including narrow screens and failed saves.
Measure the right outcome
Pair activation and return behavior with comprehension and task completion. These are planned evaluation priorities, not measured conversion or retention gains.
Take a closer look
Case study and design guides
Download the complete design narrative, identity guidance and reusable system specifications.
Tools
Tools and implementation
Continue the evidence trail
From proof to role fit
Compare Wizzo with adjacent systems, or carry its reviewed capabilities into an Adaptive Focus brief.