Senior UX/UI DesignerBack OfficePropTech / Smart Building

Area 22 IOT Management

HAPPY THREE CREATION CO., LTD. · 7 mo · Aug 2023 – Feb 2024

Area 22 electricity dashboard on a laptop, with total consumption, usage over time and the floors that use the most

Design Process & Workflow

From Requirements to Monitoring

How the back office was structured around what an administrator manages, from requirements and access rules to the operational modules, live CCTV and monitoring dashboards.

Step 01

Requirements and User Roles

The brief was a management system for a building of rented offices, connected to its hardware: the screen in the common area, face scan, CCTV, the car barrier, and the electricity and water meters. It had to log who came and went and whether each person was staff or a guest, keep track of the companies and employees in the building, manage the shared meeting and fitness rooms, and let tenants report problems to the in-house technicians. The requirements board splits the platform between three roles: the front-desk admin, the technician, who sees only job tickets, and the building owner, who also sees the usage summaries used to bill tenants for electricity, water and the shared rooms.

Step 02

Information Architecture

The structure follows what those roles do. Dashboard holds electricity, water, operator, event and security monitoring. Manage holds visitors, meeting rooms, admins with their permissions, and companies with their employees and access. Technician Service holds maintenance requests and job tickets, Time Log holds vehicle and visitor entry and exit with a CSV export, and CCTV holds the live view, playback, event detection and face recognition.

Step 03

Design System Foundation

The component base is Chakra UI, with its forms, alerts and toasts set out on the board beside the colour and type styles, a Chart.js chart set drawn in light and dark versions, and the Iconsax icon set. A back office repeats the same tables, forms and messages all day, so these were settled before the screens.

Step 04

Meeting Room Signage

Beyond the back office, each meeting room has a portrait screen by its door showing the room type, capacity and floor, the day's bookings with each tenant's logo, whether the room is free now, and how many sessions remain. The board takes the design from an empty day to a full one, beside a photo of the screen installed at the fitness room.

Step 05

Sign-In and Password Recovery

Sign-in is drawn as a flow with its checks: wrong details return to the form with an error, and a successful sign-in opens the platform with a confirmation message. Password recovery runs from the request and its confirmation through the email link and the new-password screen, and lands the user on the dashboard.

Step 06

Visitor and Company Management

Visitors and company staff are added through the same form, with a photo taken on the camera or uploaded from a file, and edited or deleted from their lists. Each list has an empty state, deletion asks for confirmation first, and every action ends in a success or an error message. Company management places the company profile above its list of employees.

Visitor and Company Management — visual 2

Step 07

Room Booking, Job Tickets and Time Logs

Meeting-room booking offers month, week, day and agenda views, checks the slot before confirming, and reports success or failure either way. On a job ticket, a technician accepts the job and updates its progress, anyone who did not accept it sees a separate view, and an admin can delete a ticket after confirming. The time logs list vehicles by licence-plate photo and visitors by name, type and purpose of visit, with the times in and out, a CSV download and an empty state.

Room Booking, Job Tickets and Time Logs — visual 2

Room Booking, Job Tickets and Time Logs — visual 3

Step 08

CCTV by Location

CCTV lists the cameras by location, from each floor to the elevator, the rooftop and the car park, beside a live view. A floor with no camera attached yet has its own empty state rather than a blank frame.

Step 09

Dashboards and Date Ranges

The dashboards cover electricity, water, the operator view with live visitor and car counts, events with meeting summaries and room usage, and technician service with job status, each with a CSV download. On the electricity dashboard the range runs from a single day up to the last year or a custom period, with the bars grouped more coarsely as the range grows, and total usage can be filtered by floor.

Executive Summary & Impact

Three Roles

Admin, technician, owner

The front desk runs daily operations, technicians see only their job tickets, and the owner also gets the dashboards.

Room Signage

A screen by every door

Each meeting room's screen shows the day's bookings with tenant logos, whether the room is free now and the sessions left.

Usage Dashboards

Meter readings for billing

Electricity, water, visitors, cars, events and jobs, from a day up to a year, filtered by floor and exported as CSV.

Area 22 manages a building of rented offices and the hardware in it: the screen in the common area, face scan, CCTV, the car barrier, and the electricity and water meters. The design splits the platform between the front-desk admin, the technicians and the building owner, puts a screen by each meeting room door, and turns meter readings into dashboards the owner can use to bill tenants.

01 / Discovery & Context

Problem & Baseline

A building of rented offices shares its entrance, meeting rooms, fitness room and car park between many tenant companies, and its hardware, face scan, CCTV, the car barrier and the electricity and water meters, all had to come together in one place. The owner wanted one system to log who came and went, manage the shared rooms in limited space, route tenants' problems to the in-house technicians, and summarise electricity, water and room use so tenants could be billed correctly.

Many devices

Face scan, CCTV, the car barrier and the meters each had to feed one system.

Shared, limited rooms

Many tenant companies shared a small number of meeting and fitness rooms.

Three roles

The front desk, the technicians and the owner needed different access to the same data.

Billing by usage

The owner needed electricity, water and room use summarised to charge tenants correctly.

02 / Architecture & UX System

Key Design Decisions

01

Structure Built Around Roles

Organised the platform into Dashboard, Manage, Technician Service, Time Log and CCTV, with permissions per role, so a technician sees only job tickets and the owner sees the dashboards.

02

Room Booking With Signage at the Door

Booking runs in month, week, day and agenda views and checks the slot before confirming, and a portrait screen by each room shows the day's bookings, tenant logos and the sessions left.

03

People and Vehicles on Record

Visitors and staff are registered with a photo from the camera or a file, and the time logs list vehicles by licence-plate photo and visitors by type and purpose, with times in and out and a CSV export.

04

Job Tickets for the In-House Team

Technicians accept a job from its ticket and update its progress, anyone who did not accept it sees a separate view, and an admin can delete a ticket after confirming.

05

Dashboards for Billing

Electricity, water, operator, event and technician dashboards each have a CSV download; the range runs from a single day up to a year or a custom period, with bars grouped more coarsely as it grows, and usage filters by floor.

03 / Verification & Evidence

Outcomes

Area	Before	After	Outcome
Building hardware	Face scan, CCTV, barrier and meters needed one place	One back office with dashboards, time logs and CCTV	One system
Shared rooms	Limited rooms shared by many tenants	Calendar booking with an availability check and a screen by each door	Visible
Access	Three roles needed different views of the same data	Permissions per role; technicians see only job tickets	Role-based
Maintenance	Tenants' problems needed a route to the technicians	Job tickets that technicians accept and update	Tracked
Billing	Usage needed summarising for tenant bills	Meter dashboards by range and floor, exported as CSV	Exportable

04 / Retrospective

What I Learned

→

Starting from the three roles, front desk, technician and owner, decided the structure: each module exists because one of them needs it, and the permissions follow the same split.

→

The meeting-room screens showed that a back office does not end at the browser; the same booking data had to read at a glance on a door.

→

Setting date ranges for the dashboards meant deciding how the bars group at each range; otherwise a year of readings is unreadable and a single day too coarse.