Quartile

Modernizing Quartile’s design system

Quartile is an AI advertising platform for e-commerce brands. It runs and optimizes their ads on Amazon and other marketplaces, and reports on what those ads bring in.

I modernized its design system, reorganized it in Figma and added a dark mode. Then I designed the screens below on top of it.

The data in these screens belongs to a fictional brand, Northpeak Home.

Enlarge image

Bringing the system up to date

When I joined, the design system had grown piece by piece over the years, and the product was starting to look dated next to the tools Quartile’s customers used every day. I brought it together into one organized Figma library with a refreshed visual style, so the same components and tokens built every screen.

Small components carry a lot of meaning in a reporting product. A trend badge has to say which way a number moved and whether that’s good news, and those aren’t the same thing.

Dark mode

With every colour coming from the system, dark mode became a second set of values rather than a second set of screens. The components stay the same; the theme decides what they look like.

Enlarge image

Listing optimization

Quartile can rewrite product titles and bullet points automatically. Brands choose which products to include and how aggressively, and approve every change before it reaches a listing.

Enlarge image

Campaigns

Campaign settings hold the targets the optimization works toward, like a target ACoS for each campaign, alongside tags, imports and keywords.

Enlarge image

Reporting and forecasts

Reports break performance down by channel and by day. The forecast projects sales and spend for the rest of the year, under the scenario a brand chooses.

Enlarge image

Enlarge image

Roles and permissions

Agencies and brands share accounts, so admins decide who can do what. A role bundles permissions, like letting a campaign manager change bids without touching billing.

Enlarge image

Enlarge image