UX and UI design for workforce management software

Design for professional SaaS platform

SaaS

UX Design

UI Design

CLIENTTriopsis
LOCATIONLondon, UK
TEAMUX designer, UI designer, interaction designer, project manager, product owner, researcher

This SaaS tool is used by utilities and road maintenance companies to efficiently schedule interventions, manage jobs and organise teams.

After developers worked for several years with a graphic designer to create the UI of the SaaS, they reached a point where frustration accumulated, and the expectations of potential new customers were not met.

They hired our UX agency to break free of the vicious cycle of fixing stuff without witnessing growth. They wanted a user interface design that could act as a selling point for their SaaS.

OUR CONTRIBUTIONS

Requirements Mapping

User Research

Benchmarking

UX Design

Prototyping

UI Design - Light and Dark

Design System

Quality Assurance

Triopsis menu
Validated message
Validate button
Source button
Triopsis light background
Scheduler label
Triopsis top left actions
Triopsis board
Triopsis legend
Route validation label
Triopsis top right actions
Triopsis map
Source data label
Triopsis table
Abstract shape breaking the text in design case study

THE INTERFACE WORTH PAYING FOR

When the user experience of a SaaS offers tangible benefits to users, you can charge them more.

We helped our customer pinpoint how the user interface of the SaaS can offer tangible benefits to users. We pursued two paths to operationalise these objectives.

The first path was user research, delving into specifics such as the duration of each task, common user errors, and other problems they encountered.

The second path was deductive and involved imagining an ideal version of workflows, where the system is leaner and most factors that cause friction do not exist.

The systematic nature of collecting and organising these details is what leads to those super-practical design details that users love.

HOW USERS WIN PRACTICAL VALUE FROM DESIGN DETAILS

Diagram grouping UI design decisions into value clusters

UX DESIGN FOR 3 TYPES OF ROLES

There was tension between conflicting needs of different types of users.

For example, a scheduler and an operations manager sort of need to see the same things, but they use them in very different ways. But there can also be tension between the needs of a single user.

We broke down everything each user does into micro-tasks to translate a complex landscape into relatable actions for user. Thus we were able to generate solutions for real and practical day-to-day user, rather than generic “user needs”.

Diagram showing the goals of a SaaS user
Diagram showing the pain points of a SaaS user
Diagram describing a user person of a SaaS platform

SCIENCE PRIMES UX AND UI DESIGN

Design for SaaS is a process that involves thousands of individual decisions which add up to the big picture. The decisions cannot be left to flair or “talent”. There must be a more fundamental bias towards practical decisions.

Evidence-based design is our process of choice.

A fundamental component of this rational and predictable process is the collection of useful facts and data from as many sources as possible. This is done to triangulate and organise a comprehensive perspective on reality and the impact of design decisions.

While user research is a primary source of information for designing the SaaS, other sources such as scientific research or benchmarking studies must complement it.

HOW SCIENTIFIC RESEARCH SHAPES DESIGN DECISIONS

Diagram showing the implementation of scientific UX design

SUPER-PRACTICAL DESIGN DETAILS LOVED BY USERS

The utility of the design for a SaaS platform doesn’t derive from aesthetics, but from the small details that prove practical during actual SaaS usage. This fosters alignment between a complex abstract system and the messy intricacies of people engaging in real-world work.

However, the practical design details that greatly enhance the SaaS user experience don’t come about through divine inspiration.

Instead, they stem from a meticulous and well-organised process that considers the users’ day-to-day realities, the psychology of the human being, particularly the digital aptitude of the general population, and behavioural patterns people exhibit when stressed, bored or tired.

Screenshot of UI design for planning board in SaaS
Screenshot of UI design for jobs page in SaaS
Screenshot of the user interface design of a SaaS platform

THE SAAS WORKFLOWS ADAPT TO EACH CLIENT

We also considered the design for the SaaS from the perspective of workflows, i.e. how individual actions of users add up to generate results sought by the organisation that employs them.

In practice this meant deciding on tradeoffs between what works great at the microlevel of a task vs. what provides coherence and efficiency to the entirety that is a user interface for a SaaS.

This is where the prior mapping of user needs and organisational processes adds a lot of value. This effort is about selecting and combining from a generous universe of design possibilities, with the clarity of what needs to be achieved for the SaaS to be valuable to customers.

Component showing the UX and UI design detail of a SaaS platform

INTERACTIVE COMPONENTS BOOST PRODUCTIVITY

Fluid interaction in which the interface reacts and adapts continuously leads to improved productivity. The user interface of a SaaS should not be static in a grid.

Although the design work needed to produce interactive components is complex, the end result for the user comes in the form of reduced complexity or cognitive load when interacting with the interface.

One aspect we meticulously concentrated on was maintaining the coherence of these interactions as we moved from idea to production. This entailed communicating the interactions both with real-time prototypes that give stakeholders a tangible feel, alongside diagrams and documentation that illustrate the systematic logic of the interactions for developers.

Example of UI design and interactions in SaaS dashboard
Example of UI design and interactions in SaaS dashboard

HOW WE LOWERED DEVELOPMENT COSTS

The final UI design for the SaaS is a system of components and behaviours that are deployed in contexts as configurations of interactive elements. This is how the user interface adapts to user needs.

Developers translated this system into code and we helped them with a set of measures to take some of the burden off them: • Individual, well-documented pages which show how the end result should look. • Each and all components meticulously documented without overlooking any detail or state. • Support throughout the implementation in the form of briefing sessions, answers where help is needed or where checks are due.

Thus, we took responsibility for the end result, which goes far beyond delivering simple designs. This support is indefinite. In the case of this particular SaaS project, even a year after delivery, as they were still implementing changes, we answered their questions in real time as if we were in-house in their team.

Screenshot of the UX design of a SaaS timeline dashboard
Design tool compass icon
Design System for the menu of a SaaS platform
Examples of UI components from design system for SaaS platform
Cover of design case study showing worker lift a pipe
Design elements

DESIGN FOR PROFESSIONAL SAAS

The design of this SaaS platform brings together three perspectives: the business strategy of staying relevant for the clients, the users’ daily needs and the technical roadmap.

The design decisions were made systematically on the basis of elucidating the concrete implications of the three realities and additionally probing the consequences of the various tradeoffs between competing needs.

The new user experience is made out of tiny details which bring tangible improvements to what users do and how they do it, alongside layouts that allow flexible workflows for organisations with different processes.

Implementing the design went smoothly because it was conceived as a coherent system and because we provided much support to the developers. This support entailed accompanying them throughout the whole implementation period and bringing a “can-do” attitude when it came to solving technical challenges.

A lot of effort and dedication went into this project. That is the only way to build a world-class SaaS design.

Have a project in mind?

Stylish girl wearing sunglasses
Stylish girl wearing sunglasses

Your guide to digital excellence

Creative Navy is a top UX/UI Design Agency in London. We design mobile experiences, web interfaces and GUI for embedded devices.

© Creative Navy LTD 2024

Excellence UI design illustration