2022–2023 0→1 product

From tabs to ideas

I designed this research canvas from 0→1 as the solo product designer. Launched on desktop and web.

The project

Superus brought live webpages, notes, and connections into one research canvas. As the solo product designer, I shaped the experience from discovery through interaction design, a lightweight component system, and engineering handoff.

My role

Solo Product Designer

Status

Launched · paid product

The problem

A saved page is not a saved thought

Early conversations with knowledge workers pointed to a recurring breakdown: sources were scattered across tabs, bookmarks, screenshots, and documents. Returning to a topic meant reconstructing why each link mattered. The design challenge was to retain the source and its relationship to the rest of the work.

Which page had the answer?
Research Reading corner
HAL Lounge Chair · Vitravitra.com https://www.vitra.com/en-us/product/hal-lounge-chair
Doze Lounge Chair · Muutomuuto.com https://www.muuto.com/product/Doze-Lounge-Chair-High-Back-Tube-Base
HAL Lounge Chair · Vitravitra.com https://www.vitra.com/en-us/product/hal-lounge-chair
Doze Lounge Chair · Muutomuuto.com https://www.muuto.com/product/Doze-Lounge-Chair-High-Back-Tube-Base
HAL Lounge Chair · Vitravitra.com https://www.vitra.com/en-us/product/hal-lounge-chair
Doze Lounge Chair · Muutomuuto.com https://www.muuto.com/product/Doze-Lounge-Chair-High-Back-Tube-Base
Doze Lounge Chair · Muutomuuto.com https://www.muuto.com/product/Doze-Lounge-Chair-High-Back-Tube-Base
HAL Lounge Chair · Vitravitra.com https://www.vitra.com/en-us/product/hal-lounge-chair
HAL Lounge Chair · Vitravitra.com https://www.vitra.com/en-us/product/hal-lounge-chair
Doze Lounge Chair · Muutomuuto.com https://www.muuto.com/product/Doze-Lounge-Chair-High-Back-Tube-Base
HAL Lounge Chair · Vitravitra.com https://www.vitra.com/en-us/product/hal-lounge-chair
Doze Lounge Chair · Muutomuuto.com https://www.muuto.com/product/Doze-Lounge-Chair-High-Back-Tube-Base
HAL Lounge Chair · Vitravitra.com https://www.vitra.com/en-us/product/hal-lounge-chair
Doze Lounge Chair · Muutomuuto.com https://www.muuto.com/product/Doze-Lounge-Chair-High-Back-Tube-Base
HAL Lounge Chair · Vitravitra.com https://www.vitra.com/en-us/product/hal-lounge-chair
Doze Lounge Chair · Muutomuuto.com https://www.muuto.com/product/Doze-Lounge-Chair-High-Back-Tube-Base
HAL Lounge Chair · Vitravitra.com https://www.vitra.com/en-us/product/hal-lounge-chair
Doze Lounge Chair · Muutomuuto.com https://www.muuto.com/product/Doze-Lounge-Chair-High-Back-Tube-Base
01 / Lost in folders“I know I saved it somewhere.”Folders inside folders.
02 / Lost in links“Which one
was it?”Similar titles.
Different answers.
Illustrative bookmark collection. Saving the address leaves you to reconstruct why it mattered, what you learned, and where to go next.

Product model

Keep sources and notes together

We chose a canvas because research is nonlinear. A live webpage could become a stable source card; notes, groups, and links could sit beside it. This made spatial arrangement part of the workflow rather than a decorative whiteboard metaphor.

Structure study
Superus wireframe: two independent webpage cards and a shared creation toolbar on a canvas

Two pages remain separate objects. The shared toolbar belongs to the canvas rather than to either webpage.

Visual mockup
Superus visual mockup: Miro and Google occupy separate cards above a shared canvas toolbar

The visual design keeps those boundaries: each page has its own title bar and place on the board.

A webpage becomes an object that keeps its place.

Structure and visual studies from the project board.

What each part of the workspace does

Capture: retain a live page and its address. Think: add notes, groups, and connections nearby.

Return: find the source again through Outline and search. Share: carry the board forward through sharing or export.

Capture, connect, and return to the research

The core path had to work without a tutorial: bring in a page, add a thought next to it, connect related sources, then find the work again. We kept capture lightweight so that structuring the research did not interrupt reading.

One research loop

One research loop

    • Open a webpage

    • Pin a live web card

    • Add notes

    • Group and connect

    • Find it in Outline

    • Export the board

↩ Return or share → Capture (Continue the same topic)

  • Start/end
  • Screen/action
The board needs to remain understandable when someone returns to the topic.
The Vitra HAL source and a short brief for an easy-care reading chair stay together on the canvas

Loading image…

The pinned Vitra source stays on the canvas while the Muuto Doze candidate opens in temporary Side Peek

Loading image…

Outline lists HAL, Doze, and the Reading corner note beside the finished comparison canvas

Loading image…

Image 1 of 3

Notes sit beside the source, keeping the question in view.

Keep the brief beside the source, compare another candidate, then return through Outline.
Inspect the workspace structure

Canvas: live web cards and page addresses, text notes, groups, and connections.

Outline & search: find named sources and notes, then select them on the canvas.

Side Peek: temporary browsing of a linked page, with an explicit action to pin it.

Share & export: save a snapshot of the board to revisit or send.

Core decision

Side Peek

Opening a link should not replace the source you pinned

One interaction exposed the product’s mental model. In an early version, following a link inside a pinned page replaced that page. The user wanted to explore a branch, not change the source they had already placed on the board. I looked for ways to separate temporary browsing from the stable canvas.

