Deliver a different message on the time we spend with a new calendar app
How it got started
One day I was reading an article on award winning Japanese stationery and I saw this beautifully designed calendar shown on the right.
Pulling out the thread in each day as the day passes by, what a delicate and meaningfully designed interaction, beautiful but a little sad at the same time. This got me thinking, why do we always think of the time passed as gone and lost? There always seems to be a slight sense of sorrow in our perception of the passing of time. Is there a more positive way to look at it? How can I incorporate it in the design of a calendar?
Initial Attempt
I started brainstorming. I wanted to create a sense of fulfillment when you acknowledge that the day is over at the end of each day thinking about what you did. And then I thought:
Fulfillment = filling in something empty with something you have
Filling ? Painting? COLORS!
Colors, emotions, events.
And that’s how I decided to create a calendar app that delivers a sense of fulfillment by allowing people to fill in their days with colors related to how they felt about the activities they did during the day. So instead of pulling out a thread and leaving the days empty, you will add meaning to the originally empty and meaningless day with your colors.
User study on color visualization on daily activities
By this point, I have a vague idea of what I wanted to do:
Make a calendar where people can create some color visualization of how they spent their day and how they felt about the day, which hopefully help induce some positivity and fulfillment as each day concludes.
However, I have very little idea of the connections between how people think about their daily events, feelings, and colors, and if what I have in mind actually make people feel how I imagine them to feel. In order to have a better understanding of what I can work with, I designed a little user experiment.
I asked 5 of my friends (with different cultural and work backgrounds) to help me with a little experiment. I asked each of them to take a piece of paper. On one side of the paper, they will write down what they did during the day using a different color for each event. On the other side of the paper, draw something or simply color the paper using the colors used for all the events on the other side as a representation of the day.
I got some very interesting findings from this experiment.
Everyone wrote down the events and did the drawings in chronological order.
Amount of color people use for the drawing is closely associated with the amount of time spent on the event.
The more rational friends picked their colors based on visual information (eg. “I had scrambled eggs for breakfast so I used yellow for breakfast”)
The more emotional friends picked their colors based on their feelings about certain events and certain colors (eg. “I had to meet up with a friend and listen to her rant, which made me feel stressed. I think red is a stressful color, so I used red for that event, and drew that part kind of far away from my happy events (in green) for my visualization”)
People have pretty positive feedback about the process of doing the exercise and said it helped them review what they did during the day and it was quite fun.
People who picked colors based on feelings said it helped them reflect on how they felt for all the events and the day in general.
Some drawings from the user study
User survey on use of calendar
After doing some fun experiments to explore how people visualize their daily events using colors, I went ahead with another small survey with 15 people to find out what kind of calendar tools people use right now and what the most commonly used features are.
Below are my findings:
The most popular calendar tools are iCal for all iPhone or Mac users and Google Calendar. Some people also use Outlook calendar for work.
People mostly use calendar to keep track of upcoming events, vacations, meetings etc.
Most people have a shared calendar but usually for work purposes.
Most people use the native calendar on their phone for personal purposes and use another calendar tool for work (eg iCal for personal, shared Google calendar for work).
Half of the people said they still have a paper calendar and they write or draw on their paper calendar more than they do for calendar apps.
People rarely look back at past calendar events unless they need to remember something.
Define the scope
With the information gathered from my user study, I was able to decide to focus on the following 2 things for this calendar app.
Keep the basic feature of a calendar where users can add events and keep track
Allow users to fill in the events with colors and visualize their days in colors
I decided not to touch the shared calendar aspect of the calendar tool because I want to focus more on the personal aspect of a calendar. Basically I want to build an app version of the traditional paper calendar and add the coloring part to it, so I want to keep things simple.
Getting my hands dirty
After gathering some information from users and deciding what I want to focus on, I started sketching out some screens and interactions to help me clarify the features and workflow.
Drawing some key screens and flows out on paper helped me think more clearly about interactions that are happening and the user workflow. One dilemma I ran into when I was making the sketches was whether I want the events to be color coded when they are first created/added to the calendar or to have the events with no color at first and ask the users to “review” the event with colors afterward. With the former option, users make the color decisions beforehand, and the “filling in blank days with colors” action happens automatically when the event is completed. In certain degree, it’s less hassle for the users. It makes the app work more similarly as most existing calendar apps with color visualization and the colors are more likely to represent the category of the events; with the latter option, users choose the colors afterwards, making the app function more like a journal app in the form of calendar. Because the very reason of me starting this project was to create a sense of fulfillment, I decided to go with the latter, giving the app a more reflective purpose, although it does require a little bit more effort from the users.
Design sketches
Another design decision that I had to make was, in the default monthly view of the calendar, should the day show all the colors that the user has chosen, which means there will be 30 mini color visualizations in each month when you open the app, or each day can have its own color in the month view and when you go into the day, it shows all the colors for that day. I decided to go with the latter one, for that it allows the users to review both the day and the events that happened during the day independently of each other. Whether they have any events for that day, they can always choose a color for the day. When they do have events for that day, reviewing both the events and the day allow them to have a second layer of reflections. For example, I see that my Sunday was yellow, which usually means it was a happy day for me, and when I click in to see the details for that day, I saw that I have a ‘blue’ lunch event with a friend because she cancelled on me last minute, but I have a nice walk in the park in the afternoon that I marked ’yellow’ and a romantic dinner date with my husband which I marked ‘pink’. Having a color for the day and other colors within it helps me remember my feelings for the day better and it also adds a little more sophistication to my color journal.
Since this was the decision, I need to make sure that I have a way for users to color each of their events as well as each of their days.
Through this sketching process, I was able to narrow down on some more refined key features:
Adding events to calendar
Filling in events with colors afterward
Review each day with colors
Overall visualization of calendar days with colors
The Design
After better understanding the workflow and key features from making the sketches, I went on to create a hi-fi prototype for the app.
Adding an event.
The calendar’s default view is monthly view and I made it similar to most physical calendars with a blank space underneath to show what’s happening today. After you add an event, you will see the event and the time when ’it’s happening in the blank space. This is similar to how things will look when you write events down on a physical calendar. For the overall UI, I chose grey and white as the base color with some small accents of colors for the call to action buttons. I want the base of the calendar to be very plain in order to emphasize the colored days for the sense of fulfillment.
Fill in events with colors
As the day passes, a color button will appear after the specified event time has passed and you can press the color button to see a series of preset colors from a color palette or add a new color. After a color is selected, a line of the color appears at the bottom of the calendar to indicate the colors added for today’s event.
Color and view the day
When all the events are done, you will be prompted to choose a color to fill you day. When a color is picked for the day, the day on the calendar will change from gray to the chosen color. You can also view the day in details and this will lead you to a page that shows your events with the corresponding colors. You also have the option to add a note for that day.
Onboarding
Through the onboarding flow, I want to communicate the purpose of the app and also get some initial settings out of the way. The most important thing is to select a set of colors that the user likes to use for coloring. Another thing I added in the onboarding step is for users to pick a default color to fill in the day with in case they forget to do that manually. This way, the app can keep the days colored as you live through them.
User feedback
I showed the design to the people who did the user study for me and got some pretty positive feedback. They all say that they would like to try this when it’s developed into a real app. They like how simple it is.
“It is very straightforward.”
“I don’t really need to learn to use it and it’s pretty awesome to see all the past days in colors.”
People also do find the filling in the days you spent with your own color feature quite cheerful and satisfying, which makes me very happy.
“It’s a very satisfying feeling to see all the past days in my calendar filled with colors.”
“I love seeing all the colors! It’s hard to explain, but they make me happy. A sense of fulfillment, I guess.”
People also expressed that they like two layers of coloring. You have a color for the day and when you go in, you see more colors.
“I think it will definitely help me remember how I spend time better. When I see oh this day is red among all the other green days and I can go in and see all my events in different colors to remember why I colored that day red.”
The default color to fill in the day with also proved to be a good idea because a lot of the times people might forget to fill in the color and if the days are just left gray it could be discouraging for the users to continue.
“I like this idea of choosing a default color to fill in the day if I forget to manually set one, because I’m definitely going to forget to do that sometimes.”
There is definitely a lot of room for improvement as well. A few people mentioned that as much as they like how simple the app is, they would also like to see more personalized options for the color visualization and ways to record how they spend the day.
“It might be nice to be able to choose different ways to see all my event colors, like not just color blocks, some different kind of visualization that feels more personal would be nice.”
“Sometimes there are images from the day that I would like to remember. I think it would be cool to add it in my calendar”
Reflections
Overall I am pretty happy with the result of this fun design project. I’m glad that I was able to go from a small inspiration to carrying out a full study and experiment on my idea. From the user feedback, I think I can say that I achieved the goal of delivering a different message on the time we spend and creating a sense of fulfillment with a small twist on a calendar app. I think I set an realistic goal and explored around that, which was nice because it gave me enough room to be creative but at the same time, the scope is not too big to add overwhelming complexity. Doing the user study with friends was very fun and it helped me learn a bit more about how people think and use colors to represent time they spend. Looking back now, I wish I spent some time researching different types of visualization that could be used in the app. I also wish I studied more on animations because I think some subtle and sleek animations will help bring more light to the interactions in the app. Another thing that would be nice to explore would be the source of colors that people pick. Like I said in the user study section, some people choose their colors from what they see and some people choose colors depending on how they feel. I find this to be quite intriguing and would love to find a way to incorporate that into the app. For the next iteration, I want to focus on these three things and find ways to improve the app, and hopefully I will have an update coming up soon.