Retrospect - Journaling Insights

Side Project   |   Visual Design, Animation


Retrospect is a project that I worked on in Spring 2018. I wanted to improve my visual design skills (especially for desktop) and get more experience animating interfaces using Framer, so I decided to design an idea for a journaling app I had come up with after reading over some journal entries from the prior Summer.

It's a native desktop application that lets users journal and discover insights about their own lives through an entry tagging system and data visualization about the content of their journal.


Visual Design, Animation


Sketch, Framer


Spring 2018

The Goal

The root of the idea for this application came from my sophomore year at CMU when I was roommates with someone who journaled frequently. One day, we were talking about his journal and he asked me how many times I thought my name would come up if he CTRL + F'd my name (he kept his journal in a Word doc like I currently do). I dismissed the idea but I found it fascinating and wanted to see similar statistics for my own journal.

From my personal journal, I found that I often wrote about recurring topics so I wanted to allow people to tag the topics that they wrote about within their journal entries. With these tags, along with other stats, they can visualize data that gives insights into their own life through their journal entries.

I wanted to provide a clean interface that made it easy to tag topics and make it enjoyable + interesting to read over past entries and view stats on their journal.


As usual when I am starting off a project and need to get ideas out of my head, I begin with paper sketches.

Initial sketch for the journal screen along with some design notes and logo ideas

Higher fidelity, refined version of my initial sketch

A few ideas for the entries page

Additional versions with a calendar view idea

Rereading entries in an "article view"

Considering ideas for moving through entries

Insights dashboard with notes on what would be interesting

Picking between a few different layouts

High Fidelity Mockups

Next, I moved into Sketch to create higher fidelity mockups of the wireframes I had.

The main screen is the journaling page where the user can create new entries.

You can see the color coded topic tags on the sides of past entries which gives the user an idea of what their entries have been about in the past. In the bottom right, there is the currently selected topic and the option to add more topics to its right.

The entries page is a pretty simple calendar with a search function. Each entry on the calendar has the same side colors which show the user what topics are tagged in that entry.

When viewing an individual entry, I wanted the user to feel like they were reading their own writing as a sort of article. So I had the large first letter and the secondary info below the title (location, tags) placed in a way that made it look like an article.

At the bottom, the user has the option to bookmark the entry, edit it, or delete it.

On the insights page, the user has access to different data on his/her journal.

First, they have general stats on their journal (total entries + words). Then they have a quick visualization on how much they journal. And then they have stats on the topics and words that they commonly use in their entries. Either of these can be further inspected by hititng "View All" in the respective card.

A full report has a larger chart and more options around the subject of the chart. Here, you can see the most frequently used words in the journal. You also have the option to see the least frequent words, the most common proper names used, the most common 3+ syllable words used, and more in the dropdown from the top right. You can also use the search function to see how many times a word has been used as well as it's usage over time.


Finally, I did a few animations in Framer to better visualize some of the interactions I imagined for the application.

Switching between different tags within an entry

Selecting an entry to read

Dashboard initializing


I struggled a bit with my initial designs for the journaling page because the interface felt empty and too spacious. I felt the need to add color in order to establish some visual balance and framing for the page. I later changed the sidebar to be a solid color in order to achieve this.

For the entries page, I initially drew straight from my wireframe. But in later iterations I started moving towards an idea I had in one of my initial sketches where the entries page looked like a home page for a news site with articles which tied in to the article theme of rereading entries.

Although I really liked the way my third iteration looked, I figured that a calendar would make the most sense and be the easiest to browse.

Future Work

Next, I want to look into different data visualizations that can provide insights to users of the application. I think that "Topics Written About Over Time" or something with the number of words for different topics would be interesting to explore.