Building a Web App that no one asked for

CatPaper™—a digital product designed to assist Security Officers in their daily Security Patrol duties. A Cheat Sheet provides various information about a commercial building. A simple tool intends for Security staff to have access while they’re on the go. The app is built with accessibility in mind and provides instant loading speed even when there’s no internet connection.

Table of Contents

1. Introducing CatPaper
   • Background
   • How it Works
   • CatPaper App
2. Concept
3. Design
   • Pages & Layout
   • Navigation
   • Overview
   • Patrol Routes
   • Lifts
   • Staircases
4. The Challenge
5. Lessons Learnt
6. Summing Up

---

Introducing CatPaper

An Web App designed for Security Personnel. The app provides quick and easy access for checking Patrol Routes or building related info when they carry out duties in/outside of an office building. It is an PWA—Progressive Web App, a read only app that offers almost Zero functionality. Cat Paper literally stands for “貓紙” in Cantonese, which means cheat sheet.

It’s a single page website and was built using HTML & vanilla CSS only, with a little bit help of PHP. I hard-coded everything. No JavaScript is used except the app.js and sw.js for the PWA to work.

Background

To give you some context, this is a Web App specifically built for Security Personnel who work in a commercial building somewhere in the world.

As a Security Officer, it is required to carry out patrols on the premises. They will perform security check at each office floors. Such as ensuring fire doors are properly closed, checking common area is clear and safe and fire alarm systems normal, etc. A office building consists of multiple levels and is divided into Zones: level 8-18, 19-32 and 33-52, so on and so forth.

A Patrol Route is designed for each Zone and performed on a daily / weekly basis. Sometimes, it’s not the problem of memorizing every route, instead, it’s easily get distracted or interrupted by tenants or visitors if they talk to the person who carrying out patrols. This is an attempt to build an app that actually can solve such a problem.

How it Works

User can “Install / Bookmark” — Add to Home Screen on iPhone iOS Safari or Android Google Chrome. An App icon will appear to your Home Screen and it can be accessed at any time even if there’s no internet connection (offline).

This app is intended for mobile users. But of course you can still view it on desktop/laptop. It’ll work in most modern browsers: Safari, Firefox, Chrome, Opera, Edge.

CatPaper App

It’s official. CatPaper 1.0 beta is now available.

Concept

To design and create a tool for assisting Security Officer who carry out patrols or duties in a Class A office building. It can be accessed easily on mobile with just one hand while they’re on the go. Once the app is loaded, user can check on everything at anytime and anywhere even when the phone’s offline.

Security staff sometimes might find themselves being clumsy, fumbling around paper sheets for checking patrol related information while carrying out patrols. This app is trying to prevent that from happening. No more carrying paper sheets around in their pockets while performing duties. Everything is loaded on their phones and gets updates or even push notifications.

Design

This is a very simple and straightforward app. Nothing special yet practical. The app is designed to be minimalistic. I was trying to use semantic HTML & CSS to create components with accessibility in mind. Such as, enlarging text size for the app, larger tappable area for gestures and app like navigation. Aims to deliver a better user experience. The app supports Light and Dark Mode which will switch mode according to system preference.

Pages & Layout

I love the idea of John Doe’s Page created by @cadars. I shamelessly stole borrowed the concept of using :target CSS selector and #anchor for pages. Each page is wrapped in <section> with an id for show and hide content. The url will be like catpp/#overview. The reason of doing that is because a PWA can cache static files and it’ll load insanely fast as it is a single page HTML. But of course the downside was it has 11453 lines of HTML code for the whole app.

The layout for each section is mostly using card. Using <ul> <li> for structure. As for presenting different data content, <table> and <dl> are used.

Navigation

The main navigation for the app. The entire page consists of every menu item of the app in the same layout. The items are divided into nav group by type such as Patrols Info and Patrol Routes with headings for each <ul> to create a clear hierarchy. The click / tappable area for the list items is styled using pseudo-element a::after trick to make the whole <li> easier to tap. I intend not to have expandable menu as it’ll require extra taps to open it. This allows users to access everything that requires minimal interaction.

