![](https://framerusercontent.com/images/tTaS8cvvM85iqQuUyNUveWdD7bU.png)
Google Calendar. Adding a feature.
Google Calendar. Adding a feature.
Add a travel block to your calendar
Add a travel block to your calendar
Calendar just got easier. Know when to leave. No more overbooking.
Calendar just got easier. Know when to leave. No more overbooking.
![](https://framerusercontent.com/images/iMXzPxwRaJ10jZ92xVcF6LJBz8.png)
![](https://framerusercontent.com/images/iMXzPxwRaJ10jZ92xVcF6LJBz8.png)
![](https://framerusercontent.com/images/Elcvi1uPPgha2R5yA4IdmCKkjS8.png)
![](https://framerusercontent.com/images/Elcvi1uPPgha2R5yA4IdmCKkjS8.png)
Overview
Overview
The idea for adding this feature came to me while working a previous job at a college campus. I had multiple meetings throughout the day that were all over campus.
The idea for adding this feature came to me while working a previous job at a college campus. I had multiple meetings throughout the day that were all over campus.
Regularly I would get back to back meetings put on to my calendar at opposite ends of campus.
Regularly I would get back to back meetings put on to my calendar at opposite ends of campus.
What if Calendar could take away the guess work and automatically block off space or tell you how long it would take to get places before you do what most of us do. Just hit accept and figure it out later.
What if Calendar could take away the guess work and automatically block off space or tell you how long it would take to get places before you do what most of us do. Just hit accept and figure it out later.
Tools used
Tools used
![](https://framerusercontent.com/images/jLXPokl8tOBxDty3hdtlwGXdRg.png)
![](https://framerusercontent.com/images/jLXPokl8tOBxDty3hdtlwGXdRg.png)
![](https://framerusercontent.com/images/UEI3mf4Pk6WusQvGQdVDek34klE.png)
![](https://framerusercontent.com/images/UEI3mf4Pk6WusQvGQdVDek34klE.png)
![](https://framerusercontent.com/images/ssdXrToNdPcTnSfSOKLLo10CR4.png)
![](https://framerusercontent.com/images/ssdXrToNdPcTnSfSOKLLo10CR4.png)
![](https://framerusercontent.com/images/DBlabHr3AHbQTkrke6h8h8Tsg.png)
![](https://framerusercontent.com/images/DBlabHr3AHbQTkrke6h8h8Tsg.png)
![](https://framerusercontent.com/images/eMGXtlKqEd9lZH6jEUDlDVtQWc.png)
![](https://framerusercontent.com/images/eMGXtlKqEd9lZH6jEUDlDVtQWc.png)
Constraints
Constraints
80 hour time constraint.
80 hour time constraint.
Integrate a feature into Google Calendar with minimal disruption to the current UI.
Integrate a feature into Google Calendar with minimal disruption to the current UI.
Discover
Discover
Problem Hypothesis
Problem Hypothesis
There is no way to block off travel time between events in Google Calendar automatically.
Time between events shows as open time.
There is no way to block off travel time between events in Google Calendar automatically.
Time between events shows as open time.
This could lead to:
This could lead to:
Accidently scheduling something during travel between events.
Accidently scheduling something during travel between events.
Added work of creating another event for travel or having to remember.
Added work of creating another event for travel or having to remember.
Event requests from people who think you are not busy.
Event requests from people who think you are not busy.
Research Plan
Research Plan
To validate my problem hypothesis I needed to dig for insight on how most people use Google Calendar in their day to day lives, what current features they use and don’t use, and what they are currently doing to manage their back to back events in different locations.
To validate my problem hypothesis I needed to dig for insight on how most people use Google Calendar in their day to day lives, what current features they use and don’t use, and what they are currently doing to manage their back to back events in different locations.
Competitor analysis to take a look at the other top calendar apps. Is there anything I can incorporate from them into this added feature?
Competitor analysis to take a look at the other top calendar apps. Is there anything I can incorporate from them into this added feature?
User interviews will be the main research for this project as I really need to dig into how people use Google Calendar, what their pain points are, and what current features they use and do not use.
User interviews will be the main research for this project as I really need to dig into how people use Google Calendar, what their pain points are, and what current features they use and do not use.
User survey to fill in any gaps on quantitative data that was not gained by the previous research methods.
User survey to fill in any gaps on quantitative data that was not gained by the previous research methods.
Research Summary
Research Summary
All but 1 person interviewed stated that they did not have any issues with traveling between events in Google Calendar. But, every person interviewed had their own workaround.
All but 1 person interviewed stated that they did not have any issues with traveling between events in Google Calendar. But, every person interviewed had their own workaround.
“
“
Sometimes I edit the event invite times in my calendar to block off travel time.
“
“
Sometimes I edit the event invite times in my calendar to block off travel time.
“
“
Sometimes I edit the event invite times in my calendar to block off travel time.
“
“
I just manage travel gaps in my calendar mentally and home my estimate is correct
“
“
For important meetings I create an extra block in my calendar to block off travel or prep time.
“
“
I just manage travel gaps in my calendar mentally and hope my estimate is correct.”
“
“
I just manage travel gaps in my calendar mentally and hope my estimate is correct.
“
“
For important meetings I create an extra block in my calendar to block off travel or prep time.”
“
“
For important meetings I create an extra block in my calendar to block off travel or prep time.
Microsoft Outlook
![](https://framerusercontent.com/images/rea6YBzmkv9xdRzrpHFHbpZvv0o.jpg)
Apple Calendar
![](https://framerusercontent.com/images/NfgRZCEGgpWoUK49ojsHYmEm64.jpg)
These two direct competitors were researched as they were the closest to Google Calendar. All three calendars have their own strengths and weaknesses, but overall all are pretty similar.
These two direct competitors were researched as they were the closest to Google Calendar. All three calendars have their own strengths and weaknesses, but overall all are pretty similar.
The validation of my hypothesized problem:
Most Google Calendar users had a some sort of workaround when scheduling events.
Users weren’t unhappy with their workarounds, but their experience would be easier if they didn’t have to do their own workarounds.
The validation of my hypothesized problem:
Most Google Calendar users had a some sort of workaround when scheduling events.
Users weren’t unhappy with their workarounds, but their experience would be easier if they didn’t have to do their own workarounds.
Pairing Google Calendar with other apps is a huge plus for users.
Pairing Google Calendar with other apps is a huge plus for users.
While most other Calendar apps are very similar to each other, Google Calendar hits middle of the road with functionality, ease of use, but excels at being the most available to use and pair.
While most other Calendar apps are very similar to each other, Google Calendar hits middle of the road with functionality, ease of use, but excels at being the most available to use and pair.
Define
Define
Affinity Mapping Interviews
Affinity Mapping Interviews
With affinity mapping I was able to find some more common ground among users. I was already thinking about IA at this point and how I could use what people said to make the feature the best it could be.
With affinity mapping I was able to find some more common ground among users. I was already thinking about IA at this point and how I could use what people said to make the feature the best it could be.
Persona
Persona
![](https://framerusercontent.com/images/xidfCmbsKN7Drvhk82c5Qloox4.jpg)
![](https://framerusercontent.com/images/xidfCmbsKN7Drvhk82c5Qloox4.jpg)
![](https://framerusercontent.com/images/xidfCmbsKN7Drvhk82c5Qloox4.jpg)
Ideate
Ideate
How Might We Questions
How Might We Questions
I thought people had no good way to add in travel blocks in Google Calendar, but after talking with people I learned everyone has their own workaround, therefor we need to find a way to make travel blocks easier and natural.
I thought people had no good way to add in travel blocks in Google Calendar, but after talking with people I learned everyone has their own workaround, therefor we need to find a way to make travel blocks easier and natural.
How might we eliminate workarounds in Google Calendar for events in different locations?
How might we eliminate workarounds in Google Calendar for events in different locations?
How might we make traveling to events simpler for the user in Google Calendar?
How might we make traveling to events simpler for the user in Google Calendar?
How might we utilize existing Google products to improve the users calendar experience while traveling?
How might we utilize existing Google products to improve the users calendar experience while traveling?
I'd like to explore ways to help people from needing to do their own workarounds with travel between events in Google Calendar so that they can have one less thing to worry about during the day.
I'd like to explore ways to help people from needing to do their own workarounds with travel between events in Google Calendar so that they can have one less thing to worry about during the day.
How might we help users feel confident they are not overbooked in Google Calendar while traveling between events?
How might we help users feel confident they are not overbooked in Google Calendar while traveling between events?
The Idea
The Idea
To add in a calendar block that is easy to implement. This will include a previous location setup, reminders, and work with Google Maps to bring up directions if needed.
To add in a calendar block that is easy to implement. This will include a previous location setup, reminders, and work with Google Maps to bring up directions if needed.
Task Flows
Task Flows
If you use Google Calendar regularly you'll notice that this flow is almost exactly the same as Google Calendar is now. The only changes in flow are:
If you use Google Calendar regularly you'll notice that this flow is almost exactly the same as Google Calendar is now. The only changes in flow are:
Adding a starting location
Adding a starting location
Select a mode of transportation
Select a mode of transportation
Less change will help regular users accept the new feature.
Less change will help regular users accept the new feature.
![](https://framerusercontent.com/images/4fahmO8iyLYY932FZ7D7gNIjtK0.jpg)
![](https://framerusercontent.com/images/4fahmO8iyLYY932FZ7D7gNIjtK0.jpg)
![](https://framerusercontent.com/images/4fahmO8iyLYY932FZ7D7gNIjtK0.jpg)
If a user doesn’t want to use this new feature a skip button at “add starting location” will keep the rest of the experience unchanged for that user.
If a user doesn’t want to use this new feature a skip button at “add starting location” will keep the rest of the experience unchanged for that user.
Prototype
Prototype
Mid Fidelity Wireframes
Mid Fidelity Wireframes
I focused on keeping Google Calendar the same as much as I could to add this new feature as seamlessly as possible.
I focused on keeping Google Calendar the same as much as I could to add this new feature as seamlessly as possible.
Initially I opted for an overlay to choose notifications. At the time it felt like the best option as this is how Google Calendar has users select extra details.
Initially I opted for an overlay to choose notifications. At the time it felt like the best option as this is how Google Calendar has users select extra details.
![](https://framerusercontent.com/images/X5KIoUawVq0UTFLdyPnKN3oUk.jpg)
![](https://framerusercontent.com/images/X5KIoUawVq0UTFLdyPnKN3oUk.jpg)
![](https://framerusercontent.com/images/X5KIoUawVq0UTFLdyPnKN3oUk.jpg)
![](https://framerusercontent.com/images/baWFwoSYBshZSvhRiHmxCnVsUa8.jpg)
![](https://framerusercontent.com/images/baWFwoSYBshZSvhRiHmxCnVsUa8.jpg)
![](https://framerusercontent.com/images/baWFwoSYBshZSvhRiHmxCnVsUa8.jpg)
![](https://framerusercontent.com/images/agYJlAIx9xjKxNw76cq6sFCWmgQ.jpg)
![](https://framerusercontent.com/images/agYJlAIx9xjKxNw76cq6sFCWmgQ.jpg)
![](https://framerusercontent.com/images/agYJlAIx9xjKxNw76cq6sFCWmgQ.jpg)
![](https://framerusercontent.com/images/u4chZZvCwNjp6tDMejCBQNakFaI.jpg)
![](https://framerusercontent.com/images/u4chZZvCwNjp6tDMejCBQNakFaI.jpg)
![](https://framerusercontent.com/images/u4chZZvCwNjp6tDMejCBQNakFaI.jpg)
![](https://framerusercontent.com/images/oXQYE9QfOvE19sCjwC54XR2Eeuw.jpg)
![](https://framerusercontent.com/images/oXQYE9QfOvE19sCjwC54XR2Eeuw.jpg)
![](https://framerusercontent.com/images/oXQYE9QfOvE19sCjwC54XR2Eeuw.jpg)
![](https://framerusercontent.com/images/txAForw3jfbx9yYlK7k1E6KOFg.jpg)
![](https://framerusercontent.com/images/txAForw3jfbx9yYlK7k1E6KOFg.jpg)
![](https://framerusercontent.com/images/txAForw3jfbx9yYlK7k1E6KOFg.jpg)
![](https://framerusercontent.com/images/DFfrKxCcPVOmLMoGIi5FUslvmw.jpg)
![](https://framerusercontent.com/images/DFfrKxCcPVOmLMoGIi5FUslvmw.jpg)
![](https://framerusercontent.com/images/DFfrKxCcPVOmLMoGIi5FUslvmw.jpg)
![](https://framerusercontent.com/images/dxWg3EF3slpLrSGdhk25t8BPY.jpg)
![](https://framerusercontent.com/images/dxWg3EF3slpLrSGdhk25t8BPY.jpg)
![](https://framerusercontent.com/images/dxWg3EF3slpLrSGdhk25t8BPY.jpg)
![](https://framerusercontent.com/images/uUyeRXTs1MWIA62C5bjSQrNHY.jpg)
![](https://framerusercontent.com/images/uUyeRXTs1MWIA62C5bjSQrNHY.jpg)
![](https://framerusercontent.com/images/uUyeRXTs1MWIA62C5bjSQrNHY.jpg)
Testing
Testing
User Testing
User Testing
If time allowed ideally I would have preferred to do user testing on the low fidelity or medium fidelity wireframes along with the high fidelity.
If time allowed ideally I would have preferred to do user testing on the low fidelity or medium fidelity wireframes along with the high fidelity.
I ended up presenting my low fidelity wireframes in group critiques as well as show a few other people close to me for some quick feedback.
I ended up presenting my low fidelity wireframes in group critiques as well as show a few other people close to me for some quick feedback.
I took the feedback into consideration and created the Hi-Fidelity wireframes. I then did user testing on 6 participants who use Google Calendar with the following results on a prioritization matrix.
I took the feedback into consideration and created the Hi-Fidelity wireframes. I then did user testing on 6 participants who use Google Calendar with the following results on a prioritization matrix.
![](https://framerusercontent.com/images/fFNS6vbfLX8NwoviTb9xdSXAV3U.png)
![](https://framerusercontent.com/images/fFNS6vbfLX8NwoviTb9xdSXAV3U.png)
![](https://framerusercontent.com/images/K9OdT20HLtuf8vgDvuwRLmeYc.png)
Iterate on Feedback
Iterate on Feedback
Mode of travel started as an overlay in Hi-Fi to keep the UI consistent with how Google Calendar currently displays choices.
Mode of travel started as an overlay in Hi-Fi to keep the UI consistent with how Google Calendar currently displays choices.
After usability testing most testers were confused at worst or hesitated at best when the overlay popped up. This was clearly not working.
After usability testing most testers were confused at worst or hesitated at best when the overlay popped up. This was clearly not working.
I updated to a button carousel similar to Google Maps which users will be familiar with to show them why they are looking at these modes of travel. This was originally in my Low-fidelity wireframes, but changed it to be more consistent with current Google Calendar. I should have trusted my gut.
I updated to a button carousel similar to Google Maps which users will be familiar with to show them why they are looking at these modes of travel. This was originally in my Low-fidelity wireframes, but changed it to be more consistent with current Google Calendar. I should have trusted my gut.
Before
After
Before
After
Before
After
Before
After
Final Design
Final Design
Mobile
Mobile
Adding a travel block to Google Calendar ended up feeling like a natural evolution to Google to further integrate their apps together.
Adding a travel block to Google Calendar ended up feeling like a natural evolution to Google to further integrate their apps together.
This feature eliminated the need for any of the workarounds I uncovered in research and allows for someone to pull up directions via Google Maps even easier than before.
This feature eliminated the need for any of the workarounds I uncovered in research and allows for someone to pull up directions via Google Maps even easier than before.
Newly added elements:
Newly added elements:
Add a starting location. This also includes a skip button as not to inconvenience users who don't want to use the new feature.
Add a starting location. This also includes a skip button as not to inconvenience users who don't want to use the new feature.
Add a mode of travel to estimate travel times and update travel times as conditions change.
Add a mode of travel to estimate travel times and update travel times as conditions change.
1
Type in a starting location.
Type in a starting location.
"Starting location" title is in the type box before typing.
"Starting location" title is in the type box before typing.
2
Skip to easily bypass the new feature with one click.
Skip to easily bypass the new feature with one click.
3
Prior event shows up here.
Prior event shows up here.
Home location will show if there is no prior event on this day.
Home location will show if there is no prior event on this day.
4
Nearby places with the closest match to what was typed in.
Nearby places with the closest match to what was typed in.
![](https://framerusercontent.com/images/P0NswZxCkUaXayM57ZiuOBiPzY0.png?scale-down-to=1024)
![](https://framerusercontent.com/images/P0NswZxCkUaXayM57ZiuOBiPzY0.png?scale-down-to=1024)
![](https://framerusercontent.com/images/P0NswZxCkUaXayM57ZiuOBiPzY0.png?scale-down-to=1024)
After selecting an event location you can select the starting location
After selecting an event location you can select the starting location
Skip to create an event as usual
Skip to create an event as usual
![](https://framerusercontent.com/images/EZzHNMQiaRdbJlBCfd65I9EfhoU.png?scale-down-to=1024)
![](https://framerusercontent.com/images/EZzHNMQiaRdbJlBCfd65I9EfhoU.png?scale-down-to=1024)
![](https://framerusercontent.com/images/EZzHNMQiaRdbJlBCfd65I9EfhoU.png?scale-down-to=1024)
Select Mode of travel at the starting location
Select Mode of travel at the starting location
![](https://framerusercontent.com/images/zpGQM3ir4tKmUCylWZVQLcTKleo.png?scale-down-to=1024)
![](https://framerusercontent.com/images/zpGQM3ir4tKmUCylWZVQLcTKleo.png?scale-down-to=1024)
![](https://framerusercontent.com/images/zpGQM3ir4tKmUCylWZVQLcTKleo.png?scale-down-to=1024)
Travel notification will show in the notifications section as a car icon
Travel notification will show in the notifications section as a car icon
![](https://framerusercontent.com/images/L4KrvP4CVvqw5VwaxbP52arrWok.png?scale-down-to=1024)
![](https://framerusercontent.com/images/L4KrvP4CVvqw5VwaxbP52arrWok.png?scale-down-to=1024)
![](https://framerusercontent.com/images/L4KrvP4CVvqw5VwaxbP52arrWok.png?scale-down-to=1024)
Travel notification shows up in the calendar
Travel notification shows up in the calendar
![](https://framerusercontent.com/images/n6szeiz14o8oYz5GwxnUzaBQ.png?scale-down-to=1024)
![](https://framerusercontent.com/images/n6szeiz14o8oYz5GwxnUzaBQ.png?scale-down-to=1024)
![](https://framerusercontent.com/images/n6szeiz14o8oYz5GwxnUzaBQ.png?scale-down-to=1024)
Add travel notification to remind you when to leave
Add travel notification to remind you when to leave
![](https://framerusercontent.com/images/41JGNF7dpeB0iPxcaNEXXCh75c.png?scale-down-to=1024)
![](https://framerusercontent.com/images/41JGNF7dpeB0iPxcaNEXXCh75c.png?scale-down-to=1024)
![](https://framerusercontent.com/images/41JGNF7dpeB0iPxcaNEXXCh75c.png?scale-down-to=1024)
Second travel notification has been added
Second travel notification has been added
Next Steps
Next Steps
Further integrate this feature into other Google Apps, such as Gmail, Chrome, and Google Home.
Further integrate this feature into other Google Apps, such as Gmail, Chrome, and Google Home.
Conclusion
Conclusion
Users think they know what they want, but if we can make an easy task easier they will be happier in the end.
Users think they know what they want, but if we can make an easy task easier they will be happier in the end.
Users were happiest when changes to elements were subtle.
Users were happiest when changes to elements were subtle.
No need to re-invent the wheel. The more familiar the element the easier it was for the user.
No need to re-invent the wheel. The more familiar the element the easier it was for the user.
Keep it simple.
Keep it simple.