Checkset

A Low-Code web application for checkset to manage and communicate with their clients.

What we did

UX/UI Design
Web Development
Low-Code

Constant change makes producing quality drawing sets nearly impossible. Checkset recognizes that the industry faces increasingly volatile parameters such as budgets, timelines, and unpredictable clients.

That’s why they’ve developed their service to accommodate these factors while providing vital feedback to identify drawing issues before they become expensive, reputation-damaging mistakes.

Refokus partnered with CheckSet to help them bring workflow automatizations to better onboard, organize and communicate project status, provide deliverables, and invoice their clients allowing them to scale their business and become more efficient and profitable.

Challenge accepted

The CheckSET process is a comprehensive review of all discipline drawings and specifications to identify interdisciplinary coordination issues, locate constructability issues, validate drawing references, confirm ADA / accessibility compliance, and assist in the elimination of potential errors and omissions.

Checkset Peer review checklistHands over macbook

Discovery

Checkset’s journey starting point

We’ve worked closely with CheckSet’s team to define the application flow that better adapts to their current workflow but at the same time providing a seamless user experience to their customers and increasing the value they perceive from CheckSet services.

Our Approach

An experience for CheckSet customers that helps them scale their business.

We’ve created a Low-Code web application that automates CheckSet workflow, making use of their current management tools and designing a powerful UI that allows them to better communicate with their clients and deliver their reports with a seamless user experience to digest the complexity of information and have actionable insights.

VISUAL STRATEGY

We’ve started by defining a look & feel that closely matches the CheckSet brand but at the same time pushes the boundaries, creating a UI that allows us to seamlessly display their complex content.

From this design exploration, we’ve created wireframes for the whole application, planning the layouts and the components to be flexibly adapted to all our needs.

Visual Strategy

We’ve started by defining a look & feel that closely matches the CheckSet brand but at the same time pushes the boundaries, creating a UI that allows us to seamlessly display their complex content.

From this design exploration, we’ve created wireframes for the whole application, planning the layouts and the components to be flexibly adapted to all our needs.

Desktop view title
Checkset tablet view
Tablet View title
Checkset Desktop view
Mobile view title
Checkset app mobile view

Onboarding CheckSet Clients

The application offers a secure login for CheckSet clients, where they can access their projects, administrative information, and reports details.

Main Dashboard

A powerful dashboard to digitalize client communication

The dashboard goal is to give clients an overview of their proposals, projects, and invoices; together with a list of tasks they need to complete (such as pay invoices, upload blueprints, review comments), and a calendar summary with upcoming events.

Tooltip "Accesible sidebar to quick identify each category"Macbook showing Checkset UITooltip "Check your project status whenever you need"

Invoices

Automating invoice collection

Clients can have an overview of their paid and unpaid invoices that can be searched, filtered and downloaded. All invoices are grouped by project, so it’s easier for the client to have a better overview of their costs and payments.

Checkset Invoice UICheckset Invoices MobileCheckset Invoice card
Checkset Knowledge Base View

Onboarding

Knowledge base

To give a seamless onboarding experience, clients can access CheckSet Knowledge base, where they can get deeper insights on CheckSet services and key aspects of the newly created platform.

My Calendar

The calendar view offers a visual representation of all the upcoming events and milestones, filtered by project and with the ability to visualize as a timeline or as a full-month calendar.

Checkset My Calendar UI

Project visualizations that really work

The projects page features two different ways to visualize projects: list or tile views. Each client can see their own projects, together with a filter and search functionality. The projects page is the entry point to access the project reports.

Checkset My projects Grid viewCheckset My projects List view

CheckSet Deliverables: powerful and accessible

The most important part of CheckSet service is to deliver the reviewed blueprints to their clients
in a format that can be easily consumed and take action on the recommendations.

Project overview

The project overview serves as the project dashboard, where clients can have a quick glance at the project status, schedule, and links to the key project deliverables.

City in winter
Checkset estimated graphCheckset score graph
Checkset score graph

Score & analytics

The Score & Analytics page is the perfect visual representation of the report, showing auto-generated created graphics and charts from the raw data added by the analysts.

Comments organization and discoverability

The biggest challenge of this section was to organize and display all the comments, which in some cases could be in the hundreds, to be easily reviewed by the client. For that, we’ve created collapsible dropdowns and a powerful search and stackable filters.

Checkset table UICheckset filters UItooltip "Integral filter section"Avatar fo a girlTooltip "Show critical issues"

Schedule and milestones

The project schedule features a timeline view, a calendar, and a progress bar with key information about the project status and key milestones, so the client can easy review the project schedule.

Checkset Schedule table UI
Checkset Calendar UI
Checkset project progress UI
Checkset UI in a laptop

Documents and Files

The Documents page is where all the blueprints and shared files are stored. We are allowing clients to upload files, saving them on a secure S3 bucket in AWS.

A Low-Code application built on top of CheckSet workflow

The Low-Code application we’ve created pulls data from Airtable API, security storing it on a database, and servicing it to the frontend using VueJS.

Airtable

As checkset was already using Airtable to manage their operations, we’ve used Airtable as the application database, so we could improve their complex workflow, and avoid making changes on how they are currently operating.

Airtable mobile
Airtable logo
Avatar of a girl with green dot as online status
Avatar of a girl

User Registration

For the clients to securely get access to their information we’ve created a custom registration system connected with Airtable, so the user can use it as the user management to create, edit, delete users for their clients.

Low-Code technology stack

We’ve built the whole front-end in Webflow, using the power of their building and allowing us to host with Webflow, reducing infrastructure work and costs. For connecting Webflow with the Airtable database we've used Nodejs and Vuejs.

To avoid performance issues we have a MongoDB database in AWS that replicates the data in Airtable.
Our custom API in Nodejs allows us to serve data to our Vuejs app that we inject in Webflow.