2-panel
Sidebar + content split — reduces full-page reloads.
7 nav items
Primary links within cognitive sweet spot (7±2).
4 workspaces
Color-coded for instant visual separation.
Designing a focused, low-friction sidebar navigation for
a multi-workspace productivity tool balancing information
density, contextawareness, and team collaboration signals.
Designing a focused, low-friction sidebar navigation for
a multi-workspace productivity tool balancing information
density, contextawareness, and team collaboration signals.
User & product audit
Identified the core user: a team member in an async-first workspace. Mapped their key jobs-to-be-done
create notes quickly, find past sessions, switch context between workspaces without losing flow.
Information architecture
Grouped nav items by usage frequency and mental model: primary actions (top), secondary/utility (bottom).
Separated "workspace" from "navigation" — they answer different questions (what vs where).
Component design in Figma
Built nav items as auto-layout components with 3 states: default, hover, active. Ensured consistent 48px tap
targets for all interactive items. Designed workspace dots as a reusable chip component.
Empty state design
Wrote and designed the "No assets yet" state with a clear explanation of what belongs here + a primary CTA.
Avoids leaving users stranded — turns an empty screen into an onboarding moment.
Prototype & review
Built clickable prototype for sidebar interactions — active state transitions, workspace switching, panel updates.
Reviewed spacing, visual weight, and readability across light conditions.
Problem 1 — Multi-context switching fatigue: Teams often work across multiple projects (Research,
Finance, Launch). Without visual separation, every switch feels like starting over — users lose their
mental model of "where am I?"
Problem 2 — Buried utility actions: In most tools, settings and usage info are buried in menus.
Users forget limits (like token quotas) or can't find preferences fast — causing frustration at critical moments.
Problem 3 — Empty state paralysis: When a new user lands on an empty section (like Assets), they
don't know what goes there or how to start. Generic "nothing here" states stall adoption.
Problem 4 — Icon vs label ambiguity: Navigation that uses only icons forces recall over recognition.
But label-only navs lose scannability at a glance. Getting this balance wrong kills efficiency.
"How do we make a multi-workspace, multi-mode tool feel simple enough for daily use —
but powerful enough for a full team?"
Nova is a team productivity tool — a hybrid of notes, playbooks, sessions, and shared assets.
It's designed for small teams that need a shared "brain" — structured
enough to find things, flexible enough to add them fast.
Primary navigation
Overview, Playbooks, Sessions, Assets, Shared Space, Activity, Connections — each a distinct mode of working
Workspace switcher
Research, Launch, Finance, workspace — color-coded dots for fast visual identification
Persistent utility bar
Token usage indicator + Preferences always accessible at the bottom — never buried
Context — What is Nova?
Problems Being Solved
Design Process
Context — What is Nova?
Nova is a team productivity tool — a hybrid of notes,
playbooks, sessions, and shared assets. It's designed for
small teams that need a shared "brain" — structured
enough to find things, flexible enough to add them fast.
Primary navigation
Overview, Playbooks, Sessions, Assets, Shared Space,
Activity, Connections — each a distinct mode of working
Workspace switcher
Research, Launch, Finance, workspace — color-coded
dots for fast visual identification
Persistent utility bar
Token usage indicator + Preferences always accessible at
the bottom — never buried
Problems Being Solved
Problem 1 — Multi-context switching fatigue: Teams often
work across multiple projects (Research, Finance, Launch).
Without visual separation, every switch feels like starting
over users lose their mental model of "where am I ?"
Problem 2 — Buried utility actions: In most tools, settings
and usage info are buried in menus.Users forget limits
(like token quotas) or can't find preferences fast
causing frustration at critical moments.
Problem 3 — Empty state paralysis: When a new user
lands on an empty section (like Assets), they don't know
what goes there or how to start. Generic "nothing here"
states stall adoption.
Problem 4 — Icon vs label ambiguity: Navigation that
uses only icons forces recall over recognition.
But label-only navs lose scannability at a glance.
Getting this balance wrong kills efficiency.
"How do we make a multi-workspace, multi-mode
tool feel simple enough for daily use — but
powerful enough for a full team?"
Design Process
User & product audit
Identified the core user: a team member in an async-first
workspace. Mapped their key jobs-to-be-done create notes
quickly, find past sessions, switch context between
workspaces without losing flow.
Information architecture
Grouped nav items by usage frequency and mental model:
primary actions (top), secondary/utility (bottom).
Separated "workspace" from "navigation" — they answer
different questions (what vs where).
Component design in Figma
Built nav items as auto-layout components with 3 states:
default, hover, active. Ensured consistent 48px tap
targets for all interactive items. Designed workspace dots
as a reusable chip component.
Empty state design
Wrote and designed the "No assets yet" state with a clear
explanation of what belongs here + a primary CTA.
Avoids leaving users stranded — turns an empty screen
into an onboarding moment.
Prototype & review
Built clickable prototype for sidebar interactions — active
state transitions, workspace switching, panel updates.
Reviewed spacing, visual weight, and readability across
light conditions.