Tape

iOS App

A new client approached our team with a problem they had recently experienced firsthand. While traveling, they had wanted to access video clips others had taken on the same trip. Our client wanted to create short, fun clips using their own and other people's videos.

Realizing there was no easy way for people to share videos with large groups of people, the client wanted to create their own solution. We invited them in for a discovery workshop, a multi-day collaboration where we focus on the core problem we'll be trying to solve. We emerged with was a solid direction for how to achieve his vision.

Role
Lead Designer

Year
2015

While competing products focused solely on the creation of video in the form of easily sharable content, we wanted to enable people to collaborate. In order to do that we needed to design a platform which allowed users to engage with their audience. Our end goal would be to foster a community of creativity centered around video.

Understand the Problem

We set out to gain a better understanding of who our ideal users would be. Running through a series of collaborative exercises helped define the needs and context of a typical user. We mapped out potential flows they could go through to accomplish a goal, such as sharing a clip with a friend or incorporating a celebrity's footage into their own video.

It became clear this platform would cater to celebrities who already had large audiences as well as fans who wanted to engage with them and each other. We referenced these stories when discussing how and when potential users could engage with the product:

• You are going to Coachella with a group of friends. You want to see all your favorite acts but there are too many playing at the same time.
  
  
• You are a musician who wants to connect more deeply with your audience. It is difficult to engage with them, especially with media such as video.
  
  
• You are on a day trip at the zoo with your family. It is so large that it would take more than a day just to see all of the animals.

Wireframes

We began mapping out concepts and exploring various ways of creating and sharing video content. One of the biggest problems we needed to solve was how to make the vast number of public video clips uploaded to the platform discoverable by users. Wireframing helped us to iterate and validate our solutions quickly. Learn more about the value and process of creating wireframes in this post.

We already knew this product was going to have a complex backend infrastructure in order to support some of the flows and features we had been designing. Critiquing these flows was made easier by printing them out discussing limitations around what was technically feasible.

We found that during the early stages of development it was easier for engineers to understand the full scope of what they were working on if they could reference an end-to-end flow that a user would go through to interact with the product. These “paper flows” would often travel all around the office. One day a flow might be pinned to a wall for discussion, then back at a developer's desk to work on and finally spread out on a table for marking up and annotating.

I imported our designs into Invision, a simple prototyping tool. Creating prototypes at this stage was invaluable because it meant we could test our design hypotheses against our assumptions. Instead of just looking at static mockups, we could tap around and interact within actual flows. These prototypes guided product direction and gave our engineers a better sense of how the product would need to function.

Design, Build, Test

I now needed to prioritize which parts of the product would have to be built and tested first. A great resource for me was Managing Product Development by Integrating Around Concerns by Ryan Singer. Visually plotting out each section of the product onto an "island map" of dependencies helped me understand what needed to come first.

The process of building Tape was extremely challenging due to the fact that we were using video, the heaviest type of content to interact with on mobile devices. We needed to seamlessly record, stream, download, edit and compile videos together, all within the same workflow.

Video files quickly ballooned to an unmanageable size. This meant simpy trying to watch or edit videos took an excruciatingly long time and would sometimes just time out completely.
 

One solution for huge video files was to compress them down into a more convenient size. Compressing our videos meant that we needed to compromise between a small file size and acceptable video quality. Finding the perfect balance resulted in noticable performance improvements across the entire product.

Identity

We explored various directions to best define the product's identity. The product name and visual treatment underwent a series of iterations until we landed on something just right. Below are some early concept sketches that would eventually evolve into the final logo.

Predating Instagram's major brand redesign, the Tape logo was designed to convey a modern and youthful approach in contrast to the other existing video apps of the time.

Launch

I'm extremely proud of the work my whole team produced to create this product. Though the process was long and difficult, we moved Tape out of beta and successfully launched it to the Apple app store.

It was especially rewarding to see the Tape community embrace the collaborative capabilities of the platform—utilizing other people's clips to remix and create their own unique videos.

Tape introduced a new way to create videos and interact with others. Background music, video filters, and the ability to request clip submissions all empowered users to tell their story in a more engaging way. Most importantly, Tape allowed people to experiment with collaborative video making in ways that had never been done before.

Outcome

Although it was only available for a brief period of time, Tape acquired over 20,000 active users within its first week and was named "Best New App". It also received a featured placement in the Photo & Video category and stayed at the top of the charts for weeks to come.

Next up:

Tiny Eye

VR · iOS · Android

View Case Study »