Freelance visual design for a seed-stage startup, 2023

Qube

Contract screens for an escrow tool between creators and businesses. I proposed a separate screen for each side; with no time to build two, we agreed on one screen that works for both.

I took the project because Qube wanted to connect creators and companies fairly. The team needed someone to turn their ideas into Figma designs rather than a researcher, so I designed the landing page and then the contract screens.

The Qube landing page shown as one long screen that unrolls from a laptop down a white step

My role: Freelance visual designerLanding page, contract screens, mobile layout
Client: QubeA web3 startup at seed stage
Tools: FigmaStatic screens handed to the team
Outcome: Built in a simpler formThe team shipped an easier version; the company later pivoted

Two people who each had to trust the other first

The business (client)
“I pay up front, and the work comes back poor, late, or not at all.”

The creator (freelancer)
“I deliver the work, and the payment is delayed, short, or never comes.”

Qube’s answer: the client pre-pays into an escrow smart contract. Both people can see the money, and it is released only when the client approves the submitted work. If they disagree, Kleros, a decentralised court, settles it. Sharing a link is enough to start, and neither side pays gas fees.

What I was given, and what I made

From the founders

The problem and the escrow flow, step by step
A dark theme in purple and magenta
The Nintendo GameCube on the landing page, because it inspired the name
Very little time: the product had to be tried out as fast as possible

My part

The landing page, for desktop and mobile
A visual language: the cube grid, glowing card edges, type and colour roles
A proposal for two contract screens, one for each side
The one-screen version we agreed on, at every step of the contract, about 20 states

One contract, two people, six steps

The contract passes between the two people like a baton: each filled step is whose turn it is, each dashed step is waiting. The pink band is how long the money sits in escrow.

A chart of the six contract steps for the freelancer and the client. Filled steps are that person’s turn; dashed steps are waiting. The client creates the contract, the freelancer signs, the client pre-pays into escrow, the freelancer submits the work, the client checks the work, then approves and pays, and the freelancer gets paid. A pink band marks the money held in escrow, visible to both.

Redrawn from the “How to” section I designed for the home page.

What I proposed: a screen for each side

The two people in a contract are not alike. Creators are designers and live in dark tools. Businesses want something calm that looks reliable and is quick to read. So I proposed two screens over the same contract, each in the colours of the person using it.

Two proposed contract screens side by side. The business view is white, blue and saffron: Website redesign, step 3 of 6, with a Pre-pay into escrow button. The creator view is dark with magenta: step 4 of 6, with a Submit your work button. Both are marked Proposed, not built.

For businesses: white, blue and saffron

Blue for the record of what is done, saffron only for the one thing to do now. Plain words, no glow.

For creators: the dark Qube palette

The palette the founders asked for, which also suits designers who spend their day in dark tools.

Redrawn for this case study from my proposal. The original sketches can replace these when found.

One screen, because there was no time for two

I proposed

Two screens over one contract, each designed for the person using it.

Engineering needed

One screen. As a startup they had to try the product out as fast as possible, and two screens meant twice the build.

We agreed

One shared card for both people. Whoever needs to act sees bright buttons, the other sees what they are waiting for, and a line says whose turn it is.

What one screen gives up: the business sees the creators’ dark, glowing style, which is the opposite of what I thought would make them feel safe.

The one-screen version, step by step

One card holds the whole contract. Each step is a button that lights up when it is that person’s turn and stays marked once it is done, so both people can read the history at a glance.

Four states of the one-card contract screen in the dark Qube style: Create Project, the contract with its step buttons, Submission with a file upload, and the finished contract marked Paid.

Step 1
Client creates the project and sets the reward and deadlines.
Step 2
Freelancer reads the terms and approves.
Step 4
Freelancer uploads the work with a note.
Step 6
Client approves; payment is marked as paid on both sides.

Saying whose turn it is

With both people on the same card, the screen has to say who it is talking to. I wrote “Time to take action for You”, with the gradient on “You”: whoever opens the screen knows it means them. The team wanted the role written out instead. I disagreed, because the person reading already knows who they are and does not need a label, but it was their call, so the final design names the role.

Two versions of the card heading. My version says “Time to take action for You”, which works for both people with no need to know the role names. The final design names the role.

The final design shown on two laptops, one for the client and one for the freelancer.

The final design, client and freelancer views.

The creator side: a dark room lit by a console

The founders asked for a dark screen in purple and magenta, and the GameCube on the landing page. I built it around a grid of cube outlines, cards with a soft magenta glow, and one bright colour kept for actions.

The colour palette. Night #0A040C, the page ground. Card #1B1B1B, every surface. Plum #613D5D, buttons waiting. Berry #BD2893, glow and borders. Magenta #E220CF, headlines and actions. Mauve #B4A1BB, quiet text. Lilac #F2E9F3, body text.

The landing page

The first thing they asked me for. One long page: the promise, why it is needed, four features, and the six steps.

Mobile: the same page in one column.

What happened next

What was built

My screens took longer to build than the team had, so they shipped an easier version for creators. Businesses were handled through a form instead. Later, Qube could not win the market against large agencies, and the company pivoted to marketing.

What I learned

I was hired to put ideas into Figma, not to research. I still argued for the people on each side of the contract, and when time won, I made one screen carry both. Next time I would ask for one session with real creators and businesses before drawing the first screen.

Two sides of a contract may need two screens. When there is time for only one, its job is to make it obvious whose turn it is.