Yves Kwameh

What they had

The Car Guys had just bought the domain. There was no site.

The business does three different things and they are not versions of each other. You can buy or lease a new car, sell the car you already have, or hand back a lease early, and all of it happens without having to go to a dealership. Each one needs different information from a different kind of person, and each one ends in an application that a human has to read.

They brought me in to design and build all of it, the site and the applications. So it had to carry three services and take real applications the day it went live.

The waitlist

The real site was going to take a few more days and I did not want the domain sitting empty while we built it, so I designed a coming soon page and put it up straight away.

It asks five things: first name, last name, email, phone, and a message. I put the message box in because a name and an email says nothing about why somebody came. Someone who is mid-lease and wants out will say so there, and that is a lead the team can do something with. The three chips above it say what the business does, lease buyouts, auto brokering, no dealer markup, so a visitor can tell whether they are in the right place before they type anything.

I designed it at 1920, 1440 and 425, so it was responsive.

The wireframes

I wireframed every page in Figma first, in grey, with no photography and no brand colour. That is because a dark hero with a car in it makes almost any layout look good, and I wanted us arguing about the order of the sections, contents, and the length of the forms while they were still cheap to change.

Eleven layouts came out of that, seven for desktop and four for phones. I designed the application at this stage too, so how long it was became something we decided rather than something we found out at the end.

The site

I built it in Webflow from those wireframes. Four pages: the home page and one page for each service.

Every service page is the same shape. A headline that says what you can do, one button, then How It Works as three steps, then the form. Somebody who lands on Sell Your Car from a search gets the same structure as somebody who came through the home page, so the site only has to be learned once.

I wrote the FAQ answers from the service copy rather than making them up, so what the FAQ says matches what the pages above it say.

Tablet and phone

Responsive the whole way down, not just below one breakpoint.

The navigation collapses to a menu at tablet width. On a phone the three step rows stack, and the two column form fields become one column rather than shrinking to something too small to tap.

The application

This is where most of the work went.

The form we were working from was an existing application from another company in the same business, and it ran to 43 fields across three tabs. Eleven about the business, fifteen about the personal guarantor, and seventeen more about that guarantor’s employment, ending in a signature. It had no branching, so everyone answered all of it. A sole trader with no guarantor still filled in three tabs of guarantor questions, and a first tab that asks for a Tax ID is a strange thing to show somebody who just wants to lease a car.

So I split it into two. The individual form asks about a person, the business form asks about a business, and neither one shows the other’s questions. Each sits on a single page rather than being spread across tabs, so you can see how much is left.

The co-signer section moved behind a toggle, off by default. That is twenty one fields that only appear for the people who actually have a co-signer, and it is most of the difference between 43 and 22.

The whole page

This is the home page end to end at the size it was built, hero to footer.

Result

A business now fills 22 fields instead of 43, and a person fills 29 without ever seeing a question about a guarantor they do not have. The site is live at thecarguysinc.com and covers all three services, and the waitlist was up taking messages the whole time it was being built.

What they had

BOH Financial does accounting for creators, entertainers and the businesses around them, and they sell it as a subscription rather than by the hour.

The old site did not carry that. It was a services list, and a services list from an accounting firm reads much the same whoever wrote it.

They also sell to three groups who want different things: artists and performers, the agencies and managers who represent them, and founders running a small business. One page written for all three ends up written for none of them.

They brought me in to design and build the site.

The home page

The home page does one job. A headline that says who the firm is for, three cards for the three audiences, and a login for clients who already have an account. That is the whole page.

I kept it short on purpose. You already know whether you are an artist, an agency or a business owner, so the page lets you say which and then gets out of your way. The navigation works the same, the only content menu on it is Who We Help.

A page each

Each card opens a page written for that audience alone. The talent page leads with “For Artists, Musicians, Influencers, And Performers Managing Their Business”, and it keeps the photograph from the card you clicked, so you can see you landed where you aimed.

That is what going multi-page bought us. The talent page can talk about royalties and touring, the small business page can talk about payroll, and neither one makes you read the other.

Ten services, folded

Talent alone has ten services: bookkeeping, contract and royalty administration, tax compliance, payroll, cash flow, insurance, bill pay, wealth coordination, entity structuring, and advisory. Every one of them needs a paragraph to explain properly.

So I folded them into an accordion. Closed, each one is a single line, so the ten together answer what do you actually do inside one screen. Open, each gives its detail to the person who came for that one thing. Royalty administration matters to a musician and not at all to a restaurant, and neither should have to scroll past the other to reach their own.

