Home › Projects › Afko: internal back-office

Afko: internal back-office

A back-office that shows the money first.

Afko grows and trades farm goods, and its numbers lived in people's heads and in spreadsheets. I designed its internal back-office: where managers check the money, and where one admin decides who gets to see it.

Client: Afko, agriculture and food
Role: Sole UI/UX designer
Scope: 6 screens and a filter drawer, desktop
Status: Shipped

The numbers lived in people's heads.

In farming, money moves in big lumps: a harvest is paid for one way and sold another, weeks apart. Those numbers were scattered across people and spreadsheets, with no safe way to share them.

A busy manager and a careful admin.

The manager opens the tool twice a week with one question: where does the money stand? The admin is an office manager, not an IT team, and hands out logins. Neither wants a tutorial.

Six numbers before any menu.

The dashboard opens on six figures: expenses, cash flow, profit, payables, receivables and budget. Shortcuts into the deeper areas come after. The tool is in Arabic, so the sidebar sat on the right from the first wireframe.

The role picker explains itself.

Most admin tools give you a bare dropdown: Admin, Editor, Viewer. Here, right under the role field, a short note says exactly what that role can do. The doubt comes while choosing, so the answer is right there.

Three choices for a tool opened twice a week.

Both users are busy, and neither wants a tutorial.

Summary before navigation

Six numbers answer 'where does the money stand?' before any menu. The shortcuts come after.

A dark background for bright numbers

Content sits on white cards over near-black navy, so the figures are the brightest thing on the screen.

Protect the table's width

An icon rail and a filter drawer leave the users table its full width. Export to Excel is a proper button.

What shipped.

6 screens: Shipped scope

Sign-in, a finance dashboard, and full add, edit, filter and delete for users and permissions.

20 tokens: Colour variables

Four scales defined in Figma, so a colour is picked from a list, not eyedropped.

What I owned

Sign-in and the finance dashboard
Users and permissions: add, edit, filter, delete
20 colour tokens in four scales
Desktop layout

Empty states, and a confirm before delete.

There was no research budget, so I wrote my assumptions down and designed to them. What I skipped: empty, loading and error states, which belonged in the first week, and a confirm step before deleting a user.