Back to Portfolio
SaaS / Enterprise Productivity

Synora

Agile Project Management System

Live Demo
Interactive Speed<100ms
Board Load Time0.65s
Branch Creation3 mins
Active Issues Demo10,000

Visual System & Style

Design System Accent: Sleek, dark developer console style. Dark backgrounds (#0A0A0F) offset by neon indigo accents (#6366f1) and clean gray border partitions.

Typography & Baseline: Roboto Mono and Inter headings to establish clear structural hierarchy, similar to developer IDEs.

Interactive Micro-Animations

  • ✦Kanban cards use Framer Motion for optimistic drag-and-drop translations.
  • ✦Board columns expand smoothly during side-drawer details activation.
  • ✦Activity log feeds fade in line items dynamically upon database events.

User Personas & Pain Points

Evelyn (31, Scrum Master)

Manages 40+ dynamic tasks; hates slow UI transitions and page reloads.

Devon (26, Engineer)

Updates code tasks daily; expects visual speed and instant context.

Solving User Friction

01

Optimistic UI updates immediately shift cards on drag-and-drop, making board interactions instantaneous.

Optimistic UI updates immediately shift cards on drag-and-drop, making board interactions instantaneous.

02

Slide-over drawers for issue details let users edit comments and states without losing workspace position.

Slide-over drawers for issue details let users edit comments and states without losing workspace position.

Accessibility & Contrast Compliance

Semantic structure with proper role='button' and drag aria definitions.
Keyboard-driven card sorting and custom modal navigation support.
High-contrast color selections for prioritized items (Rose red for blocker, Amber for major).