Low-fidelity wireframe: temporary page B opens beside source A with an explicit pin action

Loading image…

Benefit
Read the branch while preserving the source and its surrounding context.
Trade-off
The temporary panel uses part of the available canvas width.

DecisionSide Peek

Keep the original source in place. Save an explored page only when the reader chooses to pin it.

Source A and its note stay as the reference anchor across all three options.

Compare another candidate without replacing the source

Open another chair in Side Peek while the original source stays on the canvas. Pin the candidate when it becomes useful, then close the temporary panel to return to the comparison.

The pinned source and the research question stay together on the canvas.

01 / 03

Keep the source and question

0:00 0:16
Until you pin a page, only the source and its note stay on the board.

Design system

Shared controls keep a growing canvas consistent

With one designer and a small engineering team, consistency had to be practical. I defined a compact set of cards, toolbars, panels, menus, and states. Focus, selection, and layering rules helped the canvas stay legible as the number of sources increased.

Format or recolor the chair-research notes, then group them in a frame. The same notes stay selected.

COMPONENT STUDY

Made for a canvas.

Explore the icon set 24 outline icons ICONPARK / OUTLINE
SELECTION & FRAMES
3 selected
Three notes selected.
Inspect browsing, search and connections
SIDE PEEK
COMMAND SEARCH ⌘ K
esc
↑↓ navigate↵ peek
CONNECTIONS
Inspect color and type foundations
COLOR STUDY / 01

Indigo

INDIGO / 09 · #4F63E7
TYPE STUDY / 02

Inter

Aa—Zz
0123456789
Tap the letters.
Aa, filled
Contextual editing, grouping and shared visual foundations.
Selected research note with contextual editing, color, and connection controls

Loading image…

A selected connection links the reading-chair decision back to its source, with native line and arrow controls

Loading image…

Share board dialog offering a view-only HTML copy of the reading-chair board, with a note that later edits are not included

Loading image…

Image 1 of 3

Turn reading into working notes, with tools where they are needed.

A launched product, and a lesson in preserving context

Superus launched on desktop and web and earned Product Hunt’s Product of the Day. The project record reports 30k registered users and 1.5k paid subscribers; the reporting period is not documented here.

These product-level figures do not measure the effect of Side Peek or an individual design decision.

Superus

Where web-native minds build & share

Product Hunt 1st
Product of the Day
1.3K upvotes1.7K followers11 reviews
View launch record
Superus Product Hunt launch and rankings
Product Hunt launch, December 2022.

What I carried forward: a research tool earns trust when its objects keep their meaning. A pinned source should remain a source, a temporary visit should feel temporary, and a growing board should provide a clear way back.

Snow Pain Product Hunt · Dec 4, 2022
Different types of content are on the same canvas at the same time … See the big picture and details
Joe Hou Product Hunt · Dec 4, 2022
I never thought it could be displayed in such a visual effect, very cool
Benjamin Metcalfe @ambitendency
I’ve been a very early supporter of SuperUs … an invaluable tool for anyone who works in the knowledge management space.
Ewen Doméon @ewen_domeon
A tool I use everyday, and such a lovely developing team. I absolutely would share it to anyone that has to face the overload of open tabs.
SpencerZ @zheng_changsong
Great UI design, easy to use, can help improve work efficiency.
Snow Pain Product Hunt · Dec 4, 2022
Different types of content are on the same canvas at the same time … See the big picture and details
Joe Hou Product Hunt · Dec 4, 2022
I never thought it could be displayed in such a visual effect, very cool
Benjamin Metcalfe @ambitendency
I’ve been a very early supporter of SuperUs … an invaluable tool for anyone who works in the knowledge management space.
Ewen Doméon @ewen_domeon
A tool I use everyday, and such a lovely developing team. I absolutely would share it to anyone that has to face the overload of open tabs.
SpencerZ @zheng_changsong
Great UI design, easy to use, can help improve work efficiency.
Ewen Doméon @ewen_domeon
A tool I use everyday, and such a lovely developing team. I absolutely would share it to anyone that has to face the overload of open tabs.
SpencerZ @zheng_changsong
Great UI design, easy to use, can help improve work efficiency.
Snow Pain Product Hunt · Dec 4, 2022
Different types of content are on the same canvas at the same time … See the big picture and details
Joe Hou Product Hunt · Dec 4, 2022
I never thought it could be displayed in such a visual effect, very cool
Benjamin Metcalfe @ambitendency
I’ve been a very early supporter of SuperUs … an invaluable tool for anyone who works in the knowledge management space.
Product Hunt reviews, December 2022 onward.
Read the original reviews Read the original reviews
My role & team contributions

I led the research and design decisions below. Engineering owned the desktop and web implementation after handoff.

  • Research problem framing

    I led Decided

  • Canvas product model

    I led Proposed

  • Side Peek interaction

    I led Decided

  • Component system and handoff

    I led Executed

  • Desktop and web implementation

    Team-owned Facilitated

Personal contribution matrix
WorkI ledI contributedTeam-ownedMy influence
Research problem framing——Decided
Canvas product model——Proposed
Side Peek interaction——Decided
Component system and handoff——Executed
Desktop and web implementation——Facilitated

More case studies

All work

  1. SenseTime’s design reference, redesigned

    I designed the reference and reading pages in a four-person team. Launched internally.

  2. Returning to the Old Summer Palace

    Stage visuals and motion for Renwen Tsinghua’s lecture on the palace’s reconstruction.

  3. Animated stickers for a veterinary brand

    Five WeChat characters, each built around one of the brand’s products.