SmartCow Design System

2022-24

SmartCow

Updates and changes to SmartCow Design System

Introduction

When I joined SmartCow in 2021, design was in its infancy within the company. There was one mid-level designer who handled everything from graphic design for our marketing team and website to product design for our software solutions.

A key part of my job description and responsibility was to implement more standardized ways of working in our design team, which included introducing a design system.

History of the Design System

The 1st draft (2021-22)

Initially, this was a daunting task for me. We had a variety of ongoing projects with various customers, as well as new projects on the horizon. Both the design and front-end teams were busy with client work, which meant introducing or even designing a substantial design system wasn't feasible. This led to the creation of a design guide used solely by the design team.

There were 4 fundamental elements to this design guide:

  1. Colours

  2. Typography

  3. Icons

  4. Basic Page Layouts/Patterns

We used this guide to maintain some consistency, but it was clearly limited. Throughout 2022, the design team accumulated a backlog of frequently used design elements and components. We gradually incorporated these into what became our first Design Language System. Additionally, our team expanded from 2 to 5 members, providing us with the necessary resources to develop a more comprehensive system.

SmartCow DLS Version 1 (2022-23)

Most of our products fell squarely into the B2B, enterprise space which meant that certain elements of the design system were more important than usual.

Our team decided to prioritise the follow aspects of our system:

  1. Expand the basics: typography, colours, icons, grid layouts

  2. Basic interactive elements: buttons, tags/badges, toggles, switches, checkboxes

  3. Advanced interactive elements: dropdowns, tooltips

  4. Data tables

  5. Naming conventions

SmartCow DLS Version 2 (2023-Present)

In the next iteration of our design system, the gaol was simple, to expand the system; introduce more elements, build a component library of common patterns and component blocks.

Here are the elements that we added in this stage:

  1. More interactive elements: accordions, button groups, date pickers, multiselect dropdowns

  2. Design patterns:

    a. Navigation: main top/side nav bars, nav tabs

    b. Pagination vs. endless scrolling

    c. Progress indicators

    d. Callouts & inline notifications

e. Empty states

  1. More data table elements

    1. Header bars with common actions & states

    b. Advanced row types

    c. Filters & Sorting components

  2. Modals

    1. Dialogs

    2. Warnings/notification pop-ups

    3. Toasts

SmartCow DLS Version 2.1 (Proposed Update)

Currently we are working on an update of our existing DLS. This update is focused more on accessibility and visual improvements rather than adding more design elements, patterns or components.

The key focus areas:

  1. Enhancing Usability through Design Improvements

    Streamlining Visual Elements:

    • Minimizing the use of shadows for a cleaner interface

    • Strategically reducing color fills, reserving them primarily for action buttons and status indicators

    • Simplifying layouts to improve focus and reduce cognitive load

  2. Increasing Accessibility Ratings

    1. Enhancing color contrast to improve readability and visual clarity

    2. Incorporating additional contextual cues through thoughtful use of icons and toast notifications

    3. Addition of keyboard shortcuts to enhance productivity and accessibility

      • Implementing standardized shortcuts for common actions across the system

  3. Facilitating Easier Integration with Client Branding

    1. Adopting a more versatile and neutral color palette to seamlessly blend with various client color schemes and design systems

    2. Creating flexible component structures that can easily adapt to different brand identities

    3. Providing clear guidelines for customization to maintain consistency while allowing for brand-specific adjustments

Examples of the updates

Examples of the updates

General Examples

General Examples

FleetTrackr

FleetTrackr

Sphinx

Sphinx

SmartPortal

SmartPortal

Thanks for reading, check out more of my work

Thanks for reading, check out more of my work

FleetTrackr

FleetTrackr

tldr

AIoT Device Management Platform

Web App

Product Design

Reach out and connect.

Interested to know more or think we could work together?

Reach out and connect.

Interested to know more or think we could work together?

Reach out and connect.

Interested to know more or think we could work together?