Mateus • Design
Amsterdam —

Yoco app

Everything was already in there. Nobody could find it.

Role
Design management, information architecture, research, product design
Year
2024

I led the redesign of Yoco’s back-office merchant app with an amazing team, rebuilding it around a new information architecture that brought mobile, tablet and web into one product structure and made existing features easier to discover.

Six months after launch, a merchant told us how much they liked the new stock control feature.

It wasn’t new. It had been there the whole time.

That was the problem we were trying to solve.

A hand holding a phone showing the Hub tab: today’s sales of R550.50 above a Make a sale button, a Yoco POS card, two empty featured widget slots, and the Hub, Sales, Money and Manage tab bar.
The Hub on three surfaces: a phone showing today’s sales and featured products, a tablet with sales, reports and a row of featured widgets, and the web app with the same Hub beside a Yoco side nav.

What it did

Over six months of gradual rollout:

21%

more first-time visits to features, per active merchant

15%

uplift in support CSAT on app-related tickets

The first number matters most. It means more merchants were opening parts of Yoco they had never used before, exactly what we set out to change.

Support CSAT on app-related tickets improved too. It’s a less direct measure of the redesign, but a useful signal that the product was becoming easier to navigate.

Portal

The Yoco app was a web app called Portal, and its navigation was a sidebar. Every new feature added another item; every new product, another entry point.

Thirteen by the end, with some features appearing twice.

A flat list doesn’t gain capacity as it grows, only length. Yoco had a lot more growth coming.

Yoco’s CPO and co-founder put it plainly: the IA was bloated, and it wouldn’t hold what the company wanted to build next.

Portal, the previous web product: a thirteen-item side nav running from Complete Setup and Dashboard down through Invoices, Capital and Legal, beside a dashboard of quick facts and a flat transactions chart.
Portal. Everything Yoco had ever shipped, in one column.
Portal’s Sales History page, with Sales and Refunds opened in the side nav to reveal Reports, History, Invoices and Payouts — while a separate Invoices item sits below it at the top level.
Thirteen items, and Invoices in two of them.

A hypothesis, then evidence

Yoco serves very different kinds of merchants, so we started with a semantic IA we thought could work across them all: Sales, Manage, Insights, Yoco Account, Profile, Settings.

Then Laura ran open and closed card sorts with merchants.

Merchants didn’t sort things by what they were. They sorted by how often they used them. Some features landed in different places depending on who was sorting; others paired with nothing at all.

Six proposed categories, twenty-six items, eight testers
Settings
  • Delete account
  • Get help
  • Reset password
  • Terms & conditions
  • Refer a friend
  • Buy card machines
  • Customers
  • Notifications
Profile
  • Business details
  • Capital
  • Staff
  • Refer a friend
  • Customers
  • Notifications
Sales
  • New sale
  • Invoices
  • Payment links & pages
  • Sales reports
  • Sales history
  • Transaction history
  • Make a payment
  • Yoco balance transaction history
  • Customers
Manage
  • Products & stock
  • Location(s) / store(s)
  • Payment gateway / plugins
  • My card machines
  • Capital
  • Buy card machines
  • Staff
  • Make a payment
  • Refer a friend
  • Customers
  • Notifications
Yoco account
  • Payouts
  • Log out
  • Capital
  • Terms & conditions
  • Buy card machines
  • Yoco balance transaction history
  • Refer a friend
  • Customers
  • Notifications
Insights
  • Yoco balance
  • Sales reports
  • Sales history
  • Staff
  • Transaction history
  • Yoco balance transaction history
  • Refer a friend
  • Customers
  • Notifications
The same item, filed in three places. Nobody was wrong.

There wasn’t one hierarchy everyone agreed on. That was the useful insight.

One home, many doors

The card sort showed that merchants didn’t agree on where things belonged. Where they looked depended on what they were trying to do.

So every feature got one semantic home, with links from wherever else it made sense. That helped us collapse six sections into four — Hub, Sales, Money and Manage — and drop Insights, which merchants found too vague.

Hyperlinks are a technology from the sixties. Why not have things being linked in different places?

Six early navigation prototypes as flat colour blocks, one colour per section: tabs for Personal Profile, Business profile and App settings above an empty Insights slot, then screens of balance and payouts, geo location settings, sales transaction details, today’s sales and history, personal profile, and app settings.
Prototyped as colour, while it was still six sections and not four.
The four sections on four phones: Hub with today’s sales, a featured card and invoice and product counts; Sales with the last seven days, payment link and invoice actions and recent activity; Money with the next payout, instant payout and Yoco Capital; and Manage with catalogues, stock levels and operations.
Hub, Sales, Money, Manage. Named the way merchants named them.

Where Reports landed

With Insights gone, Sales was the place for Reports, but Hub better matched how merchants used them. We anchored them there and linked from Sales.

Windows, not doors

Merchants rarely opened Yoco just to explore. They came with a task already in mind: check a payout, count stock, add a staff member.

So we made discovery part of the Hub. Widgets didn’t just link to features; they showed what was inside: today’s sales, low stock, top sellers. A merchant could notice something before they knew to look for it.

Six hand-drawn screens in blue marker, side by side: a grid of widgets with a ‘this is where you find’ callout, a card machine delivery tracker, a sell sheet, a celebration screen reading ‘now you can operate your business’, a day summary with a sales chart, and an account page.
Sketched first, so the wrong ideas cost an afternoon.

That’s how an existing feature like stock control could suddenly feel new.

The widget library: dozens of card variants for numbers, charts, lists, people and empty states, in light and tinted versions.
Every widget is a door and a window.

Exploring the edges

We explored a pull-up sheet, an assistant and a customisable Overview. Different ways to make more of the product visible without adding more navigation.

Four concept screens: today’s sales above a pulled-up sheet of labelled cards, the sheet expanded to full height, the sheet pulled down to reveal a Capital offer and a second offer on a dark background, and a Selling screen with Sell, Track and Manage tabs. Four concept screens showing a floating action bar whose chips change per screen — action and product, then Sell and Create QR, then Share and Refund — beside a smart assistant panel suggesting Sell, Create Qr and Pay Rob R10,000 above a keyboard. Three concept screens of an Overview tab: starred tiles for Sales, Payment links and Staff under a ‘Your tiles’ heading, the Manage tab beside it, and a dismissible card warning that a credit card is expiring soon.
Everything in one pull, with things worth discovering peeking through.

None survived intact. But pieces did: Dean’s themed tabs became the bottom bar, and favourites became the Featured row on Hub.

The system underneath

I was hired to build Yoco’s design system, but standardising a broken structure would only make the inconsistency neater. So we rebuilt the IA and YDS together.

Most components share the same structural baseline, which is why the app reads as one product rather than a collection of screens.

Consistent and considered, even over new and shiny was one of our principles. That’s what it cost: we didn’t get to make each screen special. By the way, Jo wrote them, collecting the team’s feedback and thoughts in a workshop.

POS and card machines kept their own component libraries, but share the same tokens and primitives. Same foundation, different constraints.

The same product catalogue on three Yoco devices: a countertop terminal, a handheld card machine and a tablet.
Same primitives, different constraints.

What we got wrong

We split Business and Personal Settings because we expected only one to grow, even though the research suggested merchants saw Profile, Account and Settings as one thing.

Personal Settings never grew. We were right, and it didn’t matter. Findability mattered more, and this was the one place people still got lost.

They’re one Settings now.

What held up

The brief was to build a structure that could absorb what came next.

Three years later, Yoco has added Savings Pockets, Bookings and Tables without changing the four sections. Things moved inside them, Settings merged, but the structure held.

Not everything did. We designed Search, piloted it, then shelved it. Discoverability and onboarding still need work.

The app is changing again now. The point was to make that possible without starting over.

Next project