Keepsakes is a desktop web app that generates an automatic journal based on data from other apps. Moves, Instagram, Fitbit, etc. can be combined to form a pretty clear picture of a day: where you were, how you slept, what the weather was like, what you saw, talked and thought about, even the song that was stuck in your head. This project is the oldest on the site, from 2013–14, and was part of my BFA capstone — I did all design and development.
At the time I was creating lots of responsive sites for thoughtbot. I often felt that using the same markup and compatible layouts across platforms was restricting the desktop experience. I wanted to make something that leveraged desktop, relied on the mouse and hover interactions, and used CSS’ 3D features extensively.
The main element is a map, so it makes sense for the rest of the app to be spatial — rather than a 2D document with buttons and a flat map, a 3D space with “zones” that exist above, below, beside, and over the map.
Hover interactions allow users to explore these zones and peek at information — at first this acts as an onboarding hint, but it remains useful to get information at a glance.
Using custom cursors and animation cues with these hover interactions, to indicate the click action, allows much less traditional UI to be used. Fewer buttons means more space for the map.
When I made Keepsakes I had only been gathering data for about a year. I’ve found that the value of the data increases with time, making the app into a nostalgia machine. I’m a very map oriented person — when I’m trying to think of a place to eat, I open Google Maps — so I expect future mapping improvements, like widely available 3D imaging, to improve the app considerably.
One feature I’d like to add is an even higher level, seasonal overview. Comparing seasons would allow insights like how the weather affects your sleep, new friends you’ve made, and more.