Google Calendar

Redesign

This is a one week academic project to design a new experience of the week view of Google Calendar. We have two limitations in this project: cannot add/delete elements and change colors, unless we have a strong reason to do so. Because this is a one-week project, I redesigned it just based on the feedbacks I collected from people who I interviewed.

Type

Individual Acdamic Practice

Time

Jan, 2015 (1 week)

Tools

Photoshop, Paper&Pen, Keynote, After Effects

Too many distractions

In the current Google Calendar website, there are plenty of elements which are not frequently used, or even noticed by users who I interviewed. These elements also occupy a significant amount of spaces which could be wisly used for the calendar per se.

My Redesign

Current
Redesign

Problems with current design

left side bar detail
Left Side Bar

Most of the elements in the left side bar of current design are not important features nor used frequently. They do, however, occupy a lot of spaces in this page and may distract users.

Google Calendar users, who I interviewed, merely use the mini-calendar and they don't frequently toggle nor edit their different calendars.

Base on Horizontal Attention Leans Left, People spent more than twice as much time looking at the left side of the page as they did the right.

Control Bar

The Control Bar is more frequently-used than the features in Left Side bar. Such as switching between week view and month view, or jumping to next week/month, etc.


However, when users focusing on calendar, their mouse pointer, most of time, are hovering around the middle of the calendar area. In this case, The control bar is seems a little bit far away and not very easy to reach.

Control bar detail

My rationals

Minimize distractions

I shrunk the size of side bar, so it’ll be more spaces for the calendar per se and less distractions than current design.

The mini calendar and the names of each calendar are hidden in Sidebar. Users can still click on the Hamburger icon to expand the sidebar to see them.

As most of calendars are created by users themselves and because they using them a lot to create different events, the colors of each calendar should be enough for them to recall. Beside, users can still toggle each calendars without expand the side bar by click the colored squares, which present different calendars.

I also moved most of the functions in Control bar into left sidebar to release more spaces for calendar and also to reduce the length users have to move their pointer to reach these buttons.

Maximum Calendar

Enlarged Date. It’ll be easier for users to distinguish. It’s big enough so they could just glance it to tell what is the date.

Almost a full-screen of calendar view. In this way, it has abundant spaces to show more events and their details. Also, less distractions in this screen, so users can focus on their main task more effortless.

Moving the Create button here to follow Google’s new design guide.

Maximum Calendar

More Details of Events

With decent height
large event

Events which have enough space to show up their information will be presented like this. Beginning and ending time are located at the top and bottom area to indicated the time information about the event.

Shorter duration events
small event

The space of events with shorter duration is very significant. It’d better to show more details of it, because the detail of an event is the key for users to realize them.

As the space is very precious, beginning and ending time are put into an extended area.

What if events are overlapped...

Moving mouse to hover on an overlapped event will lift it up to the front.

In this way, events which are sharing a mutual period of time do not need to sacrifice a lot of their width.

Take a look at my deliverable