Vine Header

Vine

Six seconds to our hearts

Overview

In the summer of 2012, we were working on a fun internal product (we do a lot of these) called Pilar - a TV app that integrated animated stories and social content. While working on it, we had a cool idea for how to make gifs for the platform using a simple hold and record functionality. While testing it out, it suddenly clicked that video would be even better. We quickly made a prototype and gave a bunch of our friends the app to play with.

As we worked on it further, we realized we were on to something really good. Our friends at Twitter thought so too, leading to an acquisition just a few months later.

Our Role

Strategy
Branding
UX/UI Design
Development
Vine mobile screenshot

Product design

The Vine Beta

Re-creating the video experience

ADD ME
Our first test of Vine was simply a touch-to-record camera and a single bar along the bottom.
ADD ME
Our first test of Vine was simply a touch-to-record camera and a single bar along the bottom.
ADD ME
The video would auto-save to your camera roll. We texted a LOT of videos back and forth.

After we built a quick tester, it was time to design. Our intention was not to create a new social network; we wanted to design a new way of making videos, focusing on artistic expression. We chose the name Vine to represent a series of videos growing, one after the next, in a row.

Testing different Vine aspect ratios image
Testing different Vine aspect ratios image

TESTING DIFFERENT VIDEO ASPECT RATIOS & LENGTHS

Once the initial functionality had been sorted, we designed an MVP and released it privately to our friends and family to give it a try.

Early Vine mobile screens
Early Vine mobile screens

Vine 1.0

Just before we planned to launch, Twitter asked to acquire us! This gave us the opportunity to apply our learnings from the Beta, and to create a proper brand for the app.

Branding

Visual Identity

We kept the name Vine and the general concept of the word mark - with the loop in the V representing the looping video. We chose a green to help the app stand out and align with the name, naturally. We paired Helvetica with a super friendly color system and iconography style to keep the identity clean, minimal, creative, and playful.

Naming + Logo

Vine visual identity image

Colors & Typography

ICONOGRAPHY

Vine 1.0

Just before we planned to launch, Twitter asked to acquire us! This gave us the opportunity to apply our learnings from the Beta, and to create a proper brand for the app.

Vine visual identity mobile image

This was the first version of Vine that launched to the public in 2013.

Vine version 1 camera screen imageVine version 1 post screen imageVine version 1 profile screen image

Vine.co

The primary Vine experience was on mobile, but we needed a way for desktop viewers to interact when Vines were shared on a computer. We also included basic search and browse functionality so people could watch at work, LOL.

Vine.co home pageVine.co profile page
Vine.co home page
Vine.co profile page

Collateral design

Everyone Loves Some Swag

Vine swag image
Vine swag image

Results

A Huge Cultural Impact

Vine was super fun, super successful, and we all miss it very much. It had major impacts on our culture: it was the first platform post-YouTube that people used to cultivate a following and fame. Existing celebrities used the platform to share a different, quirkier side of themselves, and a bunch of new Vine-stars emerged. And it was a huge platform for people to share comedy, giving previously underrepresented individuals a democratized platform to share their personal brand of humor.

Some Final Stats ☠️😢

200 MillionActive monthly users
5Vines tweeted every second
1.5 BillionNumber of loops watched daily