Hey there! For the best experience, I recommend viewing this site on a desktop. You'll get to explore all the features and designs as intended. See you on the big screen!
Apple Calendar Redesign
Making Your Calendar Seamless, Personalized, and Effortlessly You
Voice Actor
William Olson
Context
My interaction design class tasked me with deconstructing and improving a daily interaction. Relying heavily on my phone's calendar app to stay organized, I chose to explore and enhance its interface.
Type
Foundations in Design
Individual Project
Timeframe
October 2024 — 2 Weeks
Disciplines
Interface Redesign
Video Prototype
Tools
After Effects
Figma
Photoshop
Premiere Pro
Product
Your Day, Simplified. Your Calendar, Amplified
The Redesigned Calendar Video Prototype Showcase
Problems
High Click Count for Event Creation
Setting up events requires navigating in and out of multiple sections, making the proces tedious and time-consuming.
Poor Reachability
Important features and buttons are hard to reach, making single-handed use challenging.
Bland and Impersonal Design
The grey, colorless interface lacks personality and customization, making it feel like a generic tool rather than a personalized calendar.
Lack of Visual Hierarchy
Important events, like birthdays, are easy to overlook due to poor hierarchy, leading to missed reminders.
Quick Add
The Apple Calendar desktop version includes a quick add feature, but the mobile version does not.
The event is automatically added with a relevant emoji and calendar type, plus optional buttons for alert and pin.
Bland and Impersonal Design
The grey, colorless interface lacks personality and customization, making it feel like a generic tool rather than a personalized calendar.
Lack of
Visual Hierarchy
Important events, like birthdays, are easy to overlook due to poor hierarchy, leading to missed reminders.
WireFrames
Personalized Interface
The redesigned homepage introduces vibrant colors and customizable elements, making your calendar feel uniquely yours from the very first screen.
After deconstructing the app and identifying the main problems and flows to redesign, I began wireframing. My priority goals at this stage were to improve the layout and streamline the flow.
Initial Handsketch
Digital Homepage
Event Creation Flow
Iterations
Animation Prototype Workflow
I took a rather unconventional approach compared to my classmates in showcasing my product. Instead of following a traditional method, I created a stop-motion-style animation in Figma and then transferred it to Premiere Pro for final touches. This allowed me to refine the timing, pacing, and add sound for a polished presentation.
This unique method taught me a great deal about Figma's animation capabilities and effective techniques for conveying a product visually.
Stills Playground
Improved Reachability
Important features and buttons are now placed at the bottom of the screen, closer to the thumb, making it easier to reach for.
Avaliablity and Drag
Important Note:
After completing this project, I discovered that the iPhone app does, in fact, include an availability and drag-to-add-event feature.
Despite using the app for years, I never noticed this feature. This highlights a key usability gap: features that are not easily discoverable might as well not exist for many users.
The Apple Calendar desktop version includes this feature, which I’ve brought to mobile for those times when you want to check your availability before adding an event. For instance, if someone invites you to something, you can quickly confirm if you’re free. This feature also skips a few steps in the event creation process.
New Features
Pinned
I often miss birthdays or important events because they blend in with my routine calendar. Pinned events add a new level of hierarchy and personalization.
Next Event Countdown
A simple yet potentially useful feature for when you're curious about exactly how much time you have until your next event.
Personalized Event Creation Templates
Tapping the plus button opens the standard event form and holding it brings up customizable templates for quick event creation.
Apple Calendar Redesign
Making Your Calendar Seamless, Personalized, and Effortlessly You.
Timeline
October 2024
2 Weeks
Type
Individual Class Project
Tools
Figma
Premiere Pro
After Effects
Photoshop
Disciplines
Interface Redesign
Video Prototype
Credit
Voice Actor: William Olson
Streamlined Event Creation
Event creation now follows a seamless, chronological flow with options like date and time placed above your keyboard. The redesign detects your inputs, adding matching emojis or icons to personalize your experience.
Next Steps
Explore AI
During a studio session, I received the idea to implement an AI companion to help plan tasks for specific events. For example, if I had a job fair, the AI could find a time in my schedule to print resumes, factoring in time, location, and available places.
Update Widgets
Update widgets to utilize new features like pinned events and the countdown to the next event. This would provide users with quick, at-a-glance access to important information directly from their home screen.
Enable Cross-App Event Detection
What if we introduced a function that detects and integrates events from other apps seamlessly? For example, when a text or email includes event details, the calendar app could automatically suggest adding it to your schedule.
Goal
Reimagine the Apple Calendar app by improving usability, comfort, and personalization
—making it uniquely yours.
Reflection
Animation takes Patience and Time
Diving into animation for the first time, taught me the importance of patience and attention to detail. As my first attempt at creating animations to showcase a redesign, I explored ways to bring the features to life through video.
First Redesign and Animation Project
What if we introduced a function that detects and integrates events from other apps seamlessly? For example, when a text or email includes event details, the calendar app could automatically suggest adding it to your schedule.
Product
