Bringing Material Design to Today Calendar
Brief: In Summer 2014, when I accepted the opportunity to reimagine visual design for Today Calendar, the app already had a loyal user base and a polished, streamlined interface. Bringing the app into the landscape of new and emerging design patterns in Android required a thoughtful approach. At the forefront were user-centered questions about navigation, ease of use, and smart features.
With these three tenets in mind, developer Jack Underwood and I built a new Today Calendar - customized imagery for appointments, five unique and helpful calendar views, and straightforward navigation launched with the "phase 1" redesign in September 2014 after successful testing with a group of around 10,000 beta testers.
After the initial launch, we continued iteration on additional polish and features.
Before & After
The basis for Today's code came from Google's AOSP Calendar app. The calendar originally used a spinner in the app's action bar to navigate between screens, but with the emergence of new, cleaner navigation drawers, we felt the first phase of the redesign would be a good opportunity to put Today's primary destinations into a quick, obvious drawer that freed up more space in the app's new toolbar.
The "today" icon was also revised, transforming into a static icon that would take users to the current date in any view. The previous implementation had apparent issues with rendering the date font correctly, and the extra information was not overwhelmingly useful or helpful from a user perspective. Additionally, the calendar toggles were put into the navigation drawer, eliminating the need for an overflow icon, which was replaced by search.
Ease of use
It goes without saying that "ease of use" is important in UI/UX design. The introduction of material design at Google I/O 2014 gave us a great set of tools and inspirational reference points to rethink Today Calendar's interaction models.
The new design philosophy informed many of our ideas about key actions, visual dynamics, and making the app behave in a way that users could predict, understand, and feel good about.
We dropped a quick creation FAB into all five main calendar views, cleaned up the event creation screen, and associated event-specific imagery with the user's progress in the day screen. Calendar colors inform colors of relevant iconography, and shortcuts to an event's relevant actions accompany the event in the agenda view. Users are also given control over things like week view, choosing between a 3- 5- or 7-day layout.
Besides smoothing out the user's experience of a calendar's predicted functions, we wanted to take the time to create new and exciting functionality that looked great, worked well, and - most importantly - helped users.
The feature that has gotten the most attention, which launched with Today's phase 1 redesign in September, is customized event imagery. In the detail screen for each event, we provide custom illustrations that make the event screen more comfortable, more contextually relevant, and more delightful for users. At present we operate with a base of nearly 200 key words/phrases that will trigger a custom illustration, and that collection is growing all the time. It's a small touch, but it's done a lot to give Today even more personality, and to give users a treat almost every day.
We also came up with a feature I've affectionately referred to as Busybody. The simple element, made of a single line of text below the date in Today's agenda and split view, tells users how busy their day is, both qualitatively (comparing to the user's average routine) and quantitatively with number of hours booked. Before users glance through a list of appointments, they can see whether they'll need to work through lunch or if they've got time for that quick coffee break.
Finally, we've added actionable icons into Today's agenda and split views, appearing next to events so users can take quick common actions without entering the details screen.
Below are a few custom illustrations automatically selected for specific event categories. You can see even more illustrations in the app!