Problem statement
How might we improve UI/UX of Calendar page so its experience is better for different use cases?
Role: User Experience Designer
Skills: UX Design, User research
Timeline: March 2023
Research and approach
Validated Pain-Points via Screen Recordings: Observed screen recordings to identify user pain-points and usability issues with the current calendar page.
Identified Day-to-Day Calendar Tasks: Compiled a list of common day-to-day tasks performed by users on their calendars.
Competitive Analysis of Calendar Products: Conducted a competitive analysis of calendar and scheduling services like Google Calendar and Calendly to identify best practices and design patterns.
Problems and pain-points
Managing schedules and bookings are some of the core tasks performed by users on the platform. 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.
Preview and Edit Opportunities: 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: 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: Instead of a monthly view, users prefer a timetable-like 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.
Solutions
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