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.
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 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
Logo type in motion
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.
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 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.
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.
The 'Shoutout' screen was created to encourage people to invite each other to their video chains
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.
Desktop version of webview
Mobile version of webview
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