Licenzo: quotes
Licenzo: product catalog

Research

Before anything was redesigned, the team listened to the people who use the platform every day.

15+

user interviews & demo calls

Focused on

  • User workflows
  • Pain points
  • Daily tasks
  • Existing processes

What we learned

Complex workflows

The process was difficult to follow.

Limited visibility

Important information was not easy to track.

Purchase Restrictions

Resellers couldn’t purchase licenses independently.

Reseller journey

  1. Find software
  2. Get price
  3. Create quote
  4. Place order
  5. Activate license

A reseller's three recurring jobs

Find

The right product, at a price worth selling.

Starts with
A customer's need
Decisions
Vendor, plan, billing term
Goes wrong when
The margin only shows up on the invoice

Quote

A proposal the customer can say yes to.

Starts with
A named customer
Decisions
Quantities and the customer's price
Goes wrong when
It expires without anyone following up

Look after

Licenses keep changing after the sale.

Starts with
An accepted quote
Decisions
Seats up or down, renew or cancel
Goes wrong when
A renewal date passes unnoticed

Three roles, one platform

Each role sells to the next one, and each needs its own view of the same catalog.

Who uses it

  1. 01Platform Provider

    Runs the platform, brings in vendors and sets the price resellers pay.

  2. 02Reseller

    Puts its brand on the platform, quotes companies and looks after their licenses.

  3. 03End Customer

    Sees what the company owns, the quotes it received and its orders.

The same license at each level

  1. Sells for€10.20Base price
  2. Sells for€11.70Keeps €1.50
  3. Pays€11.70Per seat, per month

The platform never shows one role another role's cost.

One catalog. A different price at every level.

Structure

The journey from the research, with a screen for every step. Each step hands its result to the next, so nothing is typed twice.

The reseller journey, mapped to screens

  1. Find softwareProducts
  2. Get priceProducts
  3. Create quoteQuotes
  4. Place orderOrders
  5. Activate licenseLicenses

Navigation

The sidebar is grouped by what the reseller came to do: check what needs attention, sell, or manage who they sell to.

Overview

What needs attention, and how it is going.

  1. Dashboard
  2. Reports
Sell

From a need to an active license.

  1. Products
  2. Quotes
  3. Orders
  4. Licenses
Manage

Who you sell to, at what price, and from whom.

  1. Companies
  2. Price lists
  3. Vendors

Three rules

Decisions that hold on every screen, whichever brand the platform is wearing.

  • 01The margin is never hidden.

    As soon as there is someone to sell to, every price shows the reseller's cost, that company's price and the margin between them.

  • 02Always buying for someone.

    The top bar always says who a purchase is for: your own company or one below you. The choice carries into a new quote.

  • 03Every option shows its price.

    Each way to buy a product is listed with its own price, so the options are compared before one is chosen, not after.

Design System

MUI was the starting point. Each component was then adapted to the platform: its colours, its density and the numbers it has to carry.

Foundations

Colour. Brand: Ink #000F0B, Surface Dark #032221, Primary #03624C, Primary Light #2CC295, Accent #00DF81, Background #F1F7F6. Roles: Text, Text muted, Surface, Border, Success, Info, Warning, Danger. Type, Geist: page title Semibold 32, drawer title Semibold 22, card title Semibold 20, body Regular 14, label Semibold 12. Spacing on a 4 px base, from 4 to 32. Avatars: a vendor's logo or lettermark, a user's initials or photo. Icons: Lucide, 2 px stroke.

Components

Buttons: contained, outlined and text, each in default, hover and disabled states. Inputs: search field, select in default and focused states, quantity stepper and price field. Selection and status: category chips, Popular and New tags, SKU and commitment chips, quote statuses, and a selected commitment row with its price. Navigation item on the dark sidebar: default, hover and selected, in the full sidebar and in the collapsed rail. Product card anatomy: 1 logo, 2 badge, 3 vendor and type, 4 product name, 5 SKU and commitment chips, 6 price and action.

Layout

Layout skeleton: at 1280 px and wider a 256 px sidebar with labels; from 1024 to 1279 px a 72 px icon rail. Top bar 64, content padding 32, card minimum width 320, grid gap 20.
Layout: full sidebar
SidebarEvery destination is named.
Layout: collapsed rail
RailIcons only, with the name in a tooltip. The button in the top bar switches between the two at any width.

Catalog

Categories, search and filters narrow the list. Every card answers the reseller's first question: what do I earn on this?

Catalog: grid view
Grid viewCategory chips show how many products match the current filters, so choosing one never leads to an empty page.
Catalog: list view
List viewThe same products as rows, for comparing prices down a column.
Catalog: product drawer
Product drawerCommitment, billing and quantity are chosen without leaving the catalog.
Detail: commitment and price
Commitment and priceEvery way to buy the product is a row with its own price, so all of them are compared before one is chosen.
Detail: choosing a quote
Add to quoteWhen the company has more than one open draft, the button opens a short menu: pick the quote the product goes into, or start a new one.

Quotes

A quote is a price proposal for one customer. The list is built to show which ones need attention today.

Quotes: list
Quote listFour numbers on top, then every quote with its value, margin and the date it stops being valid.
Quote: draft
DraftQuantities and customer prices are edited in place; the margin recalculates as they change.
Quote: sent
SentOnce sent, the quote locks. The actions change to what can happen next: accepted or declined.

White label

A reseller sets a name, a logo and one colour. The platform works out the other six colours and checks that text stays readable on them.

Settings: branding
One colour in, seven tokens outThe draft is previewed on a small piece of the platform. Nothing changes for customers until it is applied.
Detail: derived palette
Derived paletteEvery token keeps the hue of the chosen colour. Only lightness and saturation change, and each row says why.
Detail: readability checks
ReadabilityContrast is checked against WCAG AA, but shown in plain words: the real colour pairing and a verdict. A colour that is too light is darkened automatically.
Detail: logo check
Logo checkThe one thing the platform cannot fix by itself. It reads the uploaded image and says so when a dark logo would disappear on the sidebar.

The same screen under three brands

White label: Licenzo
LicenzoThe platform's own brand.
White label: indigo brand
NorthpointAn example reseller. One colour: #3D3BD1.
White label: amber brand
SolaraAnother reseller. One colour: #B4500C.