Calendar UI đź—“(Case Study)

Harshit Tewatia
3 min readFeb 23, 2024

--

Task

Design a calendar application with Google Calendar-like functionality including group and individual user filters, call counts, and a call scheduling screen.

Research

To fulfill the requirements, conducted thorough competitive research focused on Google Calendar’s functionality, including its meeting scheduling mechanism, intuitive filtering features for groups and users, and seamless transition between daily, weekly, and monthly views.

User Persona

Sarah:

Sarah is a freelance consultant who works with multiple clients across various time zones. She juggles multiple projects simultaneously and relies heavily on her calendar to stay organized. Sarah often schedules calls with clients and collaborators and needs a calendar application that can efficiently manage her busy schedule.\

Demographics:

  • Age: 32
  • Gender: Female
  • Occupation: Freelance Consultant
  • Education: Bachelor’s Degree in Business Administration
  • Location: Urban area, New York City

Goals and Needs:

  • Efficient Organization: Sarah needs a calendar application that can effectively manage her schedule with features like group and individual user filters to differentiate between personal appointments and work-related meetings.
  • Time Zone Management: As Sarah works with clients and collaborators from different time zones, she requires a calendar application that can seamlessly handle time zone conversions and scheduling conflicts.
  • Call Tracking: Sarah frequently conducts calls with clients and collaborators. She desires a calendar application that can track the number of calls scheduled.

Moodboard

Wireframe

Final Design

1. There’s a feature called Schedule Call (CTA) where users can plan their calls with clients.

2. The list of calls for today is placed prominently above the Schedule Call section, making it easy for users to see how many calls they have scheduled for the day. If they add a new call, it updates in real-time.

3. Users can easily switch between viewing their calls for the day, week, month, or year. Arrows are provided to navigate between months when in monthly mode or to move to different time periods in other modes.

4. When users land on this screen, they can quickly see all their scheduled calls.

5. To differentiate between calls from different groups and individual users, a filter is provided on the left side. Users can check or uncheck the boxes to show or hide meetings from specific groups or users.

6. There’s also an option to create new groups by clicking on the plus icon in the group section. Users simply need to add a title for the group and specify the number of guests.

1. When you click on “Schedule Call” (CTA), a pop-up window appears.

2. In this window, you can enter the event name, select the date, choose a suitable time, and write the agenda for the meeting.

3. Additionally, when you specify the number of participants, you have the option to either select existing groups to include the event in that group or search for individual users you want to invite to the call.

4. Finally, there’s a “Save” button to confirm and save your scheduled call.

Behance: https://www.behance.net/harshittewatia

Thank You

--

--

Harshit Tewatia
Harshit Tewatia

Written by Harshit Tewatia

Product Designer | Figma | User Experience | User Interface | Prototyping | Interaction Designer

No responses yet