Improving Mobile Calendar Usability

The Problem

As Agency of Record for Goodwill of Central Arizona and Northern, we work on wide variety of projects for this client, including all digital marketing, UX and web development.

During the design phase of the new site that we were building for Goodwill, we identified a variety of potential usability issues. This case study focuses on one particular issue: usability of the events calendar feed on mobile devices.

To give you some background, the events calendar, which was to live on the homepage and many internal pages, shows the events happening this week at Goodwill. The key phrase to focus on here is “this week.” Unlike some calendars that allow you to scroll endlessly, we’ve limited the calendar to the current week, with a button underneath the calendar feed to view the full calendar. The mockup below shows how the feed was to look on desktops, laptops, and larger screen sizes. You can see that it clearly states that the calendar only shows events for seven days, i.e. “this week.”

Possible Confusion on Mobile

Once our UX team and interactive designers got into the mobile mockups, we came to the realization (after many conversations, differing opinions, and the constant need to continuously push each other further) that there was reason to be concerned with the idea that some mobile users could be confused by the calendar feed functionality.

As you can see in the mobile mockup, because we’re working with so much less space, there is the possibility that our users could overlook the “this week” copy in the headline or never see the “View Full Calendar” button underneath the feed, depending on how far they scroll down on mobile or whether they even see it because it is located a distance away from the left and right arrows on either side of the word “Today.” Part of our concern was driven by the concept of “residual fixation.” In UX, residual fixation refers to the idea that related information should occur in close proximity to where a person’s eyes are already focused.

The Differences Between Desktop and Mobile

The major difference between the calendar on desktop and the calendar on mobile is that on desktop, users can easily see all seven days of the week without requiring further action. On mobile, due to limited space, we only showing one day at a time. To provide our mobile users with the same information as desktop users, we added in functionality allowing them to scroll through the feed (by clicking the arrow(s), or swiping on their touch screen) to see the entire week day by day as they click/swipe. Because we only show one day at a time, there is the possibility that our users would overlook the “this week!” copy and the “View Full Calendar” button and simply assume the feed shows an endless number of days. Due to the difference in functionality on mobile and desktop, we run into the possibility of users trying to endlessly scroll through the feed on mobile looking for events scheduled a few weeks out. The problem here is that the users would never find what they were looking for because the feed would continue to rotate through the same seven days on the calendar, never showing them anything farther out than the current week. Or alternatively, the user wouldn’t even want to try to use the calendar because they might think that the only way to get to something 27 days away for example was to click/swipe 27 times.

Instead of ignoring this problem and “hoping for the best” or “waiting to see what happens,” our instinct was to test it and see if our concerns were even valid.

The Results

After a few days, we had our results. In the image, you can see there is a green dot for every place a user clicked. For this test, users were only allowed to click once.

Mobile Homepage Mockup with Click Test Heatmap Results

Out of our 21 participants, one participant clicked the main menu at the top of the page. Clicking here would open the menu and allow users to navigate to the full calendar, so in our eyes, this was a successful click. Three participants clicked on the calendar feed, which would never get them to the right place. The other 17 participants clicked on the “View Full Calendar” button, which is what we expected.

At first glance, one might think that the result should make one feel all warm and fuzzy inside—most of the participants did what we hoped that they’d do, right? But in reality, 14.3% of our users didn’t do what we wanted, or expected, them to do. Running a confidence interval on the proportion of 14.3% and the sample size of n=21, highlighted the fact that this was a serious concern, as the 90% confidence interval ran from 0% to 29%.

While 85.7% of our users clicked somewhere on the page that would successfully take them to the correct information, we couldn’t get past the 14.3% that didn’t. We put our heads together and came to a solution that would allow all 100% of the actions performed in the click test to result in a success.