BlacktipSV

iZettle

Client work · 2011 · UX · UI · Visual design

Helping a Swedish fintech startup look the part while it invented mobile card payments in Europe.

Swedish startup iZettle is well known for enabling credit card payments. In 2011, when the company was just beginning its journey, I was contacted to help out with the UX and visual design of the public website and the logged‑in version where users can control their payments.

Context

A little black dongle, and a lot of ambition

Back in 2011, taking card payments meant heavy terminals, long contracts and fat monthly fees. iZettle turned a small black square and an iPhone into a complete point‑of‑sale — and they needed a website that could explain that quickly, clearly, and confidently.

I came in to help shape the UX and the visual design of the public marketing site and the logged‑in portal where merchants manage their account. The brief was simple in principle: make it feel solid, safe and inviting — a product a small café owner would trust with their takings at the end of the day.

The product

Hardware on a pedestal

The iZettle reader was the hero of every page. Clean product shots on neutral backgrounds, generous space around them, and a short, direct value proposition — “Ta betalt med kort, i din iPhone eller iPad”.

An early version of the front page
Iterations

Finding the right hero

The front page of iZettle.com later in the project — iPad‑first hero showing the product library, a compact feature list, reviews from WSJ/DN/HuffPo/Aftonbladet, and a Twitter wall for social proof.
Explain

A page that answers every question at once

The “Så fungerar det” (how it works) page had to cover everything in one scroll: who it’s for, card reader or not, social payments, security, and a realistic preview of the transaction dashboard. Tabs up top jumped to the right section.

“Så fungerar det” — a long explainer page with anchored tabs, icon‑led section headers, a big product family shot, and a realistic transaction‑list mockup so visitors could see what reporting looked like.
Wireframe and design

From sketch to finished page

On the left, the wireframe as it went into the project: boxes where the images would go, “Namn Namnsson” in the seller panel, and a yellow sticky explaining that the thumbnails are clickable. On the right, the same page finished.

Wireframe. The yellow sticky is a real spec note to the developer.
The finished design. The items in the list are made up.
Handover

How the design was specified

Before the site was coded, sheets like this one went to the front-end developer: a slice of the design with notes in blue about what is a rule and what may vary. Where the image origin sits, that images are saved with an alpha channel, that the text always starts at the same Y while the image width is cut to fit its own content.

A markup sheet for the developer. The notes in blue say what is fixed and what may flow.
Looking back

Old, but not that old

Looking back at the design now, it all seems quite familiar from today’s websites — but it’s still old. It’s mostly a matter of how you apply drop shadows, which typeface you use, and whether you reach for a border or not. It makes you think about the progress of interactive design, doesn’t it?

Working with the iZettle team was a highlight — listening to their thoughts and ideas, then realising them through design. They went on to become one of Sweden’s most talked‑about fintechs, and were eventually acquired by PayPal in 2018 for around $2.2B.

Side note

The one that got away

iZettle was actually my very first client under the Blacktip brand. About a month into the project I was invited to a meeting with founder Jacob De Geer, where he offered me a full‑time position at iZettle.