Bubblop
|
Role
UX/UI | Product Designer Tools
|
Goodbye interruptive ads. Hello Bubbles.Are you tired of intrusive and disturbing ads? Who hasn't had their favorite shows get interrupted right at the climax? Introducing Bubblop, a delightful, interactive, and sharable new way of experiencing ads while viewing your favorite shows. Bubblop enables streaming viewers to interact with on-screen product placements, replacing classic ads that delay or interrupt the stream while collecting points for potential rewards. Out with the old and in with the new!
|
|
Prize winner for best use of tech.
The Brief
THE CHALLENGE
Leveraging emerging technology platforms and tools, NBCUniversal challenged teams to deliver a compelling new experience, product or service that met at least one of the following criteria:
• Introduces innovative and exciting/differentiating ways to tell stories
• Fosters deeper fan interaction and long-lasting connections
• Promotes community engagement with our NBCUniversal brands and content.
Leveraging emerging technology platforms and tools, NBCUniversal challenged teams to deliver a compelling new experience, product or service that met at least one of the following criteria:
• Introduces innovative and exciting/differentiating ways to tell stories
• Fosters deeper fan interaction and long-lasting connections
• Promotes community engagement with our NBCUniversal brands and content.
|
THE PROBLEM
|
Objectives
HYPOTHESIS
BUSINESS METRICS
- We believe that we can motivate viewers to develop a positive relationship with ads by providing an interactive, non-intrusive solution where viewers can participate, collect badges and earn rewards.
- We believe that our app will benefit the business as viewers will be more motivated to watch entire series and also inform on targeted ads as viewers choose what to click and interact with.
BUSINESS METRICS
- # of downloads
- # of clicks
- Rewards redeemed
Who are we targeting?
NBCUniversal and Telemundo non-premium viewers • Hispanic viewers • tech-savvy users
Early Ideation and Concepting
|
Before deep-diving into developing wireframes, my team started off with some basic concept drawings to figure out how Bubblop would be introduced to viewers and how the user could begin an interaction. We also brainstormed some potential brand names. Among the top 3 were: Bubblefi, Popofi, and Bubblop |
|
Logo
There were a couple ideas that were ideated for the logo and colors that were discussed, among the favorites were turquoise and orange. Here's how Bubblop's logo evolved:
|
|
The MVP is:
Clickable and small interactive bubbles that replace traditional and intrusive ads.
USER FLOW
With the MVP clearly defined, and due to the short time-frame of the hackathon, my team went over how the app would work and defined a step-by-step User Flow which led directly to concept sketching.
CONCEPT SKETCHES
Based on the MVP, we needed a clear landing page with the ability to showcase a Telemundo video with Bubblop enabled and in action. These are the basic steps on how Bubblop works and what it's all about.
Defining Color and Fonts
MOOD BOARD & STYLE TILE
|
|
For Bubblop's Moodboard, I highlighted the contrast between traditional, loud and intrusive advertising, and our more serene, discreet, and interactive approach. We want to delight viewers with ads and not frustrate them. The key words we would like to convey are: enjoyable, fun, subtle and reliable.
On the Style Tile, which defines further elements, we chose Futura as our main font used throughout and Helvetica Neue for smaller details and captions whenever needed.
On the Style Tile, which defines further elements, we chose Futura as our main font used throughout and Helvetica Neue for smaller details and captions whenever needed.
ONBOARDING SCREENS & TESTING
|
In order for users to start interacting with Bubblop, they will first see the following on-boarding message pop up during a show on Telemundo or NBCUniversal:
"Tired of Ads? Yes or No". If the user selects "No", they will continue watching their show with traditional ads as custom. If they select "Yes", then they move onto enabling Bubblop. |
|
These screens were tested for desirability among 5 users during the Hackathon and 70% of them chose On-boarding V5 with the "Yes" positioned to the right.
Users reasoning:
Users reasoning:
"'Yes', is usually on the right. If it's the button that you want people to click on, it should be there because if viewed on a mobile, it is where the thumb is likely to go first."
Busily working away...
HIGH FIDELITY SCREENS
|
|
Hi-Fi Prototype
This is the Hi-Fi proto website in action
And this is my team presenting Bubblop during NBCUniversal Miami's 2018 Hackathon :-D.
Back to:
|
See Next:
|