How we designed the iOS Calendar app
Part 1 — the Schedule View
In November last year, we released Newton Calendar for iOS. Something the design team had been busy working on since more than a year. Even though we had a Calendar in our Android app, we wanted to relook at somethings on iOS from a new perspective. It was a fun project to work on and I learnt a lot in the process. I am happy to share — thinking, learnings and the challenges I faced and how they were tackled.
One view to rule them all
The first thing any calendar user wants to see is how their schedule looks like. It’s the place where they make mental notes on what they would be doing that day. When would they be having some spare time. Before we started off, we did some research on how this significant part was thought about by other apps. From our observations we understood that all these apps had different views for displaying the events, as explained below.
1. Day View
Pros: It’s very convenient for a user to know what time of the day they would be free. Helps them focus on one particular day. It’s easy to know what’s coming up next. Visual cue on how long the event lasts. Also shows events that overlap.
Cons: Too spacious and airy; if a user doesn’t have many events, the day view doesn't really make sense.
2. List View
Pros: Very focused and concise view for users to understand what events they have in their bucket.
Cons: Difficult to find free slots or days. Not great for creating a mental model of events in a timeline.
3. Week View & Month View
Pros: Bird’s-eye view of the events. This view is useful in quickly figuring out free days. It works best for people who don’t have a lot of events in a day.
Cons: Users have difficulty creating a mental model of today's events. Sometimes All-day events clutter up the view and make it tough to find the desired event. Not optimum for Mobile devices.
Our take on the whole ‘View’ phenomenon
We started off with comparing similar views with one another. We felt, List view and Day view were very similar. List view was nothing but Day view with empty time slots removed. But the List view had few shortcomings which Day view tackled beautifully; noticeably, free time of the day and what’s coming next. List view helped in presenting events to users neatly with no visual strain on mobile. Week view and Month view most importantly, helped users figure out, how their days look like, at one glance.
After analyzing everything, we wondered if these many views were actually necessary. Could we have just one view for our users to live instead of jumping between many. Provided it helped to achieve these objectives…
- How does my day look like?
- When is the next event and how far?
- What times of the day am I free?
- When are my free days?
- How long does the event last?
- Are there any overlaps?
- Clear visuals of the event and its details
What we brewed — Schedule View
We started off with some brainstorming sessions on how we could incorporate all these things into one view. We sketched out some solutions and tried to justify them and see if they met our goals. After few sessions sketching sprints we brewed this. Here is how it looked like in high fidelity
Once we had some high fidelity mocks we showed it around.
Some of the feedback pointed out issues like …
Scannability: They weren’t able to scan through the events and dates. Basically, it failed the squint eye test.
Focus: They weren't able to focus on one particular event well.
Demarcation: There was no clear demarcation between different dates.
Small tap area: They weren’t able to figure out that the empty days were tappable.
We realised that there was a problem in using the same visual language as that of Newton mail. In Newton mail inbox, the primary focus is on the subject and the sender whereas in the case of Calendar there were many more factors that needed attention; for example Segregation of days — when a day ended or a new started, time slots for different times of the day, free days/eventless days etc. Simply put the visual language of our email app didn't seem to fit well here.
Keeping all these issues in mind, we ventured on to find a new visual direction for the calendar app. Because it was an independent app we had the freedom to experiment and craft the best experience we could deliver. After many iterations, what our design evolved into is what you see currently in the app.
Anatomy of the Schedule view
All-day events
Any event in a calendar can be divided into two categories — timed and All-day. Timed events have a start and an end time. All day events span across day(s). There are some timed events that span across days with a start and end time. We went through a lot of events that usually fell under this category of All day events and found that they were generally something that users had to be just aware of. For eg. Birthdays, Public holidays, someone on leave etc. fell under this category. Keeping all these criteria in mind we decided to design accordingly.
We chose to show All day events together as a list because we felt they were things one needed to know about the day but didn’t require to do a lot of planning. We didn't want to treat it the way timed events were treated. This helped our users focus well on timed events.
Time slots
Day view had a major advantage over List view. It helped users to create a mental timeline of their day with ease. Users could easily know what time of the day they had some free time, whether the event was after lunch or in the evening and how far was the next event and so on. We solved these issues by introducing Time Slots.
We divided a day into 5 time slots — Morning: 4am-12pm, Afternoon: 12pm-5pm, Evening: 5pm-10pm, Night: 10pm-12am, Tonight/Tomorrow Early morning: 12am-4am. This helped users create a mental timeline of the day. Creating slots also helped them know when their event was, eg. after lunch or evening. In addition to this, we also added a tag on top of the upcoming event which indicated how far the next event was; allowing users to know how much free time they currently had in hand.
We decided to make this only happen for the current day (today) and not for all the days, just to differentiate. Basically, it gave more info about the day as you approached them. One more nifty thing we did was to open up the slots for the next day, once it was 7 pm today. It would help users see how their tomorrow looked like and plan accordingly.
Early morning or Tonight?
Events that happen to occur technically early next day but practically tonight. These events are shown tomorrow but in the Tonight/Tomorrow early morning slot and above All day events.
Eventless days
Most calendars don’t show eventless days in the list. But we felt that it’s equally important to show days without events. Firstly, to find free days and to pick them to add events. It also gives an idea how far is the next day with events is.
We received this feedback after our first major iteration of the Schedule view
- They felt the eventless days were verbose when there were a lot of eventless days and felt disconnected.
- Also, they felt that eventless days were not scannable whereas they were equally important.
- Eventless days didn’t feel tappable to them. They felt there was no affordance.
Here’s what we did.
- We created a box around the eventless day making it look as important as a day with event(s) but different enough, plus it also looked tappable. This made it less verbose and also easy for users to scan through.
- We came up with a clubbing logic, wherein we clubbed eventless days. Let’s say it’s Tue, 17 November Today. As 25 Nov is after a week from today and there aren’t any events from 25th Nov to 1st Dec they will be clubbed together. At the same time, 22nd Nov and 23rd Nov won’t be clubbed because they are within 7 days from today. This further reduced the possibility of seeing a lot of free days but it still helped users know how far is the next event day (eg. in the image above: 7 days)
Multi-day events
As I mentioned earlier, there are few events which are timed and span across days. Apple’s WWDC 17' happens to be a great example of such event. It started on June 5, 10:00 am PST and went on untill June 9, 3:30 pm PST. This is how we decided to show events like these.
After the initial feedback about what people missed in Newton calendar, as compared to other calendar apps they were accustomed to; we have started seeing that they have slowly started to like the clarity Schedule view brought.
It took us many iterations to come to this final result. We had loads of fun while designing the Schedule view. The other major part of the Calendar app is the Event add/View screen. Which is a huge departure from traditional calendar apps, including our own on Android. How did we come up with that? That’s for Part 2.
