Timeless

Time zones made easy

  • Overview
  • Role
  • Problem
  • Research
  • IA
  • Wireframes
  • Visual Design
  • Learnings

Overview

Timeless is a calendar app that makes managing and attending meetings across different time zones as easy as it gets.

Role

Product Designer

Problem

Time zones can be tricky. When you see timings in a different time zone, you know you will have to perform some calculations in mind (or use internet đź‘€) to get them converted to your local time. Because of these different time zones, people find it tedious to manage and attend meetings. Moreover, their schedules are too busy to manually shuffle between different time zones. Imagine inviting people from 3 different timezones and finding a suitable common time without scratching your head.

Hypothesis

Target Audience

People traveling internationally and frequently.

Persona
  • Name: Sarah
  • Age: ~30 years
  • Occupation: Sales & Business development lead in a multinational company
Facts
  • Travels frequently, around 3 weeks in a month
  • Manages events from iPhone and MacBook
  • Lives and works in San Francisco
Key Pain Points
  • Finds it hard to shuffle between different time zones
  • Often ends up arranging a meeting according to the local time zone
  • Sometimes ends up missing a meeting in a different time zone
  • Do not really know the colleagues/guests time zones beforehand.
  • Usually converts time by herself

Building Scenarios

We can use the above key pain points to form different scenarios solving the pain points. For this, we will be using the Subject + Verb + Object method. As the name suggests, this method consists of writing down key subjects, verbs and objects from the pain points and laying them out in a tabular form.

Subject Verb Object
Sarah Create Meeting
View Location
Travel Time zone
RSVP Colleagues
Cities
Countries
Scenarios

We will create the scenarios using the above table. Please note that these are not sequential i.e. these do not have to occur in an order.

  1. Sarah creates an event
  2. She views an event
  3. She RSVPs to an event
  4. She views the local time zone
  5. She views the guests/colleagues time zone
  6. She views the guests/colleagues location
  7. She travels to cities for work

Information Architecture Content Inventory

Based on the above scenarios we can easily create the IA content inventory which will help us to create a more informed information architecture and navigation flow.

  1. Create events
  2. View all events
  3. View a specific event
  4. View local time zones
  5. View guests and colleagues time zones

Information Architecture
Information architecture

Solution

The entire solution has been built putting people and locations first instead of putting time zones first. We will create the mockups based on a story of our persona -

Sarah wants to create a new meeting event which includes two guests - Jacob Carter, the CEO of her company and Alex Newman, a potential client. Jacob is based out of New York which is in Eastern Time zone, whereas Alex is based out of Dallas which is in the Central Time zone. The meeting shall take place nearby client’s location. So, Sarah has this challenge to create the event as per the availability of guests who are in 3 different time zones and be there on time.

Sarah creates the event on Friday and then travels to LA for some other meeting. From there she has to travel to Dallas on Sunday where she has to meet Alex and Jacob for Lunch the next day.

Walkthrough
Home screen

The top left section of the home page shows the user’s current location and time zone. This can be calculated either by asking for location from the user or by getting the time-date from the system settings.

Create event

Based on the frequency of recent invites, we can show suggestions of guests. The main point here is to show the time zones of guests so that the user knows the time difference beforehand and does not have to convert time mentally.

Add guests Add location Pick suitable time slot

Based on the guests’ availability and the selected location, we can suggest event time. The important part here is to tell user WHAT time it will be there. User can tap on any of the locations (time zones) to convert the suggested time accordingly.

After picking a suitable time slot and adding the duration, Sarah has successfully created the event.

Calendar in Los angeles time zone

Sarah is now in Los Angeles. Since the time zone is unchanged, the calendar remains unchanged too.

Calendar in Los angeles time zone

When she lands in Dallas on Sunday evening, she gets a notification as above. The app updates the calendar accordingly.

Calendar in Dallas time zone

All the times have been updated here. The top left section now shows the location as Dallas which is in the Central Time zone. The calendar is now 2 hours behind of what it was in Los Angeles and San Francisco.

Upcoming event notification

The next day before the event she gets a notification and a popup sheet from the bottom which shows the time remaining for a particular event. She has the option to choose this type of pop up for every event or only the selected events. The important point here is that we are showing a countdown here not the particular timing of an event. This will help her to reach the event location at the right time.

Colleagues time zones

Additionally, she also has the option to view the time zone of her team mates so that she could find a better time to connect.

That's all folks
OTHER PROJECTS
Timeless Calendar Project
View for Behance Project
XBOX Project
Carol Project
Personal Identity Project
Horizontal Divider