TIMELINE

mobile application that visualizes people's personal events better based on priority
research with Jim Hollan

DURATION: Sept 2014 - Dec 2014

ROLE: UX / UI Designer

TOOLS: Contextual Inquiry, Ethnographic Studies, Adobe Creative Suite, Storyboarding, Wireframing, Prototyping

COLLABORATORS: Daniel Lenzen, Kaitlin Garriott, Nick Gibson, Michael Lee, Melinda Chu

DELIVERABLES:  Final Presentation

In the traditional calendar view, our cognitive efforts are expended equally across both a job interview and a psychology class, even though we need to spend more time and attention preparing for the job interview.

How can we see what's important and take higher priority in our lives?

We believe that Timeline will help users manage their time better and make better decisions about what to pay attention to next by quickly knowing the priority of their events. As a better visualizer of the importance of events, the Timeline serves as quicker and better reminders of the important events in users' lives.

the challenge

How Can I see What's Important in My Life?



our approach and process

User Research

We testing the differences between the traditional calendar and Timeline by having users complete certain tasks after viewing one or the other. The dependent variables were time (how long each task took) and memory (what they remembered).

1) People remembered the important events more on Timeline

Our participants were more likely to name the important events when we tested them on what events they remembered from either Timeline or the traditional calendar.

2) Scheduling events took longer on Timeline

Due to the design of Timeline and our focus on importance, it was more difficult for the users to picture when to schedule an event. We found this to be the main downside to Timeline vs. the traditional mobile calendar, but we feel user research had led us to see a true need for seeing importance.


Wireframes + Prototypes: Iterations

Our team created wireframes and prototypes to discuss as a team how best to represent what's important visually. (See in the above section for pictures of wireframes)

*prototypes done by Melinda Chu


User Needs + Design Solutions

1) Large empty spaces leave users confused

RELATIVE TIME when there are no events

A huge pain point with mobile calendars is that large empty spaces when there are no events often leave the user confused about what's going on. Our solution is to use RELATIVE TIME (see below for an example), where every hour may not be represented by a set amount of space, and not every hour is shown.
- time breaks of 8 hours or more will be indicated by a zigzag line or a block with the date for new days
- max 5 events on the screen at a time to keep from information overload

2) Users need to easily and quickly see how much of their time they are free or busy

FIXED TIME in between events

Our solution was to use FIXED TIME between events, where the set amount of space was determined by duration even though we included relative time for large empty spaces. Every hour is shown when there is fixed time, and users can accurately visualize the duration of events and time in between.

3) Users need to visualizing duration of events to easily see how long an event is for scheduling

colored tails to show duration

Our solution was to use a colored tailed for each event to give a gist of how long each event is, with less emphasis on the end time because the focus of our product is visualizing what's important.

4) Visualizing what's important in an easy and fast way that will make a difference for the users

uses SIZE to indicate importance

We decided to indicate importance with SIZE, so the user would see this event first. We attempted to use color to show importance, but it was not as good an indicator, and it made the design more convoluted.

** Relative vs. Fixed Time



the outcome

  • priority will be indicated by the size of the circle and the size of the text.

  • clean and simple interface with only 2 colors.

  • duration of an event will be indicated by the middle of a circle with an extended tail, along with the start time (and possibly end time, depending on the screen size).

  • current time will be displayed by a red line.

  • combination between relative and fixed time ::
    • max 5 events on the screen at at time.
    • days will start with the first event.
    • time breaks of 8 hours or more will be indicated by a zigzag line or a block with the date if it is a new day.

Deep Exploration in HCI topic and Feedback from Great Minds

This was a great way to further explore the subject of time and information visualization in the Cognitive Science realm. In the end, we presented our final presentation to Don Norman, Jim Hollan, and Scott Klemmer, and we got feedback on what each of them thought of this new idea. It was also great to see the intricacies with long term projects, and designing for all entire user flow and working together with a team on these.

  back to work