Tape: The simplest way to create engaging videos with friends
The smartest, simplest way to create engaging videos with friends
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!
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.
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.
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.
Garret presents an early design concept
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.
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.
"Yeti really set out to not only understand, but internalize and expand upon our vision for Tape."
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.
Editor Flow Wireframes
Featured by Apple as Best New App with a follow up credit in the film and photography section.
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.
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.
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.
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.
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.
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!
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.
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.
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.
Contingency "Island" Map
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.
Reviewing User Flows
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.