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
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.
sw.js for the PWA to work.
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.
It’s official. CatPaper 1.0 beta is now available.
Attention: CatPaper is a personal project. All information and data are for reference only. It was built solely for self learning purposes. Do not copy, reproduce, distribute, modify, publish or display the content, information or source code without written permission of the creator. Sharing Forbidden.
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.
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
<li> for structure. As for presenting different data content,
<dl> are used.
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.
A dashboard like interface for showing basic information about the office building. A summary of Patrol Routes is presented using a table.
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.
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
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.
<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.
For presenting different kinds of information, card layout were used. Lifts related info for each Zone with lift numbers and floors served.
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.
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
- Navigation: Ensure all tappable target size for
<label>are big enough for touch screen
- Typography: All
font-sizeare adjusted to a bit larger than usual. Easy to read is the highest priority
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.
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?