- My role
- Design direction & interaction design
- The idea
- A clearer scope for creative work
- Deliverables
- Desktop, mobile & Figma prototypes
- Process
- AI-assisted design & development
A little structure. More possibility.
From “what if”
to a shared plan.
Choosing the work is only the beginning. Scope connects deliverables, budget and pace, so every adjustment has a visible consequence—and every project starts with a clearer conversation.
01 / Explore the desktop
Make a choice.
See what changes.
Add a deliverable, change the pace, then review your brief. Open Explore the plan to preview a different direction before committing to it.
Scroll inside the demo to explore. For saved versions, copying and printing, open the full-screen HTML version. Estimates are illustrative.
02 / Made for smaller screens
Your estimate.
Always within reach.
The mobile layout keeps the estimate and next step close while the detail scrolls. The type stays readable, the controls stay generous, and the optional tools open when you need them.
Try Fine-tune your project: set a budget, protect an essential deliverable, then compare the proposed scope with the original.
03 / The design decisions
Useful depth. A calm first impression.
Make the trade-offs visible
Deliverables, revisions and pace update the same estimate. A what-if preview shows the difference before you apply a change, with a way back to the previous draft.
Keep complexity optional
Timelines, payment milestones, saved versions and budget fitting sit behind expandable sections. The main journey stays focused on scope, details and a brief.
Give the work room to breathe
IBM Plex Sans, a 16px minimum and translucent Graphite colours create a readable interface. Desktop keeps the summary alongside; mobile pins the essentials below.
04 / From interface to interaction
A prototype you can put to work.
The HTML includes calculated estimates, budget comparisons and a downloadable proposal. The supporting Figma file follows the same visual system across 40 prepared states per device.
Figma demonstrates guided journeys; the HTML handles freeform inputs, calculations and exports. Both layouts were checked against the rendered HTML, with automated tests for pricing, budget fitting, state changes and visual consistency.
This is an independent portfolio concept. Usability and business outcomes have not been measured.
Open the supporting Figma design file ↗Design direction by Kyra Pieterse / YeahCan. Typeface: IBM Plex Sans. Font licence.