Overview

A dashboard like interface for showing basic information about the office building. A summary of Patrol Routes is presented using a table.

Using display: flex to create the grid layout. Tabs were implemented for reducing page scrolling. The tabs are using position: sticky to float at the top of the page when scrolling down.

Patrol Routes

This is the core feature of the app. It was inspired by an article Checkbox Trickery with CSS written by Will Boyd. I simply stole took the idea of making a checkbox To-Do List and turned it into a Patrol Route feature. I twisted the concept of using checkbox status for checking off items. It plays out to be a patrol app. I’ve learnt how to use :checked pseudo-class and order property.

The idea is to design a checklist for user to keep track of the patrolling progress. The app interface shows info for each route as a list and make the items interactable. The location of the patrol spot and the ordering are shown in the list items. The mechanic is like mimicking the security staff punching a patrol button when they pass through a designated check point. A progress bar also indicating the progress of the patrol. I also took inspiration from The Front-End Checklist.

Using <label> and <input> for each item. If the checkbox is checked and it will be listed in a separate list. All wrapped inside a <form> element and user can reset the checkboxes’ status by tapping the <button type="reset">. The progress bar also was done by purely CSS.

Lifts

For presenting different kinds of information, card layout were used. Lifts related info for each Zone with lift numbers and floors served.

Staircases

For tabular data, table were implemented. It’s very straight forward. With position: sticky, the <thead> will float on top of the page when scrolling down.

The Challenge

There are various information and data for a commercial building and most of them are not being organized for staff to check on. They’re all printed on paper and it’s not convenient to bring a stack of A4 sized paper sheet walking around. The challenge is to categorize and organize those info and data effectively by choosing the appropriate HTML elements that meets the semantics and present them in a way that is easy to read and check on.

This is an app designed for security staff. I first try to think of the needs of target user and picking the most relevant content for them. Secondly, building interface and components that provide minimal interaction which allows user to check on anything effortlessly.

• Usability: Allow user to navigate, check info easily on mobile singlehandedly
• User Interface: Keep the UI as minimal as possible: light weight and accessible. Every features will work without JavaScript
• Navigation: Ensure all tappable target size for <button>, <a> and <label> are big enough for touch screen
• Typography: All font-size are adjusted to a bit larger than usual. Easy to read is the highest priority

Lessons Learnt

Building an Web App is something I’ve never imagined it could happen. Working on it was a very slow learning process. I did try to relearn everything from scratch. From writing the very first line of HTML <!doctype html> to every line of code below it. To learn why it is written that way and what it actually means. My goal is simple, to write HTML and CSS in a better way than I was before.

For instance, setting up a favicon for the site, this alone could take a few hours of research and testing. Implementing SVG icons took me like a week, from using php to inline <?php include_once(’../svg/svg-icons.svg’) ?> to reference a external file <use href="./svg/svg-icons.svg#app-logo"></use>. There’re so many ways of doing things and I changed my mind very often. The only way is to learn it by testing. Find a way that suit you best.

The biggest takeaway was to learn along, no matter what you’re doing. Not just make it works, but you’ve to understand it. Every time you do something, try to discover something new out of it. Then move on to the next thing.

Summing Up

This was the thing that I created last year. I’m not satisfied with it at all. But it is what it is. I wasn’t reinventing anything nor did I wanted to save the world. I’m glad that I tried to make it happen.

It seems to me a lot of effort went into it but matters very little. I believe you should always work towards your goal no matter how insignificant the thing is. Even it could only take you a few steps closer, but you gotta keep going. That’s the spirit of design, wouldn’t you agree? Maybe I’m writing bad code or making bad decisions, it doesn’t really matter in the end, but the journey that takes me there. Do better next time.

I spent a few months working on this thing as a side project last year to keep myself busy at the weekends. During this pandemic, what else could I do? I’m itching to create the next thing. So, what the fuck have you done lately?

---

• Reply via Email: [email protected]
• Comment on Mastodon