HR web application front end

Overview

The front end for an HR platform, built in Vue from a supplied design over four months. Not a one-off delivery: the initial build shipped, then the client kept adding screens, and each one was agreed and delivered on its own.

I owned the interface layer. Muhammad Umer Farooq worked the same product in parallel on the admin panel and backend.

What I own

Everything the user sees. The initial front end from the design, the public front page, and the two-factor authentication screens across web and mobile.

Complexities tackled

Two-factor authentication is four screens, not one. The client specified enrolment across three methods, a phone number, an emailed code and an authenticator app, and both a setup flow and a challenge flow, on web and on mobile. That is a matrix rather than a page. The challenge screen has to make sense when the user has enrolled in one method, or two, or all three, and the setup screen has to be reachable and comprehensible to someone who has never used an authenticator app. Getting this wrong locks people out of their own accounts, which makes it one of the few interface areas where a bad decision has a support cost rather than an aesthetic one.

Building from a design rather than from a description. The whole first milestone was a supplied design document turned into a working Vue front end. That is a different discipline from designing as you build: the target is fixed, so every judgment call is about how to reach it in a component structure that survives the screens nobody has drawn yet. The screens that arrived later, the front page and the 2FA flows, are what tested whether that structure held.

Keeping two contractors’ scopes apart. Partway through, the client added a backend item to my contract. Umer asked for it to be moved off, and the client did so within the minute. Small moment, and the right one: two people billing the same client for one product only works while it is unambiguous who owns what. Blurring it once is how you end up with two people half-building the same thing.

Delivering against something the client can see. For the front page I asked for approval against the live site rather than a screenshot or a zip, and for the first milestone I asked for a call to walk through it rather than just submitting the archive. A client approving work they have only seen a picture of is a revision request waiting to happen.

Stack

Vue with JavaScript, HTML and CSS, built to a supplied design.