Start a project
  1. src
  2. work
  3. facility-management-system.tsx
All work

~/work/facility-management-system · Custom software

SaudiPak Facility Management System, Dashboard UX and Full-Stack

Facility Management dashboard screen
ProductSaudiPak facility platform
IndustryProperty and facilities
Year2023
PlatformWeb
Delivered asTeam lead and full-stack developer, NXCSOL

Overview

A facility-management platform for the SaudiPak tower: complaints, job slips, tenants and occupancy, plant-room logs, janitorial duty, security and CCTV, with role-based access for 260+ users across 6 roles.

The challenge

Running a commercial tower meant paper job slips, WhatsApp complaints and plant-room logs on clipboards. Management had no single picture of what was open, who was on duty or how the building was performing.

problem / solution

What we set out to fix

Problem

  • Tenant complaints arrived by phone and chat, with no tracking.
  • Job slips, duty rosters and plant logs were on paper.
  • Six kinds of staff needed different access to the same data.
260+users on the platform
6roles with their own access
15+pool cars in fleet booking

Solution

  • Complaints and job slips tracked from first response to resolution.
  • Hourly plant-room logs and daily janitorial rosters.
  • Tenants and occupancy by floor and lease.
  • Role-based access and productivity dashboards.

process

How we built it

01

Research

Mapped the tower's daily operations: complaints, job slips, plant rooms and security.

02

UX design

Grouped the work into operations, building, and people and access.

03

UI design

A calm stone-and-green system made for long days of data entry.

04

Build

Led a 3-person MERN team with a Next.js front end and real-time APIs.

features

What it does

feature 01

The whole tower at a glance

  • Occupancy, open complaints, job slips and staff on duty in one overview.
  • Every floor, tenant and lease in one occupancy map.
facility.app
Facility Management dashboard screen
facility.app
Facility Management tenants and occupancy screen

feature 02

From complaint to closed

  • Tenant complaints tracked from first response to resolution.
  • Job slips assigned to technicians and tracked by status.
facility.app
Facility Management complaints screen
facility.app
Facility Management job slips screen

feature 03

The building behind the building

  • Hourly logs for boilers, chillers and generators.
  • Security operations, incidents and CCTV coverage.
facility.app
Facility Management plant room screen
facility.app
Facility Management security and cctv screen

stack.md

The tech stack, and why we used it

Next.js and ReactDashboards and long data-entry forms for six different roles in one app.
Node.js with real-time APIsComplaints and job slips update for everyone as they change.
MongoDBPlant logs, duty rosters and complaints all have different shapes, and a document database handles that without constant schema changes.
Tailwind CSSA calm, consistent interface for people who use it all day.

users.md

Who uses it

260+ users across 6 roles

Each role sees the part of the tower it runs.

Tenants

Complaints are tracked from first response to resolution.

Technicians and plant staff

Get job slips and log boilers, chillers and generators hourly.

benefits.md

Benefits

  • Management has one picture of what is open and who is on duty.
  • Paper job slips and clipboards are gone.
  • 15+ pool cars are booked in the same system.

cost.md

Cost benefits

  • Staff stop re-entering the same information across paper and chat.
  • One platform replaces separate tools for complaints, rosters and logs.

screens · 8

Every screen

Scroll sideways through the product.

facility.app
Facility Management dashboard screen
01Dashboard
facility.app
Facility Management complaints screen
02Complaints
facility.app
Facility Management job slips screen
03Job slips
facility.app
Facility Management tenants and occupancy screen
04Tenants and occupancy
facility.app
Facility Management plant room screen
05Plant room
facility.app
Facility Management janitorial duty screen
06Janitorial duty
facility.app
Facility Management security and cctv screen
07Security and CCTV
facility.app
Facility Management users and access screen
08Users and access

Typography

Aa

Outfit + Public Sans

Outfit gives the tower's numbers a clean, architectural feel; Public Sans, built for public services, keeps logs and rosters readable all day.

colours

Facility green#0E8F6B
Mint#5FD4A8
Ink#14211C
Stone#F3F4F0
Line#E0E5DD

built with

Next.jsReactNode.jsMongoDBTailwind CSS

~/start · new project

Let's run your building from one screen.

Tell us what you are building. We reply with next steps, usually within one business day.