Vine Header

Vine

Six seconds to our hearts
Overview

Back in the summer of 2012, we started a fun internal project (we do a lot of these) to experiment with consumer video technology. After we explored our first idea, the Pillar smart TV app, we realized we had only scratched the surface of possibilities.

There was one big opportunity that we couldn’t stop obsessing over: there weren’t yet any video-sharing platforms that had mastered speedy creation and consumption of mobile videos. Knowing there must be a better way, we jumped right into brainstorming, began building a prototype, and convinced all of our friends to be the guinea pigs of our new experiment.

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
Product Innovation
UX/UI Design
Strategy
Branding
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 tool with a single progress bar along the top of the screen.
ADD ME
The video would auto-save to your camera roll. With the absence of a social feed, we sent A LOT of videos back and forth over text.
Testing different Vine aspect ratios image
Testing different Vine aspect ratios image

TESTING DIFFERENT VIDEO ASPECT RATIOS & LENGTHS

Once the core functionality had been developed, we designed an MVP and released it privately to our friends and family.
Early Vine mobile screens
Early Vine mobile screens

Vine 1.0

Just before we planned our launch, Twitter asked to acquire Vine and the small team that built it! 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 core structure 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 bright 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 image

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 groups 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