Centralized online calendar system for students at University of Illinois at Urbana-Champaign

Project Summary

mILife is an integrated online calendar system specifically for students at the University of Illinois at Urbana-Champaign. This calendar will be pre-populated with pertinent events for the busy life of a college student using Banner, campus webtools calendars, and other resources. As well, the system has a course information section for students to have easy access to the course description, instructors, textbook, assignments, and a message board for each course. Through this pre-populated system, students will be able to easily keep track of their academic calendar, courses, study groups, and other important events all in one place.


The audience of this interface is students at University of Illinois at Urbana-Champaign. The calendar is for students who want their lives simplified and organized with one site that easily keeps track of their academic and social calendar.


There are great calendar applications (iCal, Google Calendar, Yahoo Calendar, Outlook) that currently exist that have similar functions desired for this project. Their audience is the general public. They are designed for anyone and everyone. The calendars do not have a focus user and it is up to the user to figure out how to use the calendar. The current calendars do not fit the needs of the students.

The motivations for creating this calendar interface is we wanted to make it easier for students to keep track of all the things they have to do and to easily find the information that they need. Right now, students need to go to many different websites to get information about their classes, assignments, college programs, etc. This could become very inconvenient. So this project aims to create a new calendar interface that merges many of these elements together. That way, student will have one central location that keeps tracks of all the things they need that is easier and more convenient.

Design Process

  1. Early Design
  2. Late Design
  3. Implementation and Deployment
  4. Current Version

Early Design

Paper Prototype

We had many goals and ideas for this project. We thought about creating a social/personal calendar and an academic calendar. The person calendar would allow you to share and view calendar from multiple people. Also, the academic calendar would feature your course, many different colleges, giving multiple options through layers of check boxes. Through this paper prototype, we soon learned that there were too much going on. We tried to cram many ideas into this interface and found that it hard to figure out order. The paper prototype was difficult to navigate through. The calendar was just too busy doing too much. We then proceeding to refocus our user and defined the student further.


Next, we defined the user further. What levels of information do students want? Who are their sources? Through mind maps and webs, we sketched out desires of the students. Tentatively, it was decided that there were defining the number of calendars to 6 to giving students focus options. The 6 types of calendar the ranging from the big picture of the University and filtered down to courses, assignments, and personal. This allowed the user to be organized without too many options. The user in mind was very specific to meet his individual needs first then everyone.

We then created some thumbnail sketches and translated them to Illustrator sketches (figures below). We found that paper prototype can be helpful, but spent more time cutting out stuff then on the actual idea. Since we wanted a uniformed look Illustrator allowed us to easily manipulate the interface. We used these sketches as our basis and would sketch on top to continue to define the interface.

Cognitive Walkthrough

In-Depth PDF

For our cognitive walkthrough, we focused on these four actions and thoughts:

  1. [Student] Default View and Customization
  2. [Instructor] Add Homework Assignment
  3. [Student] Add Friends to a group
  4. [Student] Add event to my social calendar

Although we had four actions, we ended up using only the first one. We decided to simply focus on the academic side of the calendar and discarded the social aspect of it. There are other social calendars, like Facebook, and by incorporating this would become another Facebook. We had also originally meant for this interface to be used for students and professors, however due to time we realized we would only be focusing on the student aspect of it. From action #1, we learned how many steps simple tasks would take and how precise and mindful we needed to be when creating the actual interface. We also realized that we had to make everything on the calendar very clear to follow and understand.

Heuristic Evaluation

In-Depth PDF

From our Heuristic Evaluation, we found that we had followed most of the ten steps in our design of this calendar. We realized that we did have some problems though. Regarding “Step 3: User Control and Freedom”, if the user was unfamiliar with calendar interfaces, it would be hard for them to easily escape places that they unexpectedly would find themselves in. However, most people are familiar with how calendars work. We do not have a back button, or a “home” button. We do have a “Today” button to help users return to today’s day in the calendar mode. Regarding “Step 6: Error Prevention”, we realized we did not have anything to prevent the user from making errors.

Late Design

Empirical Study on Calendar Interfaces


We asked participants to perform two tasks and answer a pre- and post-questionnaire (PDF) to understand the user interaction with these calendar interfaces. The goal of this research is to understand how users think regarding the existing online calendars so that we can make adjustments accordingly.


  1. Add your CS 465 class to your calendar. This class meets every Wednesday and Friday from 12:30 PM—1:45 PM. You want this class to appear every week, not just the current week. You want to make a recurring event.
  2. You have your CS 465 HW #6 due on November 5th at 10 PM. You want to set up an event (your homework assignment) with a deadline (the due date/time).


