Plinth CRM

The problem

The CRM sits in a suite of business apps and covers leads, opportunities and contacts for sales teams. Every list, pipeline and record had to look and behave the same, and stay that way as more screens were added.

Features

• ·A documented colour system: six base colours in 10% steps, plus component, side-menu and top-menu colours
• ·Roboto type scale: headings H1 to H5, paragraphs and text links, each in medium, bold and regular
• ·Spacing scale from 2 to 24 px
• ·Buttons: normal, accent, compound, action and upload buttons with their states
• ·Tags in five tones, solid or light; tables built from 34 cell types and header components
• ·Navigation components: top and side menus, filter bar, breadcrumbs, tabs and pagination
• ·Date picker with quick ranges and a time range, a month calendar and a scheduling calendar table
• ·Simple and advanced dialog windows; advanced inputs with compound fields, switches and colour select

Approach

1. 01

   Foundations

   ProblemA CRM full of dense tables and statuses easily drifts into one-off colours and sizes.

   SolutionSet up Figma variables first: colours grouped by role (side menu, top menu, alerts, links, borders, backgrounds), a spacing scale from 2 to 24 px, and a Roboto type scale for headings, body and small text.

2. 02

   Components

   ProblemEvery screen repeats the same controls: actions, tabs, filters, pagination, table rows.

   SolutionBuilt the component library page by page: buttons, input fields, tags, avatars and tables (34 cell types and header components), then the complex pieces: a date picker with quick ranges and time ranges, calendars for scheduling, dialog windows, a filter bar and compound input fields, all reading from the variables.

3. 03

   Pipeline

   ProblemA plain list of leads doesn't show where the sales work stands.

   SolutionLeads and opportunities open on a row of chevron steps, each with its stage name, a count and its own colour. The active step turns white and filters the table below.

4. 04

   Status at a glance

   ProblemPeople scan the tables for where each lead came from.

   SolutionSource badges for Facebook, Instagram and online or offline ads reuse the link and alert colours at 80%, so one palette covers every status.

5. 05

   Navigation set

   ProblemEvery screen shares the same frame around its content.

   SolutionThe top menu bar, side menu bar, filter bar, breadcrumbs, tabs and pagination are components of their own, so lists, pipelines and records all sit in the same frame.