Mobile Application Design
Flowdeck
Project Management for Focused Teams — A UX/UI Mobile Case Study
One calm, distraction-free workspace that unifies Kanban pipelines, calendar mapping, and real-time budget tracking for fast-moving product teams.
- Role
- Lead UX/UI Designer
- Duration
- 10 Weeks (Q3 2024)
- Tools
- Figma, Maze, Whimsical
Plan. Track. Ship.
GET STARTED
Welcome back
Your workspace at a glance
Q3 Launch Plan
68% complete
Define sprint templates
DoneReview roadmap draft
TodaySeptember 2024
Wed
12
Wed
13
Wed
14
Wed
15
Product demo prep
10:00 AM – 11:30 AM
No more events today — protect the afternoon for deep work.
01 / Context
Overview: The Project Paradigm
The Problem
Modern product teams find themselves constantly context-switching between fragmented tools. Kanban boards live in one application, roadmaps and timelines in another, budgets in complex spreadsheets, and communication in chat logs. This fragmentation degrades focus, fragments alignment, and significantly slows operational momentum.
The Solution
Flowdeck introduces a unified workspaces architecture—harmonizing high-density Kanban pipelines, strict calendar mapping, and real-time financial tracking directly inside a singular, distraction-free environment. Built around the concept of absolute focus, Flowdeck aims to bring high performance back to fast-moving product teams.
02 / Research & Insights
Understanding the Operator's Needs
“I jump between Jira for tasks, Google Calendar for schedules, and Google Sheets for tracking spend. I lose an hour a day just copying updates.”
“Most project tools feel like complex databases. I want an interface that lets me focus on shipping rather than configuring fields.”
“We have zero visibility on real-time task budget metrics until it's too late. Spacing budget data away from delivery is a huge operational blindspot.”
Competitive Landscape Breakdown
Asana / Jira
Database-heavy overhead, lacks native financial budget alignment.
Monday.com
High visual clutter, struggles with strict mobile task density.
Linear
Excellent developer focus, but lacks integrated client-facing budget metrics.
ClickUp
Feature fatigue; navigation complexity hampers flow state.
03 / Art Direction
Creative Trajectories & Theme Specs
Midnight Focus
SelectedImmersive, quiet, and premium. Deep slate backgrounds eliminate daytime distractions, allowing focus elements to pop cleanly.
- #1e1b4b
- #7c3aed
- #0f172a
- #f8fafc
Ocean Clarity
Fresh, breezy, and highly reliable. Utilizing rich teal and ocean cyan accents over crisp, breathing light sheets.
- #0f766e
- #06b6d4
- #ecfdf5
- #ffffff
Sunrise Energy
Warm, highly motivational, and vibrant. Designed to inspire early action with soft peach and burnt orange tones.
- #1c1917
- #f97316
- #fff7ed
- #fdfdfd
Midnight Focus won the direction review: its deep indigo canvas lets focus elements carry the interface while keeping the overall tone quiet, premium, and operator-first — and it anchors every screen that follows.
04 / Wireframing & Evolution
From Lo-Fi Structures to Pixel-Perfect UX
Phase 1: Stripped-Down Wireframes (Lo-Fi)
Phase 2: Midnight Shadow Theme Evolution (Hi-Fi)
The grayscale pass locked in information architecture and navigation density; the hi-fi pass then applied the Midnight Focus palette, proving the focus-accent hierarchy holds across every core flow before a single pixel was polished.
05 / Design Foundation
Design System Spec Sheet
Palette Architecture
- Primary Dark#1E1B4B
- Midnight Medium#312E81
- Focus Accent#7C3AED
- Accent Light#A78BFA
Typography Hierarchy
H1 / Outfit Black
Plan. Track. Ship.
H2 / Outfit ExtraBold
Focused workspaces
Body / Geist 16
Streamline your project workflow in a single distraction-free framework.
Core Component Widgets
Button / Primary
Primary Action Trigger
Button / Secondary
Secondary Action Trigger
Input / Workspace Address
my-workspace.flowdeck.com
06 / Portfolio Directory
High-Fidelity Interface Screens
Experience the interactive layout architecture in beautiful high-fidelity rendering.
Plan. Track. Ship.
GET STARTED
Welcome back
Your workspace at a glance
Q3 Launch Plan
68% complete
Define sprint templates
DoneReview roadmap draft
TodaySeptember 2024
3 events this week
Sprint 24
To Do
Audit onboarding
Draft API spec
In Progress
Budget widget
Done
Sprint retro
Task detail
Define sprint templates
In ProgressStandardize the sprint kickoff structure so every product squad starts from the same focused baseline.
Core product team
Assignees
Due date
Sep 18
Q3 Budget
$48,250
Design
$18,000
Engineering
$22,750
Research
$7,500
Budget line items
Design
$18,000
Engineering
$22,750
Research
$7,500
Contractors
$12,400
OverOver-budget rows surface immediately — no spreadsheet archaeology required.
Team directory
Product Manager
Core squad · Full-time
Engineering Lead
Core squad · Full-time
Product Designer
Core squad · Full-time
UX Researcher
Core squad · Full-time
Velocity
+24%
Sprint throughput, last 6 weeks
On track for the Q3 ship date
07 / Verified Outcomes
Operational Impact & Metrics
Illustrative projected impact — conceptual project, not measured data.
34%
Target: faster task completion
Consolidated views are designed to help teams move tasks through columns significantly faster.
60%
Target: fewer context switches
Combining scheduling, pipelines, and finance inside a singular workspace is designed to reduce app-switching.
87/100
Target: usability goal
Aspirational system usability benchmark for the concept, based on comparable SaaS tools.
“Flowdeck is the first tool that made our roadmap, sprint board, and budget feel like one conversation. We stopped managing tools and started shipping again.”
Illustrative target user sentiment, not an actual review or testimonial
Self-initiated conceptual project. 'Flowdeck' is a fictional product created for portfolio demonstration purposes. Product names mentioned for competitive comparison are trademarks of their respective owners.
