Life in a Page

A minimalist online calendar that visualizes your life stories and memories in one page.

At a Glance

Duration

3 Months

Team

Yifei Liu, Nihar Dalmia, Robin Oh

My Role

UX/UI Research & Design, Animation, Front-end Development

The Challenge

"It kind of feels like our lives are made up of a countless number of weeks. But there they are—fully countable—staring you in the face." — Tim Urban, waitbutwhy.com

Life is short and finite. It takes 4680 weeks to turn a newborn into a 90-year-old. Sometimes people need to take a higher-level view of their life paths to reflect on their lives and be more conscious about time.

The Solution

We designed an online calendar that helps people visualize their lives week by week and present it in a grid. Each week is symbolized by a little dot, and each dot can be color coded. A note can be added to each week. People can capture their life events, milestones, thoughts, or memories and see a big picture of their life stories.

Design Process

Market Research

Our goal was to help people tell their life stories in a simply and visually compelling way. There are many journaling and calendar apps and websites in the market that help people tracking their life events and activities. Our research showed that most calendar apps are about capturing moments in a short life period, typically on a monthly or yearly basis. Most apps only provide standard yearly calendar, users cannot customize their calendars. There are more mobile apps than web apps, for example, Life Calendar is an mobile app that is visualizing life in weeks, available on iOS devices.

Design Approach

Based on the market research, we decided to take a minimalist design approach to keep the app simple and easy to use. A large device screen would be necessary in order to present a big picture of one's life week by week, thus we decided to develop a website app rather than a moible app.

User Flow & Web Features

We defined user flows and brainstormed possible web features using whiteboards and post-it notes. We prioritized three features in the first phase of website development:

  • Represent the weeks of your life
  • Highlight chapters of life
  • Mark major life milestones

Life in a page user flow
Life in a page user flow
We used whiteboards and post-it notes to define user flow and key features.
Prototyping

We used Sketch to design a low-fidelity prototype.

Low-fidelity Prototype
User Testing

We tested the prototype with several users and we found out that people liked the overall black&white look on the main calendar page. Once they added their data points to the grid, the grayscale page would become colorful and vivid. This users' feedback informed the final design.

Final Design

Onboarding

Colorful JavaScript animation to encourage users to try out the app.

Life Calendar

A minimalist design - each dot symbolizes a week, while the grid symbolizes a 90-year life.

Reflection

Tools & Methods
  • Market Research
  • Wireframes & User Flow
  • Low-fidelity & high-fidelity Prototyping
  • User Testing
  • Adobe Illustrator + Adobe Photoshop + Sketch + Google Slides
  • HTML, CSS, jQuery, Moment.js, Materialize, Flask, TweenMax.js, Facebook API
Recognition

This is a very compelling application. This platform provides for a number of features you can add. - Steven Weber, Professor of Behavioral Economics, UC Berkeley