Skip to content
storyboarder_website_design.hlp — Windows Help

0→1 Product Design · Brand · UX

sumugi

Turning "I have a story" into "I made a comic."

Sumugi is a visual-storytelling platform where anyone builds scenes in 3D, casts VRoid characters, and ships an episode — no drawing required. Designed end-to-end, 0→1.

Read me

Project

sumugi

Role

Product Design · Brand · UX

Industry

3D creative tools · indie comics

Scope

End-to-end 0→1 · brand, product & site · 12 surfaces

Tools

Figma · Linear · After Effects · Notion

Year

2026

Sumugi — cover
Results

2.6×

Return visits

A gallery-first homepage beat every feature-led layout on repeat visits.

9 days

Median wait to first scene

A self-serve waitlist cut the wait from 87 days to 9.

11 / 12

Understood the product

A 6-second panel autoplay — up from 9/12 who bounced the old hero in 8s.

The challenge

Twelve hundred creators shipped 3D scenes daily — but publicly, Sumugi barely existed. Five interlocked problems blocked every growth path.

Five problems
01A name pointing the wrong industry"Storyboarder" is a film job title; the real users are comic creators. Recruiters, students, and creators each saw a different product.
02Creators vs. readers — no one had decidedMake-comics and read-comics are different funnels. Serving both, the site converted neither.
03Software product, but the moat is communityThe 3D workspace is the tool; the community is the product. Sold as software, it commoditizes against Clip Studio and Krita.
04A new category with nothing to compare it toNo "like X, but for Y" existed. We had to make the concept legible before we could sell anything.
05A flat visual identity with nothing to sayThe legacy site looked like any other SaaS — forgettable. For a visual-storytelling tool, that's a credibility problem.

SUMUGI — CASE STUDY

§ 01Approach — the pivot
Goal

Land an ownable name, commit creator-first, and make the community the product — cutting the median path to a first published panel from months to days.

The pivot

“Sell the community's output — not the tool that produced it.”

Every beta call pointed to the panel, not the tool. So the homepage and IA lead with community output — gallery above the fold, personas as navigation, features framed as workflow. The tool exists, but never introduces itself.

SUMUGI — CASE STUDY

§ 02Naming & meaning
The name · before → after

Storyboarder → sumugi

sumugi

/ˈsuː·muː·ɡi/ · 紬

means “to weave · to spin a thread into cloth”.

Why this name

Short, ownable, stable across EN / JP / EU. Not locked to a feature — it implies craft and assembly, matching how users already describe their work: building a story panel by panel.

SUMUGI — CASE STUDY

§ 04Color — palette
Palette

Electric violet

#7E31F2 · Primary brand · CTAs

Deep violet

#6F15F0 · Hover · pressed states

Ink violet

#4F0CBB · Backgrounds · hero wash

Ultra magenta

#F231F2 · Accent · mascot highlight

Signal yellow

#F2E531 · Alerts · new-feature ribbon

Sumugi's five-color system — electric violet leads, magenta accents the mascot, signal yellow flags new features.

SUMUGI — CASE STUDY

§ 05Typography
Faces

Display · Megazoid

Body / UI · Storyboarder Sans

Pairing

Display — Megazoid: Display + logomark. Bubbly, dimensional, comic-native. Body / UI — Storyboarder Sans: UI + body. Custom variable sans — neutral at 400, punchy at 800.

SUMUGI — CASE STUDY

§ 06Product surfaces (0→1)
Scope

Scoping 0→1 meant choosing surfaces, not features — twelve, grouped into three jobs: get in, make, belong. The blank page stops people, so Sumugi never opens on nothing: everything feels like editing, not creating from scratch.

Information architecture · sitemap

Information architecture · sitemap

Twelve surfaces into three arcs: get in → make → belong.

Onboarding experience

Onboarding experience

The first run never opens on a blank page — pick a template and you're already making.

Invite-only landing

Invite-only landing

Sets the tone before signup: you're already inside.

Asset library

Asset library

Assets, not art skills — the first panel starts from someone else's work.

Asset upload

Asset upload

Bring your own VRoid character, prop, or stage into the library.

Batch upload

Batch upload

Import a whole cast and prop set in one pass, not one at a time.

Marketplace

Marketplace

Creators publish and remix assets — the community stocks its own shelves.

Marketplace · item

Marketplace · item

Open an asset: preview it, try it, add it to your own project.

One-shot & export flow

One-shot & export flow

The "click": a 3D scene becomes a publishable panel people can like and comment on.

Creation tool · core flow
Build3D scene · camera
CastCharacters · VRoid import
Frame2D panel editor

Conceptual user flow · core task, not shipped screens

SUMUGI — CASE STUDY

§ 07Website — final
Homepage
Homepage — final design

The finished landing page — full design

Homepage — light mode
Homepage — light mode

The same page, dressed for daylight

Campaign page
Campaign landing page

A standalone page for launches and invites

SUMUGI — CASE STUDY

§ 08Outcome
Lessons
01Community is the product, not the feature.We led with the workspace — but people came back for what others made, not the renderer. Gallery above the fold beat every feature-led layout by 2.6×.
02New categories need a demo, not a definition.9/12 went blank at "3D workspace for 2D comics." A 6-second autoplay of a finished panel — no text — got 11/12 to describe it correctly.
03Flat design is a positioning statement.The old site was clean and forgettable. Megazoid, electric violet, film grain — all said "we care how this looks." Design without a point of view recruits no one.
Shipped
  • Product design · 12 core surfaces
  • Marketing site · 5 pages
  • Brand system · logo · color · type · voice
  • Launch campaign · #MadeWithSumugi
  • Design system · 14 components
  • Tokenized Tailwind theme
  • Email templates · welcome · invite · changelog
  • Motion principles · 6 loops
  • Founder handoff doc · 18 pages
  • Featured · Designspiration · Sidebar · Hover.dev

Visit storyboarder.com ↗

SUMUGI — CASE STUDY

Sumugi
Ready