Get in touch

Strategic SaaS for Independent Professionals · Design & Development Process

From question to
shipped product.

A step-by-step walkthrough of how Timvo went from a personal frustration to a fully functional SaaS — covering discovery, information architecture, wireframes, user flows, UI design, and the key UX decisions along the way.

01Discovery

Starting with
real frustration.

Before any wireframe was drawn, three questions drove the research: What does an independent professional actually lose when they underprice? What tools exist, and why do they fall short? Who specifically are we building for?

🔍

Competitive Audit

Mapped Toggl, Clockify, FreshBooks, Xero, Harvest, and ClickUp. None connected hours worked to profitability intelligence. Every tool either tracked time or tracked money — not the relationship between them.

🎙

User Interviews

Spoke with 8 independent designers, developers, and consultants. Common threads: "I invoice by feel," "I have no idea which clients are actually profitable," and "I spend an hour every week just writing invoice descriptions."

📐

Problem Framing

Defined the core insight: the gap between "I tracked X hours at $Y/hr" and "I actually made $Z/hr after everything" is where independent professionals lose the most money — and no tool addresses it.

👩‍💻

Maya Chen

Primary Persona

RoleIndependent brand designer, 4 years freelance
ToolsToggl (time), FreshBooks (invoices) — two separate apps, no connection
Pain"I quoted this project at $3,200. Now I think I made $18/hr on it."
GoalPrice confidently, know which clients to fire, spend less time on admin

Insight 01 — The invisible loss

Freelancers systematically underestimate time spent on "non-billable" work like emails, revisions, and admin. This means quoted rates are structurally too low — but there's no data to prove it or correct it.

Insight 02 — Invoice writing as friction

Writing professional invoice descriptions from messy time logs is a weekly chore that delays sending invoices — which delays getting paid. Even a 15-minute task delayed by 3 days costs cash flow.

Insight 03 — Retainer blindness

Retainer clients feel "safe" but are often the least profitable. Without allocation tracking, scope creep compounds silently for months before anyone notices the relationship has turned unprofitable.

Insight 04 — Willingness to pay is real

Freelancers readily pay for tools that save time or make them more money. A tool that reveals "you're undercharging by $20/hr" has an obvious, immediate ROI — making $12–22/month feel negligible.

02Information Architecture

Mapping the
app's skeleton.

Before any screens, the full structure of the app was mapped — every section, page, and action. The goal: a hierarchy that matches how a freelancer thinks about their work (clients → projects → time → invoices), not how a database is structured.

TIMVO — Application Structure v1.2

Timvo App
Dashboard
Rate Overview
Unbilled Balance
Weekly Heatmap
Recent Activity
Clients
Client List
Client Detail
Project List
Project Detail
Time Logs
Global Timer
Manual Entry
Log History
Billable Toggle
Invoices
Invoice List
Create Invoice
Invoice Preview
Send + Stripe
Reports
Revenue by Period
Revenue by Client
Rate Analysis
Profitability
Settings
Business Info
Services CRUD
Invoice Defaults
Billing + Auth

timvo-ia-v1.2.fig · Information Architecture · 6 primary sections · 24 sub-pages

03Lo-Fi Wireframes

Rough screens,
clear intent.

Lo-fi wireframes focused on layout hierarchy, content density, and navigation patterns — not visual design. Each key screen was sketched to answer: what's the most important thing on this page, and where does the eye go first?

WIREFRAME · PASS 1 · CORE SCREENS

01 — Dashboard

Priority: Rate + unbilled top. Heatmap inline.

02 — Time Logs

Table-first. Billable badges inline. Slide-over for entry.

03 — Create Invoice

3-step wizard: Client → Logs → Preview. AI toggle visible.

WIREFRAME · PASS 1 · SECONDARY SCREENS

04 — Client Detail Page

Client stats prominent top. Projects as cards below.

05 — Reports

Period toggle at top. Chart dominant. Client table below.

04User Flows

Mapping every
critical path.

Three core flows were mapped before writing a single component. These diagrams became the acceptance criteria for each development phase — if the flow was broken, the feature wasn't done.

FLOW 01 · TIME LOG TO INVOICE
Open App
Select Project
from global timer
Start Timer
Work happens
Stop Timer
log saved to DB
Billable?
Mark billable ✓
Go to Invoices
Create Invoice
select client + logs
AI Log Polisher
optional toggle
Preview PDF
Send via Resend
+ Stripe link
Invoice Paid ✓
FLOW 02 · NEW USER ONBOARDING
Visit timvo.work
Sign Up
email + password
Confirm Email
Business Setup
name, currency, rate
Add First Client
Add First Project
Start Timer
First Log ✓
FLOW 03 · CLIENT PORTAL INVITE
Freelancer
sends invoice
System sends
invite email
Client clicks
magic link
Has account?
View invoice
portal
Click Pay Now
Stripe Checkout
Payment processed
webhook fires
Status: Paid ✓
05Design System

Building the
visual language.

A minimal design system was established before building UI: colour tokens, type scale, and a core component set. The dark theme was chosen deliberately — financial dashboards feel more premium in dark mode, and it reduces visual fatigue during long work sessions.

Colour Tokens

--ui-side
--ui-bg
--ui-card
--ui-hover
--ember
--ember-light
--success
--text-primary
--text-muted

Design token naming follows CSS custom properties used in production

Type Scale

Cormorant Garamond
300 weight · Display Page Headings
Cormorant Garamond
300 italic · Emphasis Financial Callouts
Syne
400 weight · Body Labels, descriptions, navigation, and paragraph text throughout the interface
DM Mono
400 weight · Data $2,480.00 · INV-0042 · 14h 30m · 2025-03-01

Core Components

Design Paid Sent
06Hi-Fi UI Mockups

The interface,
fully realised.

From wireframe to production-ready UI. Each screen was designed and built directly in code — Figma was used for system planning, the browser was the final canvas.

timvo.work/dashboard
Timvo
timvo.work
Dashboard
Clients
Time Logs
Invoices
Reports
Account
Settings
Timer running Brand Identity — Kyla Penner 02:14:38
Dashboard
Monday, March 3 — Week 10
$3,840 unbilled
$68.40
Effective Rate / hr
↑ +$4.20 this month
124h
Hours this month
87% billable
$8,480
Revenue this month
↑ 22% vs last month
4
Active clients
2 open invoices
Top Clients by Revenue
KP
Kyla Penner$3,200
MA
Marlow Agency$2,840
TF
Tidal Foods$1,640
SB
Studio Birch$800
Rate by Project
Brand Identity
$88/hr
Web Design
$72/hr
Motion
$56/hr
Consulting
$46/hr
Activity Heatmap

timvo-ui-dashboard-v3.fig · Dark theme · Effective rate as primary KPI

timvo.work/invoices
Timvo
timvo.work
Dashboard
Clients
Time Logs
Invoices
Reports
Invoices
6 total · 2 outstanding · $5,080 owed
$12,640
Invoiced this year
$5,080
Outstanding
14 days
Avg payment time
# Client Date Amount Status
INV-006 Kyla Penner Mar 1, 2025 $3,200.00 Sent
INV-005 Marlow Agency Feb 22, 2025 $1,880.00 Sent
INV-004 Tidal Foods Feb 14, 2025 $1,640.00
INV-003 Studio Birch Feb 3, 2025 $800.00
INV-002 Kyla Penner Jan 18, 2025 $2,400.00

timvo-ui-invoices-v2.fig · Status badges + outstanding balance prominent

07Key UX Decisions

Why it works
the way it works.

Every non-obvious design choice has a reason. These are the seven decisions that most define Timvo's user experience — and what was rejected in favour of them.

UX / 01

Global persistent timer in the top bar

The timer needed to follow the user across every page — not live only on a "time tracking" page. Freelancers switch between checking invoices and actively tracking time constantly.

Rejected

Timer on its own dedicated page only

Chosen

Persistent timer bar at top of every screen, DB-persisted across sessions

UX / 02

Effective hourly rate as the primary KPI

Most time trackers show "hours logged." Timvo shows effective rate front-and-center — because that's the number that actually tells you whether you're running a healthy business.

Rejected

Hours this week as the hero stat

Chosen

Effective rate ($68/hr) as the first number — updated live as time is logged

UX / 03

AI Log Polisher as opt-in, not default

The AI feature that rewrites messy log descriptions into professional invoice language was designed as a toggle — not automatic. Users need to trust the output before they rely on it.

Rejected

Auto-rewrite all logs before invoicing

Chosen

Visible toggle in Create Invoice step — user controls when AI runs

UX / 04

Stripe link in email, not redirect from app

Clients should be able to pay from their email without needing a Timvo account or remembering to log back in. The friction of "go to this URL to pay" kills conversion.

Rejected

Pay button inside the client portal only

Chosen

Stripe Checkout link embedded directly in the invoice email

UX / 05

No freemium — limited trial instead

Freemium creates a parasitic user base that never converts and inflates support costs. A time-limited trial forces evaluation without creating permanent free users who expect features for nothing.

Rejected

Free tier with limited features forever

Chosen

30-day trial, full access, then $12–22/mo — no feature gating

UX / 06

Dark UI for the financial core

The app's dark theme isn't aesthetic preference — it reduces eye strain during long work sessions and creates a clear visual separation between "working environment" and the warm, light-toned marketing pages.

Rejected

Unified light theme matching marketing

Chosen

Dark app / light marketing — contextual clarity, not inconsistency

08Key Iterations

What changed
and why.

The first version is never the right version. These are the most significant design and UX pivots made across development — each one driven by using the product myself or early tester feedback.

Phase 1 → 2 · Navigation

Flat nav replaced by hierarchical sidebar

Original design had a top navigation bar. After adding Clients + Projects as nested entities, a sidebar became essential — it scales to more sections without collapsing, and keeps the main content area maximally wide for data-heavy views.

Phase 2 → 3 · Time entry

Dedicated timer page replaced by global timer bar

First implementation had time tracking on its own page. In daily use this was immediately frustrating — navigating away from the invoice page to start a timer, then back, then away again. The persistent top bar solved this completely without adding UI complexity.

Phase 3 → 4 · Invoice flow

Single-page invoice form replaced by 3-step wizard

Showing all invoice fields at once was overwhelming. Breaking it into Client → Select Logs → Preview reduced cognitive load and made the AI Log Polisher toggle feel natural — it belongs at the "polish before sending" step, not buried in a single form.

Phase 4 → 5 · Payment flow

Portal-only payment replaced by email-embedded Stripe link

Clients weren't logging into the portal to pay. They were waiting for an invoice, opening email, and wanting to click one button. Moving the Stripe Checkout link into the invoice email itself increased perceived professionalism and reduced payment friction to near-zero.

Phase 5 → 6 · Dashboard

Hours-first dashboard replaced by rate-first layout

The first dashboard version led with "hours logged this week." The redesign moved effective hourly rate to the primary stat position. The shift was philosophically aligned with Timvo's core positioning: the product isn't about working more hours, it's about making more per hour.

Phase 6 · AI Feature

Auto-rewrite replaced by explicit opt-in toggle

The AI Log Polisher originally ran automatically on every invoice. Early testers felt nervous sending AI-rewritten descriptions without reviewing them first. Making it a visible toggle built trust — users could see what it did before relying on it — and the feature adoption actually increased after the change.

Visit timvo.work Visit timvo.work