An independent brand and interactive product concept for a more playful way to sketch, shape, explore and present spatial ideas.
VISIT LIVE PROJECT ↗
▰ FOLIO®JOURNEY5 SKETCH-TO-SPACE STAGES
STUDIOMODEL · MATERIAL · LIGHT CONTROLS
STUDIES3 SPATIAL FIELD NOTES
BOUNDARYNO ACCOUNT · UPLOAD · PAYMENT
A fictional design product still has to feel coherent, useful and honest. The challenge was to make an unfamiliar spatial workflow understandable without turning the website into a feature checklist—or suggesting that speculative AI, collaboration and commercial capabilities already existed.
I built the experience around one courtyard idea moving through five states: draw, build, unfold, illuminate and present. The public narrative explains the product through use, while a working studio lets visitors orbit a model, change floors and materials, adjust daylight, explode the structure and export a concept sheet.
The product is consistently labelled as an independent concept. Generated imagery is identified, pricing is illustrative, future features are marked as such, and the studio explicitly states that it requires no account, upload or payment. The demo proves interaction without pretending to be a production CAD or AI service.
The work is shown as a sequence of decisions and deliverables, including the constraints that shaped the finished experience.
The work began by defining the problem Folio could credibly demonstrate: helping spatial ideas become easier to explore and communicate. Concept capabilities, future possibilities and illustrative pricing were separated before interface design began.
One courtyard idea was carried through five stages so the unfamiliar workflow could be understood through use. Field notes, plans and the FAQ then widened the story without interrupting that central thread.
The explorer was designed as evidence rather than decoration. Floors, materials, daylight, orbit and exploded view each reveal a different spatial decision, while reset and export make the demonstration feel complete.
The product story and working demo were developed as one responsive experience. Keyboard behaviour, reduced-motion preferences, local-only interaction and readable fallback states were considered alongside visual polish.
A courtyard pavilion becomes the thread through the entire product story. Visitors see the same idea move from a first question to something dimensional, atmospheric and ready to share.
Draw, build, unfold, illuminate and present are not decorative tabs. Each stage reframes the model, introduces a new question and connects the narrative directly to an action in the studio.
The studio provides immediate control over floors, material palette and daylight, plus orbit, exploded view, reset and export states. It behaves like a focused product demonstration rather than a static mockup.
Three field notes—a courtyard house, a garden in the sky and a circular reading room—show how the same visual system can hold residential, collective and cultural ideas.
Monthly and yearly plan states demonstrate product packaging while explicitly separating demo features from future concepts. Nothing asks for payment or creates a subscription.
The FAQ explains what Folio is, what can be tried, what it does not replace and how the local demo handles data before asking visitors to explore further.
Key interface moments from the live build, presented in sequence to show how the visual system changes across content, interaction and intent.
FOLIOSketch. Shape. Explore.
A little more outside, inside.
Curious · Maker · Together
▰ FOLIO®01 / PRODUCT POSITIONING
02 / BRAND + EDITORIAL DIRECTION
03 / UX / INTERACTION DESIGN
04 / 3D DEMO EXPERIENCE
05 / FRONT-END DEVELOPMENT
A polished launch experience could imply that Folio is commercially available. Independent-concept labels, illustrative plan language and clear FAQ answers keep the demonstration honest.
Interactive 3D and generated imagery can suggest a production CAD or AI workflow. The experience distinguishes working local controls from future ideas and states what the tool does not replace.
Model interaction creates performance, motion and input risks across devices. Focused controls, reduced-motion consideration and a narrative that remains understandable without constant manipulation reduce that dependency.
Even fictional plan cards can be read as an offer. Pricing and subscriptions are labelled illustrative, and the demo requires no account, upload or payment.
Following the same courtyard from sketch to presentation made an unfamiliar product easier to understand than a broad catalogue of disconnected features.
The working explorer adds credibility because visitors can test it immediately, but its value depends on equally clear language about what is conceptual, local and not yet a service.
A commissioned product would require observation with architects and interior designers, device-performance testing and technical validation before expanding collaboration, generation or commercial features.
The result is a responsive brand and product demonstration that joins emotional storytelling with working interface behaviour: a five-stage concept journey, hands-on studio, three field-note studies, flexible plan states and a transparent FAQ in one complete launch experience.
DISCUSS A PROJECT ↗