Pixelmuse - Contrast Company

Client
Contrast Company

Role
UI & UX

Year
2024

Complex CPQ and SaaS Quotation Platform

Contrast Company is one of Denmark’s leading suppliers of licensed, non-licensed, and private label textiles for the European market.

Following an extensive data cleanup process, Contrast Company needed a sales tool that would enable their team to edit existing customer quotes, create new ones, request missing products, and access historical purchase and sales data.

Equally important was the ability to add or edit a wide range of product attributes when creating product lines, as well as manage variants and other details.

My role

This was a highly complex project that required close collaboration with data specialists, back-end and front-end developers, and a project manager who coordinated the client’s many requirements. My focus was on ensuring the platform was both functional and intuitive—supporting a smooth sales process while handling large amounts of product and pricing data.

Impact

The solution provided Contrast Company’s sales team with a unified tool that streamlined quoting, improved accuracy, and ensured full access to historical pricing data. This not only made day-to-day sales processes more efficient but also strengthened the company’s ability to respond quickly and precisely to customer needs.

–

This project was created while I was a digital designer at Combine A/S.

Editing and Creating Product Lines

Product lines represent the individual items that make up a quote. Each line is based on a “style” (product) with a wide range of customizable attributes tailored to the customer’s needs. Lines can be grouped into assortments, where quantities, packaging, pricing, and locations are managed at a higher level. The goal was to enable sales reps to handle every aspect of quoting within a single system—replacing inefficient workflows across multiple platforms.

Sales reps also gained the ability to track won and lost quotes directly in the tool.

Light and Dark Mode

Built on design system variables in Figma, making it quick and simple to create multiple versions for prototyping and handoff to front-end developers.

Toolbar with access to
frequently used tools

Dropdowns with keyboard-
friendly input fields

Dropdowns with embedded
search and multi-select options

Modal windows for
advanced editing

Design System Based on Google Material Design 3

Behind the interface sits a carefully curated design system inspired by Google Material Design 3. This approach reduced the need to reinvent components and ensured efficiency in both Figma and front-end development. At the same time, all visual elements were customized to align with the client’s brand identity, and additional components were designed to extend beyond the default Material Design library.

—

Thank you for watching.

For feedback or work inquiry you're welcome to contact me.

You may also like