Ever since January 1st, 2016, I've written one line, every single day, about the highlight of that day into a diary of sorts. This document, now thousands of lines long, contains my favorite memories throughout my college years and is incredibly rewarding and uplifting to look over. During my time in the COVID-19 quarantine, I wanted to create a more deliberate version of the process that I do, so that I can share it with others. Due to the mental and physical monotony of these days, our memory becomes dulled and blends together, making it that much harder to find gratitude and purpose.
Gratitude journaling has well-researched positive benefits. How might we design a mobile application catered towards a one line per day style of journaling? I wanted the design to be simple and intuitive, as I imagine most people would open it up once a day, spend only a couple of minutes to throw down a sentence or two. The primary function should be to log an entry, with some sort of browsing or searching as secondary functions.
I began sketches by imagining layouts for each of the four main screens (with fun names) and how they would interact with each other. The home page has a "card" that displays or prompts the user's daily entry. The vault page is most similar to my current google doc solution, a flat list with a line allocated for each day. The prospector page functions as a search feature, but will be more powerful with the introduction of tags (think hashtags). A fun little feature that I wanted to add was the memory lane page, where it gives you flashbacks of things that happened "a year ago" or "one month ago," to bring the warmth of that memory a little bit closer.
Initial designs
The low fidelity prototype is structured around three main flows. 1: Record the moment or memory. 2: Review past moments for a heartwarming experience. 3: Discover forgotten moments in a magical way. On Figma, I wireframed the four main sections that I had sketched out earlier, and by combining memory lane with prospector, condensed it into three pages. This architecture fits cohesively into the bottom nav.
Medium fidelity prototype
By stylizing the wireframe with inspiration drawn from the moodboard, I built a new prototype. I studied different illustrations to nail the golden motif and using a display typeface, created screens reminiscent of a handwritten journal with gilded edges. I began with a dark primary theme with the intention of giving the users an option to swap between light and dark modes. Using this rework as an opportunity, I continued to flesh out some of the more specific functionality such as the graphs in Prospector.
High fidelity prototype
While the engineers were compiling their first lines of code, I compiled a brand guide to realign the team on the visual design language. Using this realignment as an opportunity to iterate on our designs, we targeted specific feedback such as having too many styles, indicators not clear enough for users, not enough breathing room or whitespace, and the three screens being too similar. By far the most time intensive (you can see our dates jump from June to September) and rewarding aspect of this project was learning the technical knowledge to transform it into reality. Under the guidance of our engineering manager, Ryan Kurohara, I picked enough working knowledge in React Native to feel like a frontend engineer.
Reflections
While bringing the project out of the conceptual phase, I learned about engineering tradeoffs and having to sacrifice some beloved features due to engineering complexity. But in the end, being able to own a product from end to end was so much more rewarding than just making concepts. Gold has garnered 2000+ downloads since release and has even been featured in some online blogs.