Testimonials and pricing

The testimonials sit under the services rather than above them, because a quote is worth more once you know what is being sold. They are attributed by name and role, a musician, a production company, an actor, so you can find the one closest to yourself.

Then the prices, in the open. Three tiers for talent, named for where an artist is in their career rather than Basic, Pro and Premium, and each one includes everything in the tier below it.

BOH sell a monthly subscription, so the monthly price belongs on the page. Putting it behind an enquiry form would have made the rest of the page harder to believe.

The whole page

The home page end to end at the size it was built. There is not much to it, which is the whole idea.

Result

BOH now has a page for each of the three groups they sell to, each with its own services, its own proof and its own prices. A musician and a restaurant owner never see each other’s page. Their pitch is that they understand creators, and the site says so before anyone reads a word about accounting.

Why a desktop

There was no brief here and no client, so this one does not read like the others. It is my own site.

A portfolio that explains in paragraphs how I think about interfaces is asking to be taken on trust. I would rather the site be the thing itself, so a visitor can judge the work by using it.

The risk in that is obvious. An interface built to be admired is usually slow, and a slow portfolio makes the opposite point to the one I wanted. So the whole thing is built to one rule: nothing loads that you did not ask for.

The lock screen

It opens on a lock screen instead of a home page, and it asks one thing: whether you want sound. Nothing plays until you answer, and the answer is remembered for the rest of the visit. The voice clip is not even fetched unless you say yes.

The unlock button runs away from the cursor. It is a joke, and a joke needs a way out, so the button says “press Enter” from the start and a line offers it again a couple of seconds in. A first time visitor told me he nearly gave up on it, which is how I found out the way out only appeared if you kept chasing.

The desktop

Icons you can drag and rename, a dock, right click menus. The icons remember where you put them and what you called them until you clean up, which resets both.

Nine photographs from Port Harcourt live inside the Images icon in the dock. They fly out when it is pressed, scatter, and can be picked up and dropped back into it.

The windows

Every window is real HTML at build time, hidden with a class rather than fetched. Opening one costs no request. What is fetched on first open is that app’s behaviour, and only that app’s, so the desktop never carries code for a window you have not opened.

Work is laid out like System Settings, a rail of case studies beside one case study.

About is a bio beside a reel of photographs that loops without a seam.

Services is a set of grouped disclosures, so six offers read as a short list until one is opened.

Feedback scrolls client quotes past, and the game is a game of tic tac toe you are not meant to win.

On a phone

The same desktop rebuilt for touch rather than shrunk. The icons become a grid.

A window stops being a window and becomes a bottom sheet: it rises from the bottom edge over a scrim, covers the dock instead of sitting above it, and swipes down to dismiss. Dragging and resizing are off below 640, because there is nowhere on a phone to drag a window to.

What it weighs

The page arrives with 10,192 bytes of JavaScript against a budget of 10,240. A script in the repo measures it on every build, so the build is what tells me whether the rule still holds rather than my own judgement. Each app’s code is fetched the first time its window opens and not before, so the desktop only ever carries the desktop.

Almost everything on the page is there because something asked for it. No audio until the lock screen is answered, no fonts from anyone else’s server, and the one embed on the site, a Spotify playlist, is built the first time Control Center is opened and not a moment earlier. Every window is real HTML written at build time rather than fetched when you click.

There is one exception and it is worth naming on a page about not making people download things. Cloudflare injects an analytics script, thirty kilobytes of it, which is three times the JavaScript this site loads on its own. It counts page views, sets no cookies and writes nothing to your machine. I decided a few more kilobytes was worth knowing whether anyone visits, so it stays.

What they had

Altabrio were weeks from launching a training product, which is a bad moment to find out the navigation does not hold. Everything was built. What it needed was not more features, it was to make sense to somebody opening it for the first time.

A training product has a second difficulty. It produces a lot of data, and most of it means nothing on its own. A resting heart rate is just a number until it sits next to what it was last week.

They brought me in to sort the navigation out and rebuild the identity, with the launch date staying where it was.

The way in

The first thing anyone meets is the sign in, so it does the introducing. What the product is sits beside the form rather than on a page before it, so you do not have to read a pitch to reach your account, and if you arrived from an ad you still learn what you signed up for.

Setting up is part of the product

