WorkPath — UX Case Study 03

01 — Problem

Freelancers are
drowning in
scattered tools

Managing clients in spreadsheets, tracking invoices in email threads — the workflow was fragmented and exhausting.

📋

No single source of truth

Client data scattered across spreadsheets, notes apps, and email inboxes with zero consolidation.

💸

Invoice tracking is manual chaos

Freelancers manually calculated earnings and lost track of pending vs received payments.

⏳

Zero deadline visibility

Project deadlines lived only in their heads — no visual calendar or timeline view.

"I have 12 browser tabs open at all times just to stay on top of my clients and invoices. It's unsustainable."

— Priya, Freelance UI Designer · 4 years

"I once forgot to invoice a client for three months because the project details were buried in my email."

— Marcus, Freelance Developer · 6 years

"I need something that shows me exactly where every project stands without me having to go digging."

— Zara, Brand Strategist · 2 years freelancing

02 — Research

Understanding the
freelance reality

We spoke to 73 freelancers across disciplines — designers, developers, copywriters — to map their real workflows and frustrations.

68%

Use spreadsheets as primary tool

Despite hating it — spreadsheets remain the default because nothing purpose-built feels right.

81%

Have missed or delayed an invoice

The manual nature of invoicing means it gets deprioritized when project work gets busy.

3.4×

More time on admin vs 2 years ago

As freelancers grow their clientbase, admin overhead multiplies disproportionately.

Research Methods

Mixed-methods approach for both quantitative patterns and qualitative depth.

1:1 User Interviews

Diary Studies

Online Survey (n=73)

Competitive Analysis

Workflow Shadowing

Affinity Mapping

Key Insights

Three core themes emerged consistently from all research sessions.

Insight 01

Freelancers value speed over features. A glanceable dashboard beats a powerful tool they need to learn.

Insight 02

The "money picture" — total earning, pending, completed — needs to be the very first thing they see.

Insight 03

Client context is critical. They need to know who a project belongs to instantly, without clicking into it.

03 — User Personas

Two distinct
archetypes

Built from interview synthesis — these personas guided every design decision.

🧑‍💻

Prithviraja — "The Hustler"

Freelance UI/UX Designer · 3 years

Solo Freelancer

Goals

See all active projects and their status in one glance

Never miss an invoice or payment deadline

Build a professional impression with clients

Frustrations

Too many apps to switch between — breaks flow

No clear view of monthly earnings vs projected

👩‍🎨

Aanya — "The Scaler"

Brand Strategist & Consultant · 6 years

Growing Studio

Goals

Manage 10+ clients with clear separation

Track team-assigned projects with deadlines

Generate reports for business decisions

Frustrations

Spreadsheets break when managing at scale

Cannot see the revenue pipeline clearly

04 — Design Principles

Designed for
clarity first

Six principles that shaped every layout, hierarchy and interaction decision.

Glanceability

Critical info must be readable in under 3 seconds from the dashboard without scrolling.

Calm Density

Show enough data to be useful without cognitive overload — dense but never noisy.

Status at a Glance

Every project communicates its status through color alone, without requiring text reading.

Frictionless Entry

Adding a client or project requires minimum fields. Operational within 60 seconds.

Dark-First Comfort

Freelancers work late. Dark theme reduces eye strain and makes financial data pop.

Progressive Disclosure

Details on demand — summaries up top, context on drill-down. Never everything at once.

05 — Key Screens

Designed with intent

Every screen solves a specific job-to-be-done. Here's the thinking behind each one.

Screen 01

Overview Dashboard

The command center. Answers four questions every freelancer asks every morning — active projects, pending payment, pending review, completed count — all visible above the fold.

4 KPI cards always visible above the fold

Earnings donut chart with project breakdown

Project deadlines area chart with weekly trend

Years / Months / Days time filter toggle

workpath.app/overview

workpath.app/projects

Screen 02

Projects — Card View

Cover images let freelancers visually identify projects instantly. Status chips provide immediate context. Two views for two mental models — grid for visual thinkers, list for analytical ones.

Toggle between card grid and list table

Cover image for instant visual recognition

Status badges: Not Started / In Progress / Completed

Client name attributed on every card

Screen 03

Clients List & Management

A clean data table view with full-text search. Clients are the foundation — every project and invoice traces back here. Inline Edit/Delete keeps management friction-free.

Full-text search across all client fields

Sortable columns with pagination (10/page)

Inline Edit / Delete — no page navigation needed

Add New client with one click from header

workpath.app/clients

06 — All Screens

Complete screen library

Every designed screen — from login to empty states — in one walkthrough.

1 / 10

Screen 01 · Login

Welcome Back — Login Page

Split-screen layout with the login form on the left and a branded community panel on the right. Social login via Google reduces friction for new users.

AuthenticationOnboardingSplit Layout

workpath.app/login

Screen 02 · Overview

Dashboard Overview

The nerve center. 4 KPI cards, earnings donut chart, project deadline graph, and a quick-access client list all visible without scrolling.

