From ugly admin screens to a complete new design

Before

• Nine pastel cards, each with its own gradient.
• No chart. The trend lived in a table with three header groups.

After

• Key figures on one card style, each with a small chart and a change badge.
• A sales trend against the last period, with sales by brand beside it.

Before

• Every row carried two live dropdowns and four text buttons that wrapped onto two lines.
• Most filters hid behind Expand, and nothing said which were set.

After

• One search box, with filters as chips you can see and remove.
• Tier and status as quiet marks, and row actions as icons.
• Ticking rows opens a bar with the bulk actions.

Before

• Five tabs, each a long form. Settings were edited one tab at a time.
• Nothing showed what a change would do before saving.

After

• A config canvas: a context bar with a draft state, Discard and Save.
• A rate grid by outlet group and category, with changed cells marked.
• A live preview on a sample sale, and a list of changes to review.

Before

• A huge dialog with card tabs and a small left-labelled form for each reward.
• No way to see the reward card while editing it.

After

• Tabs with icons, and rewards as cards you can open.
• A live phone preview updates as you type.

Before

• Writing a task opened up to three dialogs in a chain, two of them with no title.
• A big text editor took most of the first dialog.

After

• One dialog with a three-step stepper: details, schedule, rewards and audience.
• Each step is split into titled sections, with a live summary beside it.

Before

• Status painted whole cells gold, blue, lime or red.
• Amounts were raw numbers, the reference was a plain link, and nothing sorted.

After

• Status as pills on one shared scale. Amounts with a sign and two decimals.
• Tabs with counts, a sortable time column and filters in one row.

Before

• The main action sat disabled above the table until a row was ticked.
• Note boxes stretched the rows tall, and the select-all box sat at the far right.

After

• Settle selected moves to the page header and shows the total.
• Amounts sit right-aligned in steppers, and ticked rows are highlighted.

Before

• No page title. Filters filled the top half of the screen.
• Two grey-blue total rows sat at the foot of the table.

After

• A page header with Export, and the filters on one line.
• A page subtotal, then a grand total that stays in view.

Before

• Four tabs, a dropdown in every row for Show, and a plain text Edit button.
• Every thumbnail sat on the same grey box.

After

• Seven tabs with icons, and a drop zone for new files.
• Thumbnails sit on a matching light or dark plate. Show is a switch, and actions are icons.

Before

• A split screen: a flat navy half with a stock picture, and a form floating on white.
• The product name showed as a raw build variable.

After

• A brand panel with the logo, a promise and two live figures.
• A calm form, with the theme and language switches in reach.