An adaptive training plan is worthless without the athlete’s own numbers in it, so the setup asks for them. I made it a sequence of short steps with a progress bar rather than one long form, because somebody who has just signed up has not yet decided this is worth twenty minutes.

The dashboard answers one question

The layout puts the few numbers that answer “how am I doing” in front, grouped rather than spread, and keeps everything else one move away instead of competing on the same screen. The greeting and the date are there because a training app gets opened daily, so the useful frame is today rather than all time.

One system, three more screens

The rest of the product is the calendar, the races and the vitals, and all three are the same components rearranged rather than three designs. A calendar of sessions, a table of races, a table of vitals: one sidebar, one header, one set of table styles, one way a row behaves.

That is what made the deadline survivable. Once the system was settled a new screen was an arrangement rather than a design, so the remaining weeks went on the screens that still needed thinking about.

Result

Navigation untangled, the identity rebuilt, and a product that went out on the date they already had, understandable to the people who signed up first.

What they had

Scroll House Studio makes cinematic property films for estate agents in South Florida. Drone footage, interior walkthroughs, colour grading, custom soundtracks.

That is a product you cannot judge from a description. An agent deciding whether to spend money on a film for a listing wants to see a film, and every second they spend reading about the films is a second the work is not playing.

They also did not need a big site. One studio, one service, one kind of buyer. They brought me in to design and build it.

One page

Everything sits on a single page, in the order the decision actually goes: see the work, understand what you get, ask for it.

The hero is footage rather than a headline over a stock photograph, so the first thing you judge is the thing you would be paying for. The explanation comes second, once there is something to explain, and it names the parts of the offer, property footage, drone cinematography, editing, AI artistry and custom-mixed soundtracks, because those are what you compare against another studio’s quote.

The portfolio

The films are the biggest thing on the page. Three vertical tiles, because vertical is the shape these are shot in and the shape they get watched in, and they start playing as soon as you reach them.

They play silent, with a sound button on each tile, so the page never makes noise at you before you ask for it and turning it on is one tap. Each tile carries a South Florida tag, which is the studio’s whole market.

Capabilities

This section answers two different questions at once. Twelve chips list what the studio can do, from drone cinematography to virtual staging to multi-platform delivery, which is the list you check against another quote. Beside them, three cards, Capture, Create and Deliver, say how a job actually runs.

Keeping both in one section means you can ask what can you do and what happens if I hire you without scrolling between two answers.

On a phone

Most of this gets looked at on a phone, often by someone standing in a property. The vertical tiles are already the right shape for that, so the grid becomes one column and nothing has to be re-cropped.

The whole page

One page means there is a whole page to show. This is it end to end at the size it was built, the films first and the asking last.

Result

A one page site where the films are playing before anyone is asked for anything, and the enquiry form sits on the same page as the work. Built in Webflow so the studio can swap the reel as the work changes without coming back to me.

What they had

A logistics app with two people in it who want opposite things. A sender wants a price, a pickup, and to know where their parcel is. A rider wants work, a route, and to get paid for it. Both were going into one product.

Build that the obvious way and you get an app full of screens half the users should never see. They brought me in to design the product, both sides of it.

Pick a side first

The screen straight after the splash asks which one you are, because almost nothing past that point is shared. Deciding it once, at the front, keeps the rest of the app from asking again on every screen, and it means neither side is ever told a feature is not for them.

Booking, in three short steps

Sending something is what a sender came to do, so it is the shortest path in the app. I split it into three screens rather than one long form: what you are sending, the details of it, then the vehicle.

Three short screens beat one long one here for a reason you can picture. Somebody booking a delivery is usually standing over the parcel with one hand free. A screen that asks four things can be answered standing up. A form that asks twenty cannot.

Each step ends in one button in the same place, so after the first time you can finish the flow without reading the screen.

The wallet

Payments live in a wallet rather than being attached to each delivery. A sender tops up once and stops thinking about it, and a rider sees what has come in and when. The transaction list is the same component for both, reading credits for one and earnings for the other.

Two dashboards, one system

From the account choice onward it is effectively two products, but they are built from the same parts: the same cards, the same list rows, the same buttons in the same positions. That is what makes a third screen an arrangement rather than a redesign.

The rider side is the same construction turned to a different job: work near you at the top, what is already booked in underneath, and the same rows and cards doing it.

Result

Both sides of the product designed end to end, a booking flow short enough to finish standing up, and a set of components underneath that Tem’s can add screens to without paying for a redesign each time.