DashboardAnalyticsKPI Cards

workpath.app/overview

Screen 03 · Projects

Projects — Card Grid View

Cover images create visual anchors for each project. Status badges communicate progress instantly. Grid layout works for visual thinkers who manage by feel.

Card GridVisual BrowseStatus Badges

workpath.app/projects

Screen 04 · Projects

Projects — List View

For analytical freelancers managing by data. Sortable columns, amount and status at a glance, with full pagination support for large project libraries.

List TableSort & FilterPagination

workpath.app/projects?view=list

Screen 05 · Empty State

Projects — Empty State

Empty states are a first impression for new users. The UFO illustration adds personality while the CTA guides users to take the first meaningful action.

Empty StateOnboardingIllustration

workpath.app/projects

Screen 06 · Clients

Clients List

A clean data table with search, 1000-record pagination, and inline Edit/Delete actions. Clients are the root entity — every project and invoice links back here.

Data TableSearchPagination

workpath.app/clients

Screen 07 · Add Client

Add New Client

Minimal form — only the essential fields required to get started. Name, email, phone, location and a profile image. Save with one click, no overwhelming onboarding.

Form DesignData EntryMinimal Fields

workpath.app/clients/add

Screen 08 · Add Project

Add New Project

Linked directly to a client via dropdown — the project form pre-fills context and keeps the relationship intact from creation. Price and duration set expectations upfront.

Form DesignClient LinkCover Image

workpath.app/projects/add

Screen 09 · Invoice

Invoice Dashboard

Total Earning and Total Pending are shown prominently. A dual-line chart shows received vs pending over time. Transactions table with Received/Due tabs and download action.

Financial ViewLine ChartTransactions

workpath.app/invoices

Screen 10 · Empty State

Invoice — Empty State

The UFO illustration is a consistent design motif used across all empty states, reinforcing brand personality. The CTA links directly to project creation — the prerequisite action.

Empty StateBrand MotifClear CTA

workpath.app/invoices

08 — Outcomes

Results that
speak for themselves

Usability testing with 24 participants across 3 rounds of iteration.

↑

42%

Task Completion Rate

Users completed key tasks — adding a client, creating a project, invoicing — 42% faster than baseline tools.

↑

4.8★

User Satisfaction Score

Post-testing survey averaged 4.8/5 for ease of use and visual clarity across all tested user groups.

↓

67%

Reduction in Tool Switching

Participants needed to switch to external apps 67% less compared to their current scattered workflow.

↑

91%

Would Switch to WorkPath

91% of testers said they would adopt WorkPath as their primary project management tool if it launched.

↓

2.1s

Time to Key Insight

Average time to locate total earnings and pending invoices — down from 45 seconds with spreadsheets.

↑

3×

Faster Invoice Creation

With project-linked invoices and pre-filled client data, generating a new invoice takes under 90 seconds.

09 — Reflection

What I learned

Every project teaches something new. Here are the most significant takeaways.

🎯

Design for the job, not the feature

Users don't want a "dashboard" — they want to know if they'll make rent this month. Framing every screen around a specific job-to-be-done kept the design purposeful and avoided feature bloat.

🌑

Dark mode isn't just aesthetic

Freelancers working at night cited eye strain as a core problem. The dark theme with green accent wasn't a stylistic whim — it was a direct research-backed decision.

🔄

Two views serve two mental models

Offering both card grid and list table for projects resolved a key tension — visual thinkers vs analytical ones. Both deserve support without compromise.

📊

Numbers need design love too

Using Instrument Serif for large numbers made earnings data feel significant and real — not like a spreadsheet export. Typography is data design.

WorkPathDashboard

Freelancers aredrowning inscattered tools

No single source of truth

Invoice tracking is manual chaos

Zero deadline visibility

Understanding thefreelance reality

Use spreadsheets as primary tool

Have missed or delayed an invoice

More time on admin vs 2 years ago

Research Methods

Key Insights

Two distinctarchetypes

Prithviraja — "The Hustler"

Goals

Frustrations

Aanya — "The Scaler"

Goals

Frustrations

Designed forclarity first

Glanceability

Calm Density

Status at a Glance

Frictionless Entry

Dark-First Comfort

Progressive Disclosure

Designed with intent

Overview Dashboard

Projects — Card View

Clients List & Management

Complete screen library

Welcome Back — Login Page

Dashboard Overview

Projects — Card Grid View

Projects — List View

Projects — Empty State

Clients List

Add New Client

Add New Project

Invoice Dashboard

Invoice — Empty State

Built on a consistent foundation

Color Palette

Typography

Components

Spacing Scale

Border Radius

Results thatspeak for themselves

What I learned

Design for the job, not the feature

Dark mode isn't just aesthetic

Two views serve two mental models

Numbers need design love too

WorkPath
Dashboard

Freelancers are
drowning in
scattered tools

Understanding the
freelance reality

Two distinct
archetypes

Designed for
clarity first

Results that
speak for themselves