KAMELEON
Roku|BrainStation Hackathon Design Winner
Kameleon
Roku Inc. and BrainStation collaborated to organize a hackathon, and my design team -Steffi Chan and me- worked with two dev teams to come up with the winner. The process was exciting, had its shortcomings, and I enjoyed it so much I would do it all over again!
Challenge
Project Overview
HMW
Solution
Constraints
Design a solution that exposes users to new streaming services and ultimately, subscribe to them.
How might we entice viewers to subscribe to a new streaming app?
A genre mood test that narrows down cross-platform content suggestions based on user selections, for both desktop and mobile.
As hackathons are 24-hour challenges, naturally the main constraint we had was time.
Chosen Focus
Deciding what to watch, one of the biggest user pain points when it comes to streaming.
My Role
Duration
Responsibilities
Tools
Designed for
Prototypes
Product Designer & Main Researcher
One day
Figma, FigJam
Desktop and mobile
Desk Research, Branding, Prototyping, and Presenting
In order to identify a problem, we talked to both dev teams as if they were our target users. They all agreed that their biggest problem was deciding what to watch. At first, we wanted to make a Roku TV widget, but developers said this would be too tricky for a hackathon, so we chose a website for both desktop and mobile.
Since the hackathon had started at around 4pm, Steffi and I agreed to have 2 things done before continuing next morning: desk research and a content flow diagram. With the research, we could jump into making the Proto Persona and with the diagram, the developers would be able to put up the basic structure.
Since the hackathon had started at around 4pm, Steffi and I agreed to have 2 things done before continuing next morning: desk research and a content flow diagram. With the research, we could jump into making the Proto Persona and with the diagram, the developers would be able to put up the basic structure.
Step 1: Content Flow Diagram
Since the idea changed and it was no longer a Roku product, we decided this would be a feature on a small landing page for a hypothetical streaming service. Of course, the final selection would have take the user directly to the streaming site unnoticed, but we'd figure that out later.
We kept it simple.
The software engineers needed something to start working meanwhile Steffi and I came up with the details, so we put this diagram together.
Legend
Desktop Version
Mobile Version
Step 2: Desk Research
44% of consumers state that recommendations are rarely or never what they want to watch.
We needed the data to justify our decision and create our Proto Persona on the next day. And sure enough, we found what we were looking for!
7 in 10 homes now have an SVOD service and 72% use streaming-capable TV devices.
The 54% of consumers who don’t know what to watch spend an average of 7.4 minutes trying to decide, nearing the “10 minute warning”. 21% of them give up if they can’t make up their minds.
Our story in the numbers:
TV streaming is an increasing commodity, but so are options these offer to a point where users can no longer easily choose something to kick back and enjoy.
Step 3: Proto Persona
Meet Amy!
About
Bio
Amy loves how her subscriptions offer a ton of variety but this causes her to struggle with finding something to watch.
Nationality:
Age:
Status:
Job position:
American
30
Single
HR Coordinator
Motivations
Customized experiences, wants watching recommendations based on their mood in the moment.
Behaviors
Enjoys watching movies in free time, while eating at home. Has multiple subscriptions.
Pain points
Spends a lot of time finding something to watch, feels defeated after ~10 mins of search.
Quote
“I’m so indecisive when it comes to finding something to watch. There’s too many options!”
User Journey
We wanted Amy to go from spending over 7 minutes deciding what to watch, feeling overwhelmed and mentally loaded...
to having fun with a simplified and engaging experience that would not only reduce stress, but also cater to Amy's current mood and interests.
Current State
Future State
select something to watch quickly
As a watcher, I want to…
So that...
I can enjoy content that I can/already have access to.
have custom recommendations that match my interests
I feel my streaming service understands me.
have a brand experience
I feel more engaged with the content I purchased.
find out about new content from Roku channels
I feel stimulated in my watching experience.
connect my savings plan to my bank history
my savings plan is realistic in relation to my financial behavior.
connect my savings plan to my bank history
my budget is made based on my history and my savings plan.
subscribe to new channels easily
I can start enjoying new content.
Step 4: Task Flow
User Stories
After having a clear goal for our Proto Persona, we came up with a task flow using feedback from the developers. We had some disagreements, but in the end, we decided this would the service's main site instead of a landing page so the users were able to subscribe and watch the content in just a few steps.
The user would click on the mood test feature, then select a movie from the options based on genre, which would trigger another set of options. This process would repeat 3 times until the user got a final result.
The user would click on the mood test feature, then select a movie from the options based on genre, which would trigger another set of options. This process would repeat 3 times until the user got a final result.
Task Flow
Legend:
Step 5: Branding
This part didn't come before we started prototyping, of course. However, we were running out of time, so we had to work on it simultaneously with the website design.
We chose Kameleon as the name because we wanted this feature to adapt to users. Steffi came up with the phrase and we thought it matched perfectly with the reason behind this idea. In the end, we wanted users to know this was going to be fast, fun, and would result in customized streaming.
We started with a bit of wordplay to inspire colours and general look & feel of the design. We wanted to create a brand experience, so the main idea was for it to be interactive, engaging, and fun. The moment was around after hours, so the nocturnal feeling was important, too.
The Final Result: Prototypes
Miraculously, we had time to make both the mobile and desktop versions. As complete as possible, anyway!
Desktop version
Mobile version
Click on each device to see the prototype!
The Result
Kameleon was the hackathon design winner! The judges considered it solved the problem in the most creative, engaging, and empathic way.
Design Impact
Kameleon is a brand experience that uses standardized data (audiovisual genres) and turns it into custom results based on users' mood. It solves the problem of taking a long time to decide what to watch in a fun way, and transmits curiosity and expectation effectively.
Next Steps
The next steps for Kameleon include channel bundles for more subscription options, a "mood ring" interface based on the genre, or mood chosen for the streaming experience, and of course, a design for either the Roku TV widget, or the streaming TV app.
Key Learnings
This was an amazing experience and I enjoyed the team work, both designing and together with developers. Communication is key and we handled that pretty well. We organized our work logically and made it possible to give developers something to work on as we advanced on our deliverables. Given the time crunch, in the end I was proud of our work.
