Back
Case Study · B2B SaaS · Retail Tech

Focalpay Back-office Dashboard

My Role
Product Designer
Company
Focalpay AB · 2023–2025
Platform
Web · Desktop
Team
Two designers, then sole designer
Methods
Interviews · Workshops · Data analysis · Usability testing

Redesigning how retailers reorder stock and set up weighted campaigns

Focalpay Back-office — dashboard on laptop and mobile in a grocery retail setting

The problem: Store managers only found out a product had run out when the shelf was empty, and ordering took seven manual steps. Weighted campaigns were calculated and typed in by hand.

What I did: Joined midway as one of two designers and owned two flows, Replenishment and Campaigns, plus the design system. Interviewed 6 managers from 6 customer businesses, analysed three months of real campaign data, and ran workshops and tests with 5 store managers.

Key decisions: Alerts grouped by urgency, one overview to act from, orders with supplier and cost filled in, and two ready-made weight templates after finding that 94% of weighted campaigns followed two patterns.

Result: Ordering went from seven steps to two, with 35% less operational friction. Campaign creation became 25% faster with 78% fewer errors. The redesign is live in several stores.

Part of the Focalpay platform: products and prices set up here power the Cashier POS and the Mobile shopping app.

The challenge

The Focalpay Back-office is where retailers manage everything the POS and the shopping app use: products, stock, prices and campaigns. Customers ranged from the footwear brand Icebug to supermarket chains like Matrebellerna and Matvärlden.

I joined the project midway as one of two designers. I owned two flows, Replenishment and Campaigns, and the design system. When my colleague moved on, I became the only designer on the team, working with the PM and engineering.

Both flows had the same problem: the system left the remembering, the checking and the maths to store managers.

Research

I interviewed 6 managers from 6 customer businesses, covering both flows. They did real tasks while thinking aloud, and I followed up with questions.

Replenishment

Managers had no warning before a product ran out. To prevent it, they checked their best-selling products one by one.

"Every time base prices change, I'm double-checking campaigns by hand."

4 of 6 managers reported inconsistencies between catalogue data and campaign rules.
Campaigns

Weighted campaigns were set up by hand. Discounts on products sold by weight had to be calculated and typed in, which managers described as slow and easy to get wrong.

The problem

01

No warning before stock ran out

Managers found out when the shelf was already empty.

02

Ordering by hand

Finding the supplier, working out quantity and cost, and writing the order email, every single time.

03

Campaigns done by hand

Discounts on products sold by weight were calculated and typed in manually.

An empty shelf is a terrible notification system.

Replenishment: from empty shelves to early warnings

Part 1 · Stock

Before, ordering stock took seven steps, and the first one was a surprise.

Before · 7 steps

  1. 1Notice a product is empty on the shelfNo warning
  2. 2Check the stock for that product
  3. 3Review other best-selling products one by one
  4. 4Find the supplier and their contact details
  5. 5Work out the quantity and cost
  6. 6Write and send the order email
  7. 7Keep track of the delivery manually

After · 2 steps

  1. 1

    Open the alert

    Out-of-stock products, grouped by urgency.

  2. 2

    Place the order

    Supplier, stock levels and cost already filled in.

Deliveries are then tracked in the app, and overdue orders flag themselves.

How I structured Replenishment

One overview, four clear paths, and notifications that point to each of them.

Notifications

Grouped by urgency

Replenishments overview

Four summary cards

Out of stock

Place order → Create order, emailed to the supplier

Setup needed

Set current, min and max stock inline

Incoming deliveries

Awaiting, with overdue warnings

Confirm receipt: full or partial, invoice and notes

Shelf refill

Products to restock on the shelf

Alerts that sort themselves by urgency

All notifications live on one page, grouped and colour-coded: red for products out of stock, yellow for overdue deliveries, blue for products that still need stock rules. Each group says in one plain sentence what needs doing.

Notifications page grouping alerts by urgency: 3 products out of stock, 1 overdue delivery, and 15 products needing replenishment setup.

Notifications grouped by urgency, each with one clear next step.

One overview to start from

The Replenishments page opens with four summary cards: Out of stock, Setup needed, Incoming deliveries and Shelf refill. Managers start from what needs them, not from a list of thousands of products.

Replenishments overview with four summary cards and a product table showing current, minimum and maximum stock and a status for each product.

Summary cards on top, every product's stock status below.

Stock rules, fixed in one place

Alerts only work if every product has a minimum and maximum stock. Products without them are collected in one list, where managers set current, min and max stock directly, in pieces or kilos, without opening each product.

Replenishment setup list where managers enter current, minimum and maximum stock for each product directly in the table.

Setting stock rules for 15 products from one screen.

Ordering without the paperwork

