california app design company

Tape: The simplest way to create engaging videos with friends

The smartest, simplest way to create engaging videos with friends

  • iOS design
  • iOS development
  • branding

We collaborated with Tape to build an innovative video sharing app. Tape was featured in the Apple App Store as Best New App with a follow up credit on the 'film and photography’ charts. While many apps focus solely on the creation of sharable content, Tape enables people to collaborate. This meant we needed to design a platform that allowed users to engage with their audience. The goal of fostering a community of creativity centered around video was accomplished. Tape acquired over 20,000 users within the first week, with ongoing growth from there!

Challenge

Empower a user community to not only share video content, but to collaborate on its creation and editing as well, enabling users to download, edit and compile video in tandem with their friends all within the same app.

Solution

Architect a platform which would allow users to engage with their audience by collaborating on video production in a sophisticated manner, fostering a community of creativity centered around video.

Outcome

An innovative and dynamic video collaboration app called Tape, which acquired over 20,000 users within the first week, and was featured as Best New App in the Apple App Store, along with a follow up credit on the film and photography charts.

Featured by Apple as Best New App with a follow up credit in the film and photography section.

Tape App being featured as a Best New App in the App Store.
Tape App featured in the Photo & Video Section of the App Store

Garret presents an early design concept

Garret Jiroux presenting early design concepts for Tape App.

The Yeti team sketching initial ideas and designs for Tape App

THE BIG IDEA

Sharing Video is Hard

Garret Alan Jiroux first approached us with a problem he had experienced firsthand. While traveling on vacation, he had wanted to exchange video clips taken between friends and family. Unfortunately there was no simple way to go about doing this. We invited Garret in for a Discovery Workshop, a multi-day collaboration where we zero in on the core problem we will be trying to solve. We emerged with a solid strategy for how to achieve our client’s vision.

While many apps focus solely on the creation of sharable content, ours would enable people to collaborate. In order to do that we had to design a platform that allowed users to engage with their audience. Our end goal would be to foster a community of creativity centered around video.

Garret Jiroux, Co-Founder of Tape App


"Yeti really set out to not only understand, but internalize and expand upon our vision for Tape."
— Garret, CEO Tape

SITEMAP

Drafting a Plan

We understood the set of design constraints we needed to work within. We began by revisiting some of the empathy maps and user personas we had identified in Discovery and developed user stories that we could measure our designs against. 

Empathy Map

The design team's early empathy map layout.

Sample User Stories:

  • 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. 

Mindmap

Mike Godlewski working digitizing conceptual sketches for Tape App.

We then mapped out logical flows a user would go through in order to achieve a task. To reduce bloat we considered the most common needs for a user in a given situation and designed for those instances. Now it was time to construct a sitemap that outlined how everything would fit together in a nice, cohesive way. For this we heavily utilized our whiteboard walls and would often cover them floor to ceiling in our ideas.

WIREFRAMES & PROTOTYPES

Making it Work

The concepts that we visualized on the whiteboard made sense to us, but we still needed to translate those into something more tangible for the client. At this point we created digital wireframes using Sketch. You can find out more about our wireframing process in this post.

Editor Flow Wireframes

 Initial wireframes for Tape App.

Once we had something on screen it was super easy to manipulate. However, we still found that critique and discussion around bigger flows were easier when we could look at everything in context. Printing out wireframes and organizing sections of the app into distinct flows helped us achieve this.

Invision prototype for Tape App

Next we imported the wireframes into Invision, a fantastic prototyping tool. Creating prototypes at this stage was invaluable because it meant we could test our design hypothesis against our assumptions. Instead of just looking at a static wireframe, Garret could tap around and interact with actual flows. These prototypes helped guide the product direction and gave our engineers something to start building. You can read more about our prototyping process here.

Mike Godlewski and Tony Scherba discussing the prototyped designs.

 

Rudy Mutter pointing out a flaw in the designs.

 

Mike Godlewski, Tony Scherba, and Rudy Mutter going over the flow of Tape App

We found that during the early stages of development it was easier for engineers to understand the full impact of what they were working on if they could see the flow that a user would go through to use those features. The early prototypes were useful, but we found that printing out separate, individual flows helped even more. These “paper flows” would often travel all around the office. One day a flow might be pinned to a wall for discussion, then back with a developer to work on and finally spread on a table “blueprint style”for annotating.

Making notes on the initial Tape App designs.

 

Yeti's team looking over the notes they had previously marked on Tape App

 

Mike Godlewski, Rudy Mutter, and Tony Scherba hovering over a table, looking at the designs for Tape App

DEVELOPMENT

Build, Test, Rinse & Repeat

Before beginning development we needed to prioritize what to build. This was a great time for the product team to hash out ideas for how to structure an application of this scale. Because it was a streaming video app, there were many technical challenges we’d never run into that we first needed to solve conceptually. A fantastic resource for us at this point was a piece Ryan Singer of Basecamp had produced titled Managing Product Development by Integrating Around Concerns. We found it to be extremely valuable since visually mapping our features onto an island of dependencies helped us understand what needed to be built and tested first. Once these priorities were defined it was easy to see the impact one piece of functionality had on another.

Contingency "Island" Map

A list of features for Tape App with importance attached.

We encountered several challenges over the course of developing Tape. It was our first large-scale app built using Apple’s new programming language, Swift. Although Apple eliminated many of the pain points of programming in Objective-C we were still navigating through unexplored territory. This meant that we ran into numerous bugs due to the fact we were trying to do things that had never been done before. Since many of the issues we encounter had not been documented we were forced to come up with innovative solutions of our own.

Brainstorming Session

Garret Jiroux and Geoff House discussing importance of features for Tape App

Tape was also daunting due to the fact that we were dealing with video. We needed to be able to stream, download, edit and compile video all in the same app. Video files can quickly become quite large, so downloading and uploading them to the server often took a long time or would even fail completely. Compressing our videos meant we needed to find the perfect compromise between video quality and file size. Once we found the right balance we saw huge speed gains all across the app. Storing the files on a CDN also resulted in faster data transfer speeds.

Reviewing User Flows

The entirety of Tape's layout printed and discussed

Apple had recently purchased and integrated TestFlight, the technology that we previously used for distributing beta versions of our apps. We needed to get over some of the “growing pains” of the integration. Specifically, TestFlight would go down and not give us a warning. Unbeknownst to us, we tried pushing out multiple builds again and again to no avail. Finally, when TestFlight came back online it turned out that ALL of the builds we had tried to push went out all at once, giving our beta testers a nice surprise of 10 new build emails in their inbox.

BRANDING & VISUALS

Making it Nice

We had a lot of fun exploring various directions for the branding and visual identity. The look was fine-tuned through multiple name and style changes. You can see some early concepts that eventually evolved into Tape as it exists today.

Logo Concepts

Sketches for Tape App's icon for the App Store

Mood Board

Tape App branding guide and moodboard

Through continuous QA testing we were able to make sure we met our goals for each sprint. Conducting a beta testing phase with hundreds of concurrent users also meant we could test the stability of the entire system architecture before launching in the app store. We’re extremely proud of the work we produced and can’t wait to see what the entire Tape community creates!

Professional modeling headshot of Garret Jiroux

"The staff's hard work, dedication, and insight, coupled with their passion for transparency in our many channels of ever-open communication made working with them an absolute pleasure as our dream for Tape was slowly realized up to, and then beyond our once humble expectations."
— Garret, CEO Tape