A web app for comparing two pairs of years, including functionality to search Wikipedia for people's birth and death dates. Stemming from a conversation following the deaths of Bowie, Prince and so many others in that same year.
Live web app
More UI/UX projects
The first version simply calculated age based on years, but more importantly began the trip down the rabbit-hole that is getting useful data out of Wikipedia. While the age calculation was simplistic, dealing with the Wikipedia API turned out to be the main bang-you-head-against-the-wall technical work of the project.
In their API, there was no way to search within a category such as people by name, and even if it did yield a matching page, there was no structured data to easily find the life dates of the person within that page. Once regex was the only option to extract clean dates from a page, the possibility that this whole thing might be a mistake did come up.
Enough time was spent that it was spun off into the side-project Wikipedia People just for trying out queries against the three major endpoints found for accessing Wikipedia data.
While the initial version was straightforward, it was also limited. The second version aimed to allow comparison between two people, either of which could have their life years input manually, or automatically through the Wikipedia API search. It also added a different way to compare the resulting lifelines: either aligned at birth as in the first version, aka 'absolute', or laid along a real timeline where dates were continuous, aka 'relative'.
This second view brought the most complexity to this version, as dates could be wildly different and potentially not even overlap at all. This caused scaling problems and alignment issues with the year labels, causing them to be cut off or even disappear entirely in cases where lives or gaps were very short compared to other elements.
From a readability standpoint, version 2 also made the connection between inputs and life lines less clear. The interface went through many iterations of differing ways to visually connect the inputs and output graphs, including placing the inputs inside the graphs themselves or bluntly drawing a line between them. Finally colour was employed to differentiate the two, though it wasn't until version 5 that real interface affordance was achieved with minimal visual embellishment.
Version 5 removes the input mode toggles and combines the two graphs into one. The single graph now has a display mode toggle, while the input mode is automatic depending on input, with both manual and search inputs kept available at all times. This allow the inputs to be placed above and below the graph, tying them clearly to their respective graph elements while allowing plenty of horizontal space on smaller screens. This version also finally transitions to plain JavaScript with no need for any third-party libraries.
The project represents the culmination of an iterative design process with clear guiding principles: an interface with clear affordances, preference for iconographic communication over written language explanation, and minimal, monotone design where the form is guided by the function as much as possible.
Latest version available here
