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.
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.
our approach and process
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.
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
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.
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.