Kameleon

View Prototype
First-place team of a cross-disciplinary hackathon aimed to entice viewers to subscribe to a new streaming app.
Project Type:
Team, Dev Collaboration, Designed for Desktop & Mobile
Duration:
24 Hours, November 2023
My Role:
UX/UI Design, Research, Prototyping, Branding, Presenting
Tools:
Figma, Figjam, Adobe Photoshop

Problem:

Streaming users on average spend 7+ minutes before finding something to watch and are often overwhelmed by choices. 44% of consumers state that recommendations are rarely or never what they want to watch.

Solution:

An interactive quiz feature that simplifies the decision process by providing content recommendations tailored to the user's current mood. This will lead to less mental load and stress while also decreasing barriers to customer watch time.

Brief

This hackathon was an industry project aimed to tackle a problem space presented by BrainStation and Roku Inc. I worked with another UX Designer (Inés Canjura de León) and two software developer leads. We were given 24 hours to think of a solution given this HMW statement:

How might we entice viewers to subscribe to a new streaming app?

This was definitely an exciting challenge given the time crunch and it was a great opportunity for designer-developer collaboration.

My team created an interactive tool that can help viewers decide what to watch based on a mood quiz feature. This solution would take mental load off users and reduce the time spent making a decision, therefore increasing watch time.

We presented our ideation process and prototype to a panel of judges and earned first place.

Process

Where do we start?

In this project, Inés and I worked with two software developer teams (10 developers in total). Since we had a time constraint, we decided to start by conducting primary research on the developers which consisted primarily of North American millennials.

They also expressed that they desired concise recommendations that were tailored to their mood.

Inés and I decided to expand on our research to develop a data-driven solution.

We decided to hone in on this issue. Users are given so many options nowadays that it's hard to choose something to watch on streaming platforms.


It was time to think of solution.

How can we get users to their desired content in a simple way without overwhelming them with too many options. We considered gamifying the process by making the experience interactive. What about a personalized quiz?

Since we needed to create a design that would be simultaneously built by the software development teams, we had some limitations. We thought about doing a TV widget but it wasn't as feasible within 24 hours. We started sketching and decided to build a marketing website and demo that would communicate our product's features instead of building out a whole widget.

Inés and I created a content flow diagram which would become a starting point for both the UX and developer teams. It was very valuable to have constant communication between UX and software development teams as we were able to bounce ideas off one another. It also ensured a smooth handoff that would create a consistent end-product.

In the task flow:

  1. The user first clicks on the mood quiz feature.
  2. They then select a movie from the four options based on genre, triggering a refined set of options.
  3. This process would repeat three times until the user has their tailored selection that fits their mood.

We came up with branding for our product to tie everything together. Starting with key words and More A Then B statements to pin point our brand's identity. This would help inspire the look and feel of the platform. A rough mood board was created to compile imagery and colour combinations that we thought spoke well to our product's interface design.

The name "Kameleon" is a play on the word chameleon, the colour-shifting lizard that adapts to its environment. Just like a chameleon, the mood quiz feature of the platform can adapt to the user's current mood and movie craving.

I created a bento to present our brand identity at a glance:

Our Final Product

View Prototype

View Prototype

The Result

Design Impact

After presenting, the judges loved our idea. People thought that our persona was very relatable and could empathize with the pain point we were addressing. The product is able to offer users with an engaging and personalized experience.

The judge from Roku felt that our solution was also aligned with the business goals. By making the decision process simple, users are able to get to the content sooner which means more view time.

Key Learnings

The hackathon experience was challenging but also very rewarding. The overall process was a condensed version of a typical design sprint so it was important to prioritize tasks without compromising on crucial steps when creating a user-centric design. It also meant that we needed to adapt quickly when facing road blocks and pivots.

When working in a team, communication was instrumental in ensuring we were making good use of our time and manpower.

As Inés and I both came from different backgrounds in addition to UX design, we were able to leverage and complement each other's skills. She led the research component while I took charge in branding strategy. Although we were tired by the end of the 24 hours, we were proud of our work!

What's next?

When presenting our solution, we explored potential next steps for Kameleon. We thought about incorporating the feature with different Roku channel bundles.

From an interface perspective, we also thought about playing into the chameleon theme and possibly have the feature's colour theme adapt to different user options like a mood ring. Kameleon can then potentially be used a TV widget for the streaming services on Roku's platform.