Editable timeline. Adding a time dimension to a web form.

No time for "gold plating".
Background

A complex screen design for an internal web application.

Users would come to this screen if, for example, a bank was acquired or its name was changed.

There was little appetite for investing in UX refinement in this environment, so it was important to design the screen well on the first pass. This screen needed to provide users with a way to view and edit the historical metadata of institutions.

A rough Balsamiq mockup based on the existing site template

Diving right in.
Design Approach

I love this kind of challenge, so I started sketching ideas straight away.

I settled on a vertical timeline on the left presented as side tabs, with newer entries toward the top and the ‘Add new entry’ button above.

Each entry shows the start and end date for that record (eg. “Jan 2000 to Dec 2010”), however only the start date is required in the form.

A Balsamiq mockup of the timeline component of the screen.

Sketches are cheap.
Validating the Design

I had to make sure my design would work well for the people using it.

The user group was small (and busy), but I was able to give two of the group a short walkthrough of the design. The screen is complex, but I could see the moment where their mental model for it fell into place. They made some small suggestions and were happy to endorse the design.

A Balsamiq mockup of the full form.