CalendarWeekView.png
CalendarWeekView.png
CalendarWeekView.png
CalendarWeekView.png
Role: Lead Designer
Role: Lead Designer
Role: Lead Designer
Calendar for Maintenance Tasks
Calendar for Maintenance Tasks
Calendar for Maintenance Tasks
Date: Launched Q3 2024
Date: Launched Q3 2024
Date: Launched Q3 2024
Calendar View
Calendar View
Calendar View
Problem
Problem
Problem
Problem
Maintenance teams at SmartRent had no visual way to plan their work, just a list view. It made it hard to coordinate, schedule fairly, or see what was slipping through the cracks.
Maintenance teams at SmartRent had no visual way to plan their work, just a list view. It made it hard to coordinate, schedule fairly, or see what was slipping through the cracks.
Maintenance teams at SmartRent had no visual way to plan their work, just a list view. It made it hard to coordinate, schedule fairly, or see what was slipping through the cracks.
Goal
Goal
Goal
Goal
Design an intuitive calendar experience tailored to the way property managers and techs actually work.
Design an intuitive calendar experience tailored to the way property managers and techs actually work.
Design an intuitive calendar experience tailored to the way property managers and techs actually work.
Impact
Impact
Impact
Impact
Shipped the first-ever calendar UI across the SmartRent platform, contributing to an 87% satisfaction score and increased scheduling clarity.
Shipped the first-ever calendar UI across the SmartRent platform, contributing to an 87% satisfaction score and increased scheduling clarity.
Shipped the first-ever calendar UI across the SmartRent platform, contributing to an 87% satisfaction score and increased scheduling clarity.
Project Summary
Project Summary
Project Summary
CalendarView.png
CalendarView.png
CalendarView.png
Grid Paper Sketches
Grid Paper Sketches
Grid Paper Sketches
Grid Paper Sketches
Before diving into Figma, I sketched ideas for interactions like drag-and-drop and weekly vs. monthly views. These helped me think through what users would expect from a real-world task calendar.
Before diving into Figma, I sketched ideas for interactions like drag-and-drop and weekly vs. monthly views. These helped me think through what users would expect from a real-world task calendar.
Before diving into Figma, I sketched ideas for interactions like drag-and-drop and weekly vs. monthly views. These helped me think through what users would expect from a real-world task calendar.
MidFidelity.png
MidFidelity.png
MidFidelity.png
MidFidelity.png
Early Explorations
Early Explorations
Early Explorations
Early Explorations
One of the trickiest problems was defining how individual calendar cells would behave. What's tappable, what details are shown, and how can the full scope of work be seen?
One of the trickiest problems was defining how individual calendar cells would behave. What's tappable, what details are shown, and how can the full scope of work be seen?
One of the trickiest problems was defining how individual calendar cells would behave. What's tappable, what details are shown, and how can the full scope of work be seen?
DragAndDrop.png
DragAndDrop.png
DragAndDrop.png
DragAndDrop.png
Interactive Patterns
Interactive Patterns
Interactive Patterns
Interactive Patterns
I designed interactions that our users would be familiar with. Drag to reschedule, double-click to add a task, and right-click for task options, keeping it fast and intuitive.
I designed interactions that our users would be familiar with. Drag to reschedule, double-click to add a task, and right-click for task options, keeping it fast and intuitive.
I designed interactions that our users would be familiar with. Drag to reschedule, double-click to add a task, and right-click for task options, keeping it fast and intuitive.
CalendarView.png
CalendarView.png
CalendarView.png
CalendarView.png
Responsiveness + Limits
Responsiveness + Limits
Responsiveness + Limits
Responsiveness + Limits
I made sure it flexed well across desktop breakpoints and I capped how many tasks could visually load before prompting scroll, so the UI didn’t overload.
I made sure it flexed well across desktop breakpoints and I capped how many tasks could visually load before prompting scroll, so the UI didn’t overload.
I made sure it flexed well across desktop breakpoints and I capped how many tasks could visually load before prompting scroll, so the UI didn’t overload.
MonthVsWeek.png
MonthVsWeek.png
MonthVsWeek.png
MonthVsWeek.png
Month vs Week View
Month vs Week View
The month view gives you the big picture. The week view gets into the weeds. I designed both to use consistent patterns but serve different levels of planning.
The month view gives you the big picture. The week view gets into the weeds. I designed both to use consistent patterns but serve different levels of planning.
CellStates.png
CellStates.png
CellStates.png
CellStates.png
Engineering Documentation
Engineering Documentation
Engineering Documentation
Engineering Documentation
I documented all the interaction states, accessibility specs (tab order, alt text, etc), and usage guidelines for engineering. Since our design system didn't have calendar components, I built them along the way.
I documented all the interaction states, accessibility specs (tab order, alt text, etc), and usage guidelines for engineering. Since our design system didn't have calendar components, I built them along the way.
Results
Results
Results
Results
Calendar View received 87% customer satisfaction on a survey conducted via Intercom. One user responded to the survey saying, "Oh man, it’s about time. A view I can finally wrap my head around."!
Calendar View received 87% customer satisfaction on a survey conducted via Intercom. One user responded to the survey saying, "Oh man, it’s about time. A view I can finally wrap my head around."!
Reflection
Reflection
Reflection
Reflection
Calendar View was a defining moment in my growth as a designer. It was the first major client facing feature I led end-to-end, from sketching and design system work to motion design, responsiveness and handoff. Building something that touched so many users helped me realize how much I thrive when I get to own the full process and create tools that genuinely make people’s work easier.
Calendar View was a defining moment in my growth as a designer. It was the first major client facing feature I led end-to-end, from sketching and design system work to motion design, responsiveness and handoff. Building something that touched so many users helped me realize how much I thrive when I get to own the full process and create tools that genuinely make people’s work easier.
Calendar View was a defining moment in my growth as a designer. It was the first major client facing feature I led end-to-end, from sketching and design system work to motion design, responsiveness and handoff. Building something that touched so many users helped me realize how much I thrive when I get to own the full process and create tools that genuinely make people’s work easier.
Want the behind-the-scenes?
Want the behind-the-scenes?
Want the behind-the-scenes?
Want the behind-the-scenes?
Ask me about how I handled errors and syncing across time zones, there’s more than meets the eye to this feature.
Ask me about how I handled errors and syncing across time zones, there’s more than meets the eye to this feature.
Ask me about how I handled errors and syncing across time zones, there’s more than meets the eye to this feature.
Contact Me!
Contact Me!
Want to work together? Let’s talk before I pick up another side project.
Want to work together? Let’s talk before I pick up another side project.
Want to work together? Let’s talk before I pick up another side project.
Reach out via one of these methods.
Reach out via one of these methods.
Reach out via one of these methods.
