hoop social video chains

Designing a social video collaboration platform

App Design · Branding · User Experience · Product Design

My Role
Lead UX/UI Designer
Brand Designer

Year
2016

hoop was a social platform with the goal of empowering video creators to share videos, inspire each other, and create video chains together. I've joined this startup as one of the first employees, and together with a close, passionate team, we have built everything from the ground up.

As the Lead UX/UI Designer, my primary responsibilities included creating the brand identity, designing the user experience and interface, and working with the team on the next generation and vision of the app. In addition, I designed the company's public website and supporting products such as the backoffice tool and webapp view of the content.

The challenge

Creating a compelling identity for hoop to attract video creators through the concept of video chains

Diverse content creators are key to the success of a video social platform like hoop. They help onboard and retain a diverse audience, drive engagement and community building, and attract advertisers and partnerships. That's why we targeted video creators with existing followers as our initial user base. By bringing them on and showcasing our unique video chain feature, we aimed to attract their followers and build a strong user base.

Branding-layout-1

Colorful, bright and playful

Name and Logotype

hoop just clicked as the perfect name for our video sharing app

We chose the name "hoop" as it conveys a sense of playfulness, and associations with the idea of a challenge or a game, it also looks like the word loop which fit into the fact that all videos on the platform are looping.

These associations aligned well with the app's concept of creating a chain of videos with a common theme, and helped make the app feel like a place where users can engage in creative challenges and competitions.

Conveying the concept of chain creator and video responders

Brand_logoAnimation_short-1-1

Logo type in motion

Hoop_app_icon-5
App-Icons_with-hoop-6

App icon

Standing out while fitting in

hoop launched during a time when video consumption was at an all-time high. This meant that the industry was thriving, but competition was strong. Companies like Vine, Facebook, and Redbull were all creating custom apps to attract both video creators and viewers. hoop stood out by addressing the need for a better way for video creators to communicate and respond to each other.

When designing the app's visual elements, such as the colors and app icon, we aimed to communicate similar values as the competition while also standing out using the main pink to red gradient color. 

Notifications_iPhone
Categories

Video categories

Illustration style

Adding more depth to the brand and not being afraid of colors

To add to the app playfulness and to make sure that all 'realistic' visuals stay user generated, I had to create a complementary illustration style. This style was used in the different video categories icons, to convey complex concepts during onboarding and to delight users during their experience. Later in the process, the style was also expended and applied into user achievement badges and other marketing materials. 

Badges

Badges and points

Newbie illustration in motion

Designing the hoop app

iOS native app and webview

The horizontal scroll video chain

Back when video posts didn't have a horizontal swipe option

The whole core of the app is to allow for video creators to form an endless video chain, inspired by the trend of the ALS ice bucket challenge when it was clear that linking videos was a thing. After a few iterations, we created a series of elements that teach the user this new pattern, from the app introduction to an animated hint that appears on posts until users swipes for the first time. 

Hoop_cover_05-7

Before IG did it... solving the full screen horizontal swipe when that was not yet a common user pattern

Using first time experience hints

Introducing the horizontal video chain concept in the app intro

Creating in app triggers

Encouraging collaboration

After we confirmed with users that the concept of a video chains was fairly clear, the team faced a new challenge, users were just too used to creating new posts instead of responding to others and actually collaborating. This is when we made a few changes to the app core mechanism and added a gamification system that drives users to respond to others before just starting a new chain.

shoutout

The 'Shoutout' screen was created to encourage people to invite each other to their video chains

Shoutout-flow-01

Webview

Making sure the content is alive outside the app

By creating a webview of the content, we empowered our users to share their videos on other social media platforms, and challenges others to join our platform and respond. This helped to increase the video's reach and attracted new user to our platform.

Finally, having a webview option ensured that users have flexibility in how they access and view the content, and allowed them embedding and linking to it from their own channels.

Webview-desktop

Desktop version of webview

Webview-mobile

Mobile version of webview

Grid-view-end

What happened to hoop social video chains platform?

Outcome #1

With a small team we were able to design, build test and iterate creating a fully functional social platform within just a few months

Outcome #2

After just 1 year in production, the app had 50K active users

Outcome #3

Finally, the app was sold to 'Stitch videos' and the startup closed