Calendars are messy-events become lines of text that show
no indication of importance and significant events get lost
with everyday activities. So how do we avoid missing
those deadlines and important dates? 

Timeline was created to give a visual representation of one's daily commitments. Manage your time quickly and effectively by visualizing events by priority through this mobile application. 

During the fall quarter of 2014, I worked on a mobile application with my peers as part of a directed group study course under Professor Jim Hollan. The application is an android app called Timeline that displays a users’ schedule in a vertical timeline view. Through the duration of this group project, I have gained insight to the cognitive aspect of processing time in a vertical manner. I have also expanded my design skills through creating several design iterations through applications such as Adobe Photoshop, InDesign, and Illustrator. I served as the Visual/Interface Designer for the project and created five different design prototypes before the final product. Each iteration was made to reflect the needs of the user and ultimately evolved into  the final product. 

September 2014– December 2014
Cognitive Science 198: Directed Group Study Class

under the supervision of Professor Jim Hollan
Android Application
User Interface + Presentation Designer, Conceptualizer
Kaitlin Garriott, Nick Gibson, Crystal Kwok
and Michael Lee

Illustrator, InDesign, Photoshop, CSS, HTML
High-Fidelity Prototypes,  
Final Presentation 


With each design iteration there was a slight change in the colors used for the background. We played around with different background colors to create an aesthetically pleasing interface by using a turquoise/teal background color to contrast with the white font color (prototypes 2-4). However, when we implemented the color to our working prototype the font was faint in contrast to the background color. From there we decided to use a white background with a blue font for our final prototype. The text and shapes were much easier to view with a white background compared to that of a colored background. In addition to playing around with the different background colors, we also explored the idea of using color as an indication of priority and importance . In prototype 3, red signified the highest priority, green signified medium priority, and blue signified the lowest prioritized event. However, after much discussion, we decided that changing the colors of events did not have a significant enough effect and decided to signify priority by the size of the circle icon. In the final design we used two colors: dark blue for text and icons, and red for the current time display.

One of the biggest issues we faced was deciding to display time in a fixed or relative manner. The benefits of displaying time in a fixed manner is that the time in between events would be accurately represented and the duration of events would be easier to visualize. However, the con of having fixed time is that there would be sections of empty space in between events (as seen in prototype 2). If there was a day with only one event, that particular event would be displayed and then the rest of the day would be blank. With fixed time there would be a lot of unused space on the application. From that conclusion, our group decided to play with the idea of relative time. The pros of relative time are that there would be no empty screen or large amounts of blank space on the application. We also thought about displaying the duration of the event by extending the ‘tails’ of the circle icons (as seen in prototype 3). As a group we also discussed the issue of how many events should be displayed on the screen at one time. We set a maximum of five events on the screen at once to avoid overcrowding of events on the screen. Since there would be five events displayed at a time we realize that some days might end earlier than others. With that in mind, we came up with the idea to represent time breaks of more than five hours with a zigzag line (as seen on the fourth prototype). We also implemented a red line to indicate the current time. 

The most important aspect of Timeline was indicating the priority of events. In prototypes 1-3, events were prioritized according to text size. Low priority events were set to a font-size of 10 while high priority events were set to a font size of 16. We realized that is was very difficult to decipher between events with different font sizes so our next idea was to use circle icons as a priority indicator. As a group, we believed that using circle icons was a cleaner and more intuitive way to visualize important events. In the final prototype we decided to fill in the circle symbol to make the icon more apparent. 

We wanted to be able to display the end time for each event (as seen in our final prototype). The bolded time would be the start time of the event and the regular font indicated the end of the event. However, when we tried to implement the feature in our working prototype the screen became too cluttered. The end time of events would be dependent on the ‘tails’ of the circle icons. The main objective of Timeline is to indicate the most important events in one’s schedule therefore, emphasizing the end time of events was not a priority for our application.