Yaman Can.
Products

Storynote · Brand and product design · 2025–2026

Storynote: from mark to workflow.

I designed the identity, node UX, interface system, and chat-first prototype around the same structure: explicit entities, visible relationships, and controls that appear in context.

Role

Brand and product designer

Scope

Identity, node UX, and interface system

Context

External customer prototype

Direction

Nodes to chat, backed by VSON

Storynote.ai
StudioComposer
Film 01 · Scene 04
CharacterMaraReference locked
SceneNight platformShot 04 · eye level
EditReferenceGenerate
StyleNoir grainInherited
SoundLow rail hum00:06
Ask StorynoteMove the camera closer and keep Mara's reference.
Studio workspace Node-based scene building with sample project data.

Storynote sample frames

One visual world, carried across frames.

A recurring crane, bamboo, and torii gate show how visual references can carry across a sequence while framing and composition change.

Ukiyo-e style scene with Mount Fuji, a torii gate, a crane, and bamboo

Frame 01Establish the visual world

Ukiyo-e style crane scene

Frame 02Keep the subject language

Ukiyo-e style bamboo path scene

Frame 03Shift the setting

Ukiyo-e style torii landscape

Frame 04Preserve the art direction

Visual continuityOne art direction carried across four compositions.

01 Identity from the model

Brand construction

A note frame. A node path. One mark.

I designed the Storynote mark by combining a sticky-note frame with an S-shaped node path. The product's connected-node model is present before the interface even opens.

The result reads as a compact [S): note, connection, and name in one gesture.

Sticky-note frame

01Sticky noteThe container and folded corner

S-shaped connected node path

02Node pathAn S drawn as connected entities

Combined Storynote mark

03Storynote [S)Product logic carried into identity

Storynote.aiAI filmmaking workspace

Symbol · wordmark · product descriptor

Original vector constructionThe note frame and connected S combine into the final mark.

Product type

Plus Jakarta SansA clear UI voice with compact labels and calm hierarchy.

Core palette

Surface#FAF9F7 Layer#E4E1DC Ink#1A1816 Accent#8B7355

02 Progressive disclosure

Interaction decision

Keep the graph. Stage the complexity.

The early interface showed every control around every object. I redesigned it as compact, note-like nodes with contextual actions and a focused inspector.

At rest, each node shows its identity and relationships. Hover reveals common actions. Selection opens deeper settings.

Try the node states

One object, three levels of detail.

Keep identity and relationships visible.

Node interaction states
Open preview
Scene · 04Night platformMara · eye level · noir grain
EditReferenceGenerate
CharacterinsideScene
BeforePersistent controls
Crane path scene inside a Storynote node
SceneCrane pathReference locked
CropMaskCameraStyleReferenceGenerate

Every possible action competes with the content.

AfterActions in context
Crane path scene inside the same Storynote node
SceneCrane pathReference locked
EditReferenceGenerate

The object stays legible; the needed action arrives in context.

03 Interface kit

Reusable product language

One component language across the workflow.

Nodes, actions, connections, and inspectors repeat the same hierarchy across the workspace. I defined their structure and states so the graph remains readable before deeper detail opens.

Semantic light and dark surfaces keep the same components legible in both themes.

Storynote interface kitFoundations, states, and domain components

Rest → Hover → Selected → Disabled

TypographyAa

Plus Jakarta Sans
Regular · Medium · Semibold

Light surfaces

Surface · Layer · Border · Accent

Dark surfaces

Canvas · Panel · Raised · Accent

ComponentRestHoverSelectedDisabled
Entity noteContent object
Mara
Mara•••
Mara✓
Mara
Quick actionHigh frequency
ConnectionGraph relation
Inspector anatomy

Deep state gets one home.

Object identity, generation settings, references, and actions stay in the same order.

Selected scene04
01IdentityNight platform
02CameraEye level
03ReferenceLocked
Cast editor

One editor for the full character.

The Cast panel brings reference images, angle generation, defining features, and voice controls into one editor. The same component rules support the rest of the node workflow.

Storynote Cast panel for a rabbit character, showing reference images, angles, features, and voice controls
Close view of the Cast reference images and angle controls
Cast panel · References, angles, features, and voice
Interface languageFoundations, states, and component anatomy shown together.

04 Chat for intent

Chat-first workflow

The instruction came first. The scene model stayed visible.

Composer starts with the creator's instruction. VSON maps it to explicit scene entities, references, and relationships. Studio exposes the same state as nodes for inspection and revision.

Natural-language editing becomes a direct entry point without turning scene structure into a black box.

Storynote.ai
StudioComposer
Scene 04

Composer

You

Move closer to Mara. Keep the platform, reference, and noir grain.

Storynote

I will update the camera while preserving the linked character and style states.

CameraMedium close-up
Describe the next change...↗

Explicit scene state

CharacterMaraReference locked
StyleNoir grainInherited
CameraMedium close-upUpdated by Composer
01Express intent

Describe the change in natural language.

02Update explicit state

Map the instruction to the relevant graph object.

03Inspect and revise

Keep preserved and changed attributes visible.

Composer to StudioThe request changes one attribute while preserving linked scene state.

VSON · Scene ontology

One explicit model across Studio and Composer.

VSON represents scene entities and relationships in a machine-validatable graph. It checks the graph's structure, not the truth of the image.

Example Storynote composition represented by the ontologyImage composition

CompositiondepictsCrane

CompositioncontainsTorii

CompositionviewedByCamera

Graph structure valid
StudioInspect stateNodes and relationships
ComposerExpress intentNatural-language operation
Crane, torii, camera, and composition shown as explicit entities and relations.
Repository ↗Browser studio ↗

05 Design throughline

Identity

The model shaped the mark

A sticky-note frame and an S-shaped node path made connection part of the brand.

Interaction

The graph stayed readable

Content remains visible at rest, actions appear in context, and deeper settings live in the inspector.

Workflow

Chat and nodes share state

Composer captures the instruction while VSON keeps scene entities and relationships explicit.

Takeaway

The interface stayed quiet until the creator needed more.

Storynote kept the graph and made its layers easier to read: identity at rest, common actions in context, deeper structure in the inspector, and chat as a direct entry point.