Counter

A pricing tool that shows creative students what a freelance offer really pays per hour.

Try Counter

// ROLE

Product Design

// TYPE

UI/UX, Data Visualization

// INDUSTRY

Fintech

// YEAR

2026

// DURATION

3 Weeks

counter
Projects0
New calculation
Save as project
What does this job
really pay?
Count all the work, see what an offer really pays per hour, then set your price or change the work.
Example numbers. Change them to match your project.
01.The job
Graphic design
Illustration
Photography
Motion
Menu
Logo
Social posts
Poster or flyer
Website
Custom
Pages
−
2
+
Rounds of changes
−
2
+
Pages and rounds are the work you promise. Change them and the hours below change too.
02.The work
Example hours. Change any to match how you work.
Production0 hrs
Communication0 hrs
Revisions0 hrs
Delivery0 hrs
Concepts and sketches
0hrs
Layout, per page
0hrs
Fewer pages may not save time if the same content still has to fit. If so, raise this number.
Emails, calls, and meetingsusually forgotten
0hrs
Hours per round of changesusually forgotten
0hrs
Print setup and exportusually forgotten
0hrs
Counter estimates from the numbers you enter. It isn't a market rate or financial advice.
Your work so far
0hrs
6h
1.5h
3h
1h
03.Your numbers
Target hourly rate
Project expenses
$25/hr
$20
Example rate. Change it to yours.
Money you spend on this job, like fonts, stock photos, or printed proofs.
04.Their offer
Did they offer an amount?
Yes
Not yet
Amount they offered
$200
Check the offer
0 hrs of work for $200
This offer pays
Menu · 2 pages · 2 rounds
for 11.5 hours of real work. That's $7.61 an hour under your $25 target.
$
0.00
/hr
Your estimate
$310
More than they offered
$110
Hours the offer pays for
7.2of 11.5 hrs
After expenses
$15.65/hr
Where your 11.5 hours go
5.5 hrs usually forgotten
$200 runs out at 7.2 hrs
6hrs
Production
1.5hrs
Communication
3hrs
Revisions
1hr
Delivery
paid by the offerunpaid
4.3 hours go unpaid, and 5.5 hours are work outside production.
Your rate drops as hours grow
After your $20 in expenses, $200 spread over more hours pays less per hour.
After expenses, the offer pays $15.65 an hour for 11.5 hours. It pays your $25 target or more only up to 7.2 hrs.
counter
Projects0
Share
New calculation
Save as project
Edit details
Pages−2+
Rounds−2+
Offer $200
Target $25/hr
counter
count every hour.

// PROBLEM

Students judge an offer by its total, not the hours behind it.

// SOLUTION

Counter counts every hour, including the ones people forget, and shows what an offer really pays.

// RESULT

8 of 10 design students raised their quote after seeing the real hours. Counter scored 100 on all 4 Lighthouse audits, meets WCAG AA, and runs 169 automated tests.

// PROBLEM AND RESEARCH

The emails, revisions, and file prep never get counted.

Design students take flat-fee jobs for restaurants, artists, and photo shoots. The total sounds fair, so nobody adds up the hours behind it.

I started with classmates, then checked the tools they already use.

01 · In person

Classmates at Ringling

How design students price and accept jobs.

02 · Competitor Review

Existing pricing calculators

Text-heavy, assume you know your rate, and end at one price.

03 · Framing

Audience and contexts

Three user contexts set the limits for every screen.

04 · Audits

Accessibility tests

Five peer audits on mobile and keyboard-only. I logged and fixed every issue.

// One example, used throughout: a 2-page menu

$200

$200

$200

What the client offered

11.5 hrs

11.5 hrs

11.5 hrs

Hours it really takes

5.5 hrs

5.5 hrs

5.5 hrs

Hours people usually forget

$17.39/hr

$17.39/hr

$17.39/hr

What it really pays, against a $25 target

// WHAT I LEARNED

48%

48%

48%

The money is lost in the forgotten hours.

That’s communication, revisions, and delivery on the menu job.

2 ways in

2 ways in

2 ways in

Not every job starts with an offer.

A client asks what they charge, or names a budget. One flow handles both.

$7.61 short

$7.61 short

$7.61 short

A rate means little on its own.

It needs your target beside it, and a way to close the gap.

Assumptions: job hours are Counter’s example numbers, labeled as examples on screen. The $25 target is an example rate users replace with their own.

// DESIGNED FOR THREE REAL SITUATIONS

Ideal

At a laptop with the client’s email open

Share link, Save image, Projects dashboard

Budget

Old laptop, no admin rights, spotty wifi

Nothing to install, no account, fonts stored with the site

Chaotic

On a phone between classes, 17 tabs open

Autosave, one-taps, a bottom bar with the answer

// KEY DECISIONS

01

One flow, offer optional

Answers “what should I charge” and “is this fair” without two modes.

02

Cut what I couldn’t defend

A 20% add-on and a “fair price range” came out. No basis I could explain.

03

Change the work, not just the price

Pages and rounds stay live on the result.

// DESIGN SOLUTION

// 01

Count the work

Hours come in four groups. The forgotten ones are labeled and striped, and a live total updates as you type.

// 02

The answer first

The button’s sunset circle grows into the result, and the rate counts up.

// 03 · Try it: charts that explain the number

Both charts tell the same story: the money runs out at 7.2 hours.

// Where the 11.5 hrs go
4.3 hrsunpaid
of 11.5 hrs of work. $200 pays your $25 target for 7.2 of them.
$200 − $20 = $180
$180 ÷ $25/hr = 7.2 hrs paid
11.5 − 7.2 = 4.3 hrs unpaid
  • paid by the offer
  • unpaid

4.3 hrs go unpaid, and 5.5 hrs are work outside production.

  • Production: 6 hrs, all paid
  • Communication: 1.5 hrs, 1.2 paid, 0.3 unpaid
  • Revisions: 3 hrs, all unpaid
  • Delivery: 1 hr, all unpaid
// Same $200 offer, after $20 in expenses
$15.65/hr
for 11.5 hours of work, $9.35 under your $25 target.
$200 − $20 = $180, ÷ 11.5 hrs
Before expenses: $17.39/hr
To pay your target: $307.50

// 04

Ways to close the gap

Three options on the same hours scale: raise the price, trade a round of changes, or take their $200 for less work.

// 05

Same chart, two audiences

The image for the client keeps the chart and changes the words.

// 06

Your pricing so far

One offer is a decision. Saved offers become a pattern.

Projects turns every saved job into a dashboard of how you price. Each card answers one question, and each chart can switch to a table.

// On a phone, the waterfall reads top to bottom

// Cards stack in the same order

// 07

Brand and motion

Quiet grays and ink, with one sunset gradient that always means the answer. Motion plays once, then gets out of the way.

01   LogoBuilt on one unit, X
counter
X = mark = t heightGap = X/4Clear space = X/2Grid = X
02   Primary typefaceGeist, three weights
$17.39/hr
$ at 32%,
raisedGeist 300
tracking -0.06emUnit in
Geist Mono
Aa300  Numbers, headings
Aa400  Body, labels
Aa500  Emphasis
03   Secondary typefaceGeist Mono, for data
Geist
Mono
Units, chart labels, and notes. Numbers roll like a counter, then settle.
What the offer pays
04   ColorEach color has one job
Paper
Hex
↓
#F7F7F5Role
↓
Page
Sunset
Role
↓
The answer
Red
Hex
↓
#E8432ERole
↓
This job
Ink
Hex
↓
#161616Role
↓
Text

// TRUST AND ACCURACY

A pricing tool only works if people believe the number.

$307.50 → $310

Exact math, shown

Full precision, rounded up to $5 only at the end.

$17.39 · $15.65

Two rates, clearly labeled

Before and after expenses. Neither called take-home pay.

Example numbers

No invented benchmarks

No fake market rates. Not financial advice.

// RESULTS

100

All 4 Lighthouse audits

AA

WCAG contrast, keyboard, screen readers

169

Automated tests, run on every push

8/10

Raised their quote after seeing the hours

// TAKEAWAYS

01

Honest beats impressive

In finance, a number people can’t trust does more harm than a missing feature.

02

Let the insight drive the visual

The hours chart is built around one moment: the paid fill stopping short.

03

A precise spec is design work

Directing an AI build worked because every rule was written down.

// MY ROLE, SKILLS, TEAM

My Role

Product Strategy
UX and UI Design
Data Visualization
Brand and Motion
Build Direction with Claude Code

Skills

Financial Data Visualization
Design Systems
Interaction Design
Technical Specs and QA
Accessibility (WCAG AA)

Tools

Figma
HTML, CSS, JavaScript
Claude Code
WebStorm
GitHub Pages

Team

Kayla Tang (Solo Project)

Next Project

Back to Work

// SAY HELLO

Let’s Connect

Have a project in mind, a question, or just want to say hello? I’d love to hear from you!

EMAIL

itskaylatang@gmail.com

ELSEWHERE

LinkedIn