Teleport.Video

— worked together during 2017-2019

Connecting The World From Anywhere

  • WebApp
  • iOS App

Work Type

Product Strategy

UX Design

UI Design

Branding

Full project overview

Work Type

Product Strategy

UX Design

UI Design

Branding

Background

After working on the revamp of their website, AnywhereWorks asked us to create the WebApp and Mobile App for one of their products, Teleport.Video, an online video conferencing software aiming to teleport the World into the future of connectivity.

To AnywhereWorks, working from "anywhere" means prosperity to businesses, inclusivity to remote teams, less commuting, and less polluting. They strive to build products that not only give you the freedom to not having to be closed up in an office but also contribute to building a brighter future for our planet and younger generations.

AnywhereWorks and Teleport

Challenge

"Challenges" seem insignificant when dealing with such an honorable mission like building a brighter future for our planet, but there were challenges we had to consider.

Teleport would be operating in a competitive market - video conferencing. So besides guaranteeing consistency between touchpoints, we needed to deliver an app that would not only match the market in terms of functionality but offer an experience unlike any other app out there.

Guaranteeing consistency across different touchpoints, including Website, WebApp and iOS App
Guaranteeing consistency across different touchpoints, including Website, WebApp and iOS App.

Understanding the market

The most important thing before designing anything is to have a window into the business itself, understand how the product works, and how it can be improved. The Teleport team shared with us some of their user's friction points and struggles, but what better way to get a grasp of the issues, than experiencing the product yourself, first-hand? 

That’s what we did. We spent several weeks using their app in real-life scenarios, so we could take it as leverage in the design journey that would follow. Because we knew we were dealing with a competitive market, our next step was to understand what other competitors were offering and what Teleport could bring to the table, design-wise.

Representation of the Discovery phase and Benchmark
Representation of the Discovery phase and Benchmark.

Defining the structure

We weren't blindfolded when it came down to choosing a new path for Teleport. We did a competitor analysis to understand what value the app could bring, what functionality it needed to match, and how simple its flows needed to be. After all, the main goal was to offer "effortless video calls, in a matter of seconds".

We also kept an eye on what features were released. We were able to identify a set of enhancements and new features the app should have, and the market was already offering. Over the following months, both old and new features went through a thorough iterative process, striving to release the most competitive offering from the get-go.

Teleport WebApp's flowmap
Teleport WebApp's flowmap.

Calling for the brand

Since Teleport is part of a bigger suite of products, its brand needed to not only reflect the mother brand, AnywhereWorks but also be flexible enough to adapt to any products they might release in the future.

From the process of sketching, iterating, and presenting, we ended up with a new brand that combined the power of video communication, the power of change, and Anywhere's mission — preserving the pale blue dot, Planet Earth, adaptable in future sub-products.

Branding explorations before the final result (middle)
Branding explorations before the final result (middle).

Making everything fit together

Because we were designing for multiple platforms, we needed to look at the look and feel as a whole, and make sure it could seamlessly adapt from touchpoint to touchpoint, without harming the experience and functionality. But, most importantly, it had to feel familiar for users, part of a single entity, but still separate.

Creating a cohesive Styleguide with defined constraints helped us scale an already existing set of components to ensure users would identify the brand and the look and feel no matter the device.

Several components created to maintain consistency and guarantee scalability
Several components created to maintain consistency and guarantee scalability.

Looks and feels "right at home"

With an already existing Marketing Website — also designed by Pixelmatters —, taking a step back was crucial to guarantee a seamless experience - the interface had to be engaging, usable, and efficient, but most of all, familiar.

Not reinventing the wheel was, in fact, the wisest decision to make. We ended up with a minimal interface, eliminating unnecessary distractions, and allowing the user to focus on what matters — connect with the World, from anywhere.

AnywhereWorks and Teleport

"Anywhere" means on-the-go

Once the WebApp was stable enough, it was time to design a companion mobile app. It should allow users to make and receive video-calls anywhere they were, reducing even further the need to do any commute and, as a result, reduce their carbon footprint, one of the primary goals of the mother brand of Teleport — Anywhere.

Screens from the iOS App
Screens from the iOS App.

A seamless transition to mobile

Because we encountered several limitations when using the same features on both desktop and responsive approaches, such as allowing video in a mobile browser-based environment, we decided with AnywhereWorks to go with a native approach.

We started with iOS first, to see how users behaved and if there was any noticeable difference in usage between the Desktop WebApp and the new mobile approach.

Chat experience comparison between the WebApp and the iOS App
Chat experience comparison between the WebApp and the iOS App.

Part of the workflow

For an app to grow in a hot space like video conferencing means that not only it needs to have a reliable experience, but it also meant we had to understand how it would be used in the day-to-day, considering the number of tools used by the industry.

We integrated the app with some of the most popular communication tools at the time: Slack and HipChat. Doing so, we made sure it was quick and easy for teams to get into the Teleport app truly from anywhere.

Chat experience comparison between the WebApp and the iOS App
Chat experience comparison between the WebApp and the iOS App.

Fostering a remote collaboration

Even though AnywhereWorks' main goal is to establish the foundations to create a "remote" world, there are times when you need that face-to-face synergy and connection. 

That's why we traveled miles to meet with the teams at their hubs, in Edinburgh, Scotland, and Chennai, India.

The two trips we made to meet and collaborate with Teleport's team
Representation of the two trips we made to meet and collaborate with Teleport's team.

The Result

After a few months of design, the result was a competitive app with a look and experience unlike any other app out there, making Teleport the online video conferencing of tomorrow's remote teams.

AnywhereWorks and Teleport

Summing it up

AnywhereWorks and Teleport remain on their journey to revolutionize how we work, as the number of people working remotely continues to rise and also the need to stay connected. This is still a long path, but the future seems to be "remote by default", especially at times when there is no choice but to Work from Anywhere.