Untitled-design-95-1

Simplifying Time-zones

This case study deep dives into the challenges that remote teams face when planning meetings with their workforce. Understanding time-zones and presenting a visual guide to aid in planning of meeting is the core idea behind the Zang solution. 

Tools: Figma, Github, VSCode, Sublime, Photoshop

Untitled-design-97

Follow our journey into the exploration and understanding of the problem, desiging multiple solutions and testing each iteration. We face many obstacles that cause us to start over again. We finally arrive on a unique idea and prototype for scheduling efficiently with people around the world in one platform.

The Journey:

Untitled-design-15

Research

The Zang Hypothesis 

The pandemic of 2020 changed our reality dramatically. One of the most significant changes that arose from this phenomenon was the increase in remote workforce. We took a deep dive into remote teams. 

Hypothesis: Scheduling efficency of a remote team is directly correlated to their productivity. 

Copy-of-Untitled-2

Proto-Persona

Our invisioned target audience was the following:

Group

Behaviour/Demographics:

  • 28 year old, tech savvy remote, software developer 
  • Works multiple remote jobs and side projects  
  • Likes to maintain her own schedule
  • Manages bookings, clientel and all business related decisions

Needs & Goals:

  • To be organized and punctual
  • Continuously schedule new clients
  • Successfully run her freelance business

Pain Points:

  • Scheduling meetings and keeping track. 
  • Coordinating with teams
  • Maintaining Deadlines and communication with clients
  • Last minute bookings
  • Overworking and burning out

Competitor Analysis 

We took a look into the current market standards for scheduling:

Screen-Shot-2021-07-04-at-11.34.27-AM

Strengths:

  • Simple interface
  • Tutorials allow small learning curve
  • Setting time zones

Weakness:

  • Reported Bugs when integrating 
  • Rescheduling functionality issues
  • Separate link invitation required
Screen-Shot-2021-06-23-at-2.29-1
  • Under the Microsoft umbrella
  • Can create team schedules
  • Translation feature
  • Confusion with group feature
  • Difficult and long learning curve
  • Inability to integrate with other platforms
Screen-Shot-2021-07-04-at-11.48.34-AM
  • Integration to other platforms
  • CC for accomodations
  • Schedule your videos feature

 

  • Explore page not customizable
  • Notifications can go to spam

*The decision for chosing YouTube as a competitor was to analyze their video scheduling and notification features both on creators side and viewers side as YouTube is one of the most integrated programs today. 

User Research

Research Plan:

5 user interviews and 19 online surveys over the duration of 2 weeks. Criteria for participation was individuals currently apart of a remote working force.

Research Objectives:

  • Learn how groups synchronize their online meetings 
  • Understand the common obstacles users face when scheduling meetings or gatherings

Key Findings:

Untitled-design-2021-07-04T194607.531

Fig: 61.1% Users work with members from different time zones

61% of our users collaborate with team members from different time-zones.

Scheduling meetings with different time-zones contains obstacles.

About 65 percent of users schedule their meetings on a weekly basis. 

Majority of our users relied on Team Management Applications such as Microsoft Teams, WebEx, Google/Apple Calender, to schedule and conduct their meetings.

Untitled-design-2021-07-04T162603.289

Fig: Frequency that users book meetings 

Key Excerpt:

“I can’t remember the difference between EST, PST and CST, end up spending extra time either googling things or staying back a few hours for my work day because I missed my colleagues open window to book a meeting.” - R.R Interviewee

Untitled-design-2021-07-05T133302.436
Untitled-design-15

Define & Empathsize

Empathy Map 

We condensed the data and analyzed it through an Empathy Map to narrow down the pain points of our problem. 

Feature Prioritization:

We brainstormed our ideas for the solution and voted on the best features. We organized it into a prioritzation matrix of possibilities and narrowed our focus.

Group-1328

Key Features: 

  • Synchronized visual team clock
  • Automations with meeting dates
  • Access without registration

To make our decisions of priortization we determined the complexity and impact of the feature.  Complexity was scored by the scope of work and time constraints. Impact was scored with the value provided to users, the increase of efficiency in scheduling and ease of coordination of the remote team.  

User Persona 

After understanding the persepective of our user, we created our User Persona to represent the scenario and the situation they are experiencing and where we would come in. 

User-Persona-Photo-2
Group-47

Creative Catherine 

Interior Designer 

Age: 29
Job Title: Interior Designer
Status: Single
Location: British Columbia

Group-8-1
NEEDS-1
Group-45-1
NEEDS-2

Catherine's Storyboard

Group-1285-1
  • Receives referral for a client in Moscow.
  • She needs to set up a meeting to discuss work oppurtunities
Group-1286-1
  • She connects over email to discuss potential meeting times.
Group-1287-1
  • The potential client responds with a time and date promptly.
Group-1289
  • Catherine schedules a meeting with the potential client.
  • She sets a reminder for herself about the meeting.
Group-1290
  • On the day of the meeting, the potential client does not show up.
  • Catherine realizes that she miscalculated the time difference and missed the meeting!
Group-1291
  • Catherine loses the potential client.
  • She is determined to not face such issues again and seeks a solution to her problems.

Catherine's Journey Map 

02-Iteration-User-Journey-Creative-Catherine-2

User Insight

Users that work in small remote teams, have challenges coordinating meetings due to members being located in different time-zones and having to utilize multiple project management platforms.

Solution

Zang will be designed to coordinate team meetings that are distributed across multiple time zones using the Golden Hour, integrating different apps into one platform. The application will help sync itineraries in a visual and efficient manner and also provides integrations with other apps. 

Untitled-design-15

Ideate & Develop

User Flow

Our user flow was set up to allow users to go through a demo to illustrate incentives of the platform before signing up to encourage users. 

Site Map 

Our site map has two parts. Part one is about our landing page, Demo, and Sign up page. And the second part is the Dashboard, and it contains Integrations.

Group-1329

Wireframes

Zang-Landing-Page-Avissa-3
User-Dashboard-3
Temporary-meeting-room-2
Temporary-meeting-room-4

The wireframes were originally created with a video call ability, and a manual entry of team members that would allow for a demo feature without the need of signing up. This was all centered around a “temporary meeting room” that could be digitally reserved. We later learn from testing that this concept would have to be scrapped. 

Visualizing the Solution

Our first visualization of the time-zone solution would illustrate the time-zones of team mates and the error message would inform users if schedule attempt was made during a time that another team mate was unavailable. It would also illustrate the Golden Hour for the team. 

Untitled-design-18
Untitled-design-15

Prototype & Test 

Mid-Fidelity Prototype 

Feature changes in the Mid-Fidelity Prototype included removing the "temporary meeting room" and call feature due to scope creep. Results showed users were confused as to what the purpose of Zang was. We then narrowed down our solution to focus on the scheduling feature rather than trying to encompass too many features. 


Usability Testing Feedback

Mid-Fidelity Prototype usability testing gave us the overwhelming feedback that our visualization does not work. Its too difficult to understand so we were back to square one. We incorportated the following changes from the feedback: 

  • Demo Video 
  • Re-visualization of the Zang clock
  • Slack Visualization 
  • Rewording CTAs and copy
Feedback-Prioritization

Iterations & Design Decisions

Copy-of-Untitled-2

The Zang Clock:

It was back to the drawing board. This time we took a traditional, analogue look for the redesign of the clock as user feedback stated that our original design looked like a calender. Through our different sketches we decided to go with a 24hr clock to represent the night and day difference between each member more clearly. We also added a map to represent location visually. MOST IMPORTANTLY we removed the Golden Hour! 


Untitled-design-2021-07-06T095452.955

Why the Golden Hour failed? 

The Golden Hour was our initial selling point. We wanted a common hour that would show in a visual format that all members can book meetings in. Sounds great, right? However! When we went over the design mechanics of how such a solution would work, we came across two issues.

Firstly, each member would have to manually enter their "office hours" or a time frame that is a minimum of 8 hours. The golden hour would be the overlapping time frames. It would demand labouring work from users to set up and enter the data. It would also require all members to sign up for Zang in which case the application would be obsolete if only one of the members of the team were not registered. 

Secondly, if one or more of the members just happened to be exactly on the opposite side of the world, you would never get a time frame that would overlap. One or more persons would have to accommodate in which case many variables appeared and once again required manual entry. The more members that were in a group the more difficult it would be. 

Unless there was an algorithm that takes care of the office hour entry in the back-end, this solution required more work from the user then simply not using the application. Thus, we scrapped the Golden hour idea. 

Before:

Demo-page-7

After:

Demo-4-1

In the redesign, we made the meeting window adjustable through a slider on the top right. The revised solution allowed the user to enter a name and location with a desired time frame. Once that data was in, you can drag a frame around the clock and see the frame move with respect to other members time-zones. You can then see the appropriate time for each member at once. 

The Demo Video:

As per user feedback, we added a demo video displaying the features available on Zang thereby making it more user friendly interface. 

Untitled-design-20

Second Round of Testing 

Preference Testing of Call to Actions:

We tested the phrases of the Call to Actions. Version A stated "See how it works" and version B "Try it for Free". Results show version B as coming strong, which we assume was due to the incentive and value of a "Free" service. 

Group-1313

Preference Testing of Clock face:

We tested our 24 hour clock iteration to determine whether to start from 01 or 13. Results were close but displayed a  0.04 point increase in difficulty in Version A. 

Version A:

Group-B-3

Version B:

Group-A-2

Heat Map:

Heat map of main dashboard tested to visualize user’s experience, taken through Hotjar.

Frame-1272-3

Integrations at the forefront

With our clock developed we focused the second part of our solution on integrations. A hesitation that came up early on with users during our usability testing was in adding another application to their tools. So, rather than adding another program to a team's toolkit, we want our clock to integrate into users already existing tool kit of project management application. Zang is integratable!

User-Empty-Dashboard-v3-1

Zang Dashboard viewing connected integrations 

User-Google-Calendar-5
User-Google-Calendar-7

Zang Dashboard viewing the Google calender Integration 

Untitled-design-20

Viewing Zang integrated into slack

Through the Zang dashboard you can view your applications, and you can view the Zang clock on your applications and vote on meeting times with your team.

Hi-Fidelity

Click the image to walk through Zang.

With testing and iterating, we developed our final prototype.

Zang, make scheduling with time-zones easy and integrate your clock into all your plaforms. 

Style Guide

With our prototype we developed Zang's Brand to align our team. Click through to view the style guide.

Untitled-design-15

Delivery & Future Outlook

Conclusion

Time-zones get difficult to visualize the more people you are trying to coordinate with. By providing visual assistance, we help ease the cognitive load while coordinating with people spread across multiple time zones. The more we tested our solution, the more we narrowed our focus and simplified our idea. In presenting our case study we found that many were enthusiastic about this solution.

Our future plans for Zang include:

  • Improving the features
  • Understanding the schedule mechanic
  • Creative automation algorithm for meeting, emails etc.
  • Making a centralized dashboard for all your apps so that collaboration is easier for remote teams.
Group-1284-1-1