There appear to be many ways to complete one task in both Google and Yahoo!. The interfaces appear robust and possibly over-designed, offering too many choices. There is no clear or right way to perform a task. Thus, the user spends time deciding what the function of the features and then if it is the right function.

The results appear not as meaningful as intended. Clearly, these calendars have a general purpose of just entering appointments. The interfaces try to address a large group of users and the word choice is general. Since the users were trying to perform particular tasks and were looking for certain features, the users struggle with performing the tasks to their satisfaction. Therefore, the users must adopt the calendar to the best of their ability to make it into a student calendar. Thus, the interface would be more useful with a more specific purpose and user in mind.

Here are some improvements to meet the needs of students:

  • Distinction between regular class meetings and assignments.
  • Easier way to repeat events and the choice of days.
  • Better way to see display the tasks and events.

First Iteration – Functional Prototype

The first iteration was created from a combination of sketches, paper prototyping, wire frames, and the feedback from heuristic evaluation, cognitive walkthrough and our empirical study. Below are screenshots of four of the pages.

Features and Changes

  • Different Layout position. Unlike most calendars systems, this calendar is on the left side and the adding events, types of calendars, and notes is to the right. Since users read in an F-Shape, the top left corner is the first thing the user reads. It is the hot spot. The add events, types of calendar, etc are secondary elements on the calendar. Thus this interface put the primary information in the hot spot.
  • Dynamic day boxes for the month. There are some weeks, that there are no events happening. While, some days that there are many events happening. We used dynamic boxes to be efficient in the page real estate. If there are no events, there is no need to have a large empty box.
  • Dual weekly view. We find that the weekly view is helpful to have. But when planning out the week with assignments and studying, students like to look ahead to their upcoming week to compare. This dual weekly view allows you to have a better snapshot of your schedule.

Take Away Points

  • Make each type calendar a different color to help identify the types.
  • Layout arrows, tabs, and links are awkward. There needs to be more hierarchy.
  • Focus the audience to U of I students only for a personal experience. It is too similar to current calendars.
  • Suggestions on how to scrape from Banner (Talk to Scheedule?).

Implementation and Deployment

Second Iteration – Functional Interface and System

Features and Changes

  • The color scheme is changed to a white background for a cleaner and simpler look. This allowed different colors to be used to highlight various information such as different types of calendar.
  • Instead of links, this interface used tabs to create more structure and hierarchy between information.
  • This interface shows how to add events to the calendars as well as view event details.
  • Viewing events. The user can scroll through all events of the same calendar by using the arrows at the bottom of the box to easily see all their events.
  • Add events. The dark gray background for adding and viewing events helps the use focus on what task they are performing while still being able to see their calendar behind. This allows the user to stay oriented in the interface. At anytime, they may exit the screen by clinking on the bottom right of the black box or the grey overlay.


  • Allow users to create their own calendar.
  • Allow users to add events in the different types of calendars.

Interview and User Evaluation


We asked participants to perform four tasks and answer a pre- and post-questionnaire (PDF) to understand the user interaction with our calendar interface. The goal of this research is to seek opinions about the new features and whether students will continually use mILife.


  • What day is my CS 465 professor and TA office’s hours?
  • Please add the following event to your calendar: Your friend Oscar is having a Christmas Eve party on December 24th at 7pm at his house.
  • My month looks so busy. How do I view only my events? Now how do I view all my homework and exams?
  • My final project for CS 465 is due soon. How can I prepare for this project? What will I need to hand in?


In-Depth PDF

Observing the users completing each task, we realized that there were some features of our calendar that were hard to find or confusing to use. They were features that needed to be learned or pointed out. Our users seemed to be accustomed to the current calendar interfaces out there, such as Google, and tried to go about achieving a task in our interface the same way they would go about achieving it in Google. The rest of the tasks were easy to accomplish and received comments such as “Wow, this is cool! I like this.” According to these user evaluations, there appears to be many helpful features that the participants liked. Most people thought that the website contained information that would be useful for them and almost all of them said they wanted to see their assignments and schedule on one interface. Generally, most of the users felt that the language was easy to understand, the colors were acceptable and the website was well organized. Overall, the calendar was received favorably by the users and most said they would use this interface to keep track of their daily schedule.

Current Version

The live demonstration used for our presentation and evaluation is now defunct.