Managing calendar and bookings
Role: User Experience Designer
Skills: UX Design, User research
Timeline: March 2023
Research and approach
Enhancing the UI/UX of the Calendar page to cater to diverse use cases and create a more user-friendly experience.
From screen recordings, pain-points in the calendar page were detected, prompting the compilation of essential daily user tasks based on collected feedback.
Given the centrality of schedule management for users, we meticulously mapped calendar interdependencies with other features. Critical tasks encompassed filtering and previewing upcoming sessions, managing bookings, and creating new ones.
Supplementing this, insights were derived from analyzing Google Calendar, Calendly, and established UX research, informing the adoption of best practices and design patterns for potential solutions.
Key implementations involved a structured time-table view with customizable filters and date-based views, along with a concise booking preview for streamlined management, offering pivotal functions at a glance.
Problems and pain-points
Managing schedules and bookings are some of the core tasks performed by users on the platform as identified from the user personas created. Catering to two distinct use cases - big customers with multiple venues and activities, and small customers with fewer resources - necessitates a unified solution that provides seamless access to upcoming opportunities for both user groups.
User interviews were conducted with 5 customers to understand how they use Calendar on a daily basis - what key tasks do they need to accomplish. Alongside, screen recordings were observed on Atlas to get insights on user behaviour.
Filtering by activity type
Attempting to edit opportunities
Based on the screen recordings observed and user interviews conducted, following pain-points were discovered:
Preview and Edit Opportunities: All users require the ability to preview and edit their scheduled activities on the calendar page, allowing them to review and make changes to their bookings conveniently.
Advanced Filtering and Sorting: 60% of users expect advanced filtering and sorting options, enabling them to easily find activities based on type, venue, and date for better organization and planning.
Timetable-like View: 73% prefer a timetable-like view, instead of a monthly view; providing a clear display of upcoming activities and a more intuitive way to manage their schedule.
Current screen and observed problems:
Unclear Call to Action Button: The call to action button lacks clarity, leading to confusion for users on what action they should take next on the calendar page.
Excessive Empty Space for Unavailable Days: There is too much empty space displayed for days without any availability, resulting in inefficient use of screen real estate and a less visually appealing calendar layout.
Limited Viewing of Activity Types: Users are restricted to viewing only one activity type at a time on the calendar, hindering their ability to get an overview of multiple activities simultaneously.
Disorganized Filters Placement: Filters on the calendar page are scattered and not intuitively placed, making it challenging for users to access and utilize them effectively.
Observations from secondary data included event cards with high level information, integration with other calendars, reminders and notifications, easy way to add, edit and/or delete bookings, and customise views by time period or layout. Based on the user pain-points and analysing best UX practices, following solutions were recommended for Played:
Solutions
Product wireframes
Schedule View for Space Optimization: Implemented a schedule view to efficiently use screen space, reducing excessive empty spaces on days with no availability and providing a more visually compact and appealing calendar layout.
Improved CTA Positioning based on Scanning Patterns: Positioned the call-to-action button in accordance with users' natural scanning patterns, following the Z or F pattern, making it easily accessible for users to take necessary actions.
Dedicated Filter Section with Checkbox Activity Selection: Created a dedicated section for filters, allowing users to easily filter data and provided the ability to select different activity types using checkboxes, offering customizable views based on activity types.
Clear Activity Cards with High-Level Information: Designed clear and concise activity cards presenting high-level information about activities, enabling users to quickly grasp essential details without overwhelming them with excessive content.
Customised view: Implemented the ability for users to customize the calendar view by selecting specific date ranges, enabling them to focus on a desired timeframe and tailor the displayed activities accordingly.
Preview Opportunity: The Opportunity preview slide-out was thoughtfully designed by prioritizing the information hierarchy and aligning it with users' natural scanning patterns, such as the Z or F pattern. The context of booking was placed at the top for quick visibility, followed by key analytics and the prominent manage button for seamless interaction. Finally, a well-structured table of customers booked in was presented, providing high-level information like contact details and amount paid for a comprehensive yet digestible overview.
Prototype
Filtering by activity type
Managing bookings