From the Out of stock list, one tap opens the order. Current, min and max stock and shelf amount sit at the top. The supplier's email fills in automatically, and the total cost is calculated from the latest in-cost. Managers can add a second order for another supplier, then send it by email straight from the app.

Out of stock list with three products and a Place order action on each row.

Out of stock: every product one tap away from an order.

Create order screen with stock levels at the top, supplier email filled in automatically, and the order sent to the supplier by email.

Stock levels up front, supplier and cost filled in.

"Moving stock level to the top sounds like a small thing. For us, it saves 20 minutes a day."

— Assistant Manager, Matvärlden

Deliveries as they really arrive

Orders don't always arrive on time or complete. Incoming deliveries shows how many days an order is overdue, and managers confirm each delivery as received or partially received, with the invoice and a note attached.

Incoming deliveries list with overdue orders marked by how many days late they are.

Overdue deliveries show how many days late they are.

Confirm receipt screen for marking a delivery as received or partially received, with an uploaded invoice and a note.

Confirming a partial delivery, with the invoice and a note.

Campaigns: from maths to templates

Part 2 · Weighted campaigns

Weighted campaigns, for products sold by weight like fruit or deli items, were set up by hand. Managers calculated each discount and typed it in.

The interviews told me this was painful, but not why. So I asked our supermarket customers for their last three months of campaign data and analysed it myself. 94% of weighted campaigns followed one of two patterns.

So instead of a form where every campaign meant doing the maths, I designed a three-step builder: About → Terms → Products. In Terms, managers choose a campaign type in plain words, including two ready-made weight templates. Each type shows only the fields it needs.

Add campaign step 1: campaign name and optional start and end dates.

Step 1: name the campaign; dates are optional.

Add campaign step 2: campaign type dropdown with Buy over X kg for Y SEK and Buy under X kg for Y SEK next to the regular campaign types.

Step 2: two weight templates, next to the regular campaign types.

TemplateTermsUse case
Template ABuy over X kg for Y SEKNear-expiry items · Bulk purchase
Template BBuy under X kg for Y SEKPremium deli · Small-portion buyers

Using the store's words

In one session, a manager wasn't sure what "Base unit price" meant. Other users with similar businesses agreed: their everyday words were clearer than field names from the database. So the builder speaks the way stores talk.

Nobody walks into a deli asking for the base unit price.

A live weight campaign called Fruits, with status Active, campaign type Less than 1 kg and its products.

A live weight campaign, in plain words.

Results

What changed for store teams

Replenishment

7 → 2

Steps to order stock

Ordering used to start with an empty shelf. Now it's two steps: open the alert, place the order.

35%

Less operational friction for store teams

Assessed in a workshop with the same 5 store managers, from prospective customers, who tested the campaign builder.

Campaigns

I gave 5 store managers the same campaign tasks in the old version and in the new one, and measured how long they took and how many errors they made.

Previous version
4m 20s

average task time · 3.6 errors per session · 2 of 5 would use it daily

✓ Redesigned version
3m 14s

average task time · 0.8 errors per session · 5 of 5 would use it daily

25%

Faster campaign creation

Average task time down from 4m 20s to 3m 14s.

78%

Fewer errors

From 3.6 to 0.8 errors per session.

"The campaign builder finally speaks our language."

— Store Manager, Icebug

Design system

Light and dark mode, and the main components

Dark mode

Back-office product detail UI in dark mode

Light mode

Back-office product detail UI in light mode

I built a design system with a light and a dark theme. Both share the same components, spacing and interactions; only the colours change, so store teams can choose what works in their lighting. Below: foundations, buttons, and inputs and forms.

Sheet 01 — Foundations · Colour, typography, spacing, radius
Design system foundations: brand and semantic colours, typography scale, spacing scale, border radius
Sheet 02 — Buttons · Primary, secondary, tertiary, states, sizes
Design system: button components — primary, secondary, tertiary, all states and sizes
Sheet 03 — Forms · Text input, checkbox, radio, keypad, pagination, tabs, breadcrumb
Design system: form inputs, checkboxes, radio, keypad, pagination, tabs, breadcrumb

Reflection

What I learned

01

Use the words your users use.

Part of what made the template builder work was the vocabulary. It used the words store managers already used every day. When an interface uses database names, it feels like a tool for the system. When it uses the words from people's jobs, it feels like a tool for them.

02

Data shows what interviews can't.

The interviews told me campaign creation was painful. Three months of campaign data showed me why, and what to build. Asking customers for their data took more effort than another workshop, but it turned a general complaint into a clear design decision.

03

Alerts beat checklists.

Managers shouldn't have to remember to check. When the system warns them early, they act before the shelf is empty.

04

Looking back

What I'd do differently.

I'd ask for the campaign data at the start, alongside the interviews, instead of after them. The data explained the problem much faster than another round of conversations could.

Back