Back to projects


Bringing people together through entertainment
UI/UX Design Competition
Elson Liang, Xavier Woo
June 2020 (Revised October 2021)
2nd Place (out of 985 teams)

Spotlight is an entertainment streaming platform for desktops that aims to foster authentic interactions between friends and family. The app bolsters the notion that entertainment is best experienced around the presence of others, especially in moments when said presence can’t be achieved given pandemic-related circumstances.

Contemporary entertainment streaming platforms lack opportunities for collaborative interactions. Spotlight capitalizes on this reality by offering features, like instant messaging and real-time watch parties, that cater to small groups of friends and family. The platform differs from large streaming and social networking platforms by prioritizing interactions within a user’s immediate social circle and the content they mutually enjoy.

This case study is a revisionary approach to our original 2nd place competition entry.


After 48 intense (and near sleepless) hours of research, sketching, iteration, and prototyping, our team was selected as one of the top 10 to present our project live in front of a panel of Adobe and Netflix representatives.

Following another round of judging, Spotlight was awarded with the second place prize!

Not interested in my design process? No worries at all.
Skip to final product

The Challenge

At the height of the global lockdown, Adobe & Netflix challenged us and 984 teams to conceptualize and design a third-party website/desktop app within just 48 hours that tackled the following problem:

Adobe & Netflix

How might we design a platform that can foster genuine & shared experiences for families & friends who otherwise can’t be together? 🎬🤔💻🤝

My Role

As the designated team leader, my job was to ensure that our team was efficient with the limited time that we had by keeping us on track with designing Spotlight’s core features; without getting lost in “nice-to-have” details that could be implemented later on. My other responsibilities were:

Leading an improvised design process
Delegating tasks based on strengths
Conducting informal rapid interviews
Organizing research discoveries
Visual design & interactions

Our Design Process

Within the first hour of the competition, our main objective was to break down what was given to us within the brief and cater our initial research efforts around it. We knew we had to be quick to understand and define our objectives since actually iterating and designing the prototype would take up the majority of our time. While we were not able to receive user validation for this project, we were still fortunate to have received feedback from representatives at Adobe & Netflix.

Design Process & Notes

Define & Discover

After thoroughly reading the brief, we jumped right into auditing existing platforms that we felt offered features that hit within the ballpark of what we envisioned as a truly collaborative entertainment-focused experience.

Existing Services Audit & Research

Platforms like Netflix Party, Scener, and Twitch were the ones that stood out to us the most since they each leveraged some form of collaborative interaction on top of entertainment delivery. By briefly testing each platform, we were able to gather specific features we liked, as well as ones we felt were impediments to a seamless user experience.

Rapid Research Affinity Diagram

Key Insights from Informal Interviews

In addition to our existing platforms audit, we also felt it was imperative to gain insight from users of our target audience demographic; which was us. We asked them each about their experiences using entertainment streaming services, their motivations towards using certain ones over others, as well as any frustrations they find themselves coming across more often than none. This provided us with the puzzle pieces that we found were missing from our platform audit.

Select User Personas

High-level Goals

By combining the insights we were able to gather from our platform audit and our informal user interviews, we managed to distill our focus and primary goals for our next 47 hours of prototyping to the following points:


Watch Party as MVP

Above all, we wanted our target audience to be spending the majority of their time actually enjoying content collaboratively. Therefore, we knew building an easy-to-navigate collaborative interface augmentative of their streaming experience was of top priority.

Seamless collaborative viewing
Meaningful interactions

Social Integrations

We discovered that impactful user experiences were fostered from subtle moments of social interaction; like asking a friend what to watch. Therefore, we aimed to enable meaningful, non-distracting, and most importantly, focused means of communication within a user’s network.

Friends help make decisions
Avoid creating a social network

Keeping it Familiar

Given that millions of people have become accustomed to navigating entertainment streaming platforms that are all generally similar in terms of sorting and searching for content, we felt it was important to preserve this experience within Spotlight. This way, they can easily migrate from their previous platform to ours.

Familiar browsing, sorting, and searching
More time watching, less time thinking

Strong Visual Motifs

To strengthen our overall product presentation, we wanted our visual design and branding elements to be tasteful and cater to our target audience. The objective was to capture the visual essence of being in a movie theatre and getting creative with how we’d incorporate the visual motif of a spotlight into the mix.

Strong, playful, and consistent brand identity
Ensure sophisticated and polished product

User Experience Flows

In following Jakob’s law, we aimed to preserve and present as much familiarity with existing entertainment streaming platforms as possible to users. This led us to categorize Spotlight’s user flow into three overarching phases: Onboarding, Browsing & Interaction, and Watching.

Information Architecture Overview

Onboarding Flow

New users or returning users who have not saved their credentials will be able to sign up or log in from the landing page, respectively. The sign-up process will ask users to enter their basic account information (name, email, username, password), as well as present them with an opportunity to curate their interests and connect any entertainment preference data from other services that they use.

Onboarding Flow Diagram

Browsing & Interaction Flow

A user’s general browsing experience after onboarding or logging in consists of three larger pages:

2.0 — Homepage
Here users are presented with uniquely curated content based on their preferences and watch history, and will also be able to pick up watching movies/shows from where they left off.
2.1 — Box Office
Spotlight’s take on the trending page. Users will be presented with relevant movies/shows based on current pop culture trends, upcoming releases, and social justice movements.
2.2 — My Reel
This is where users can find the content that they’ve saved to watch later. Users can also create custom folders of their favourite content that can be shared to their friends.

What adds that extra layer of interaction that we felt was lacking across several entertainment streaming platforms is Spotlight’s Friend’s Activity Sidebar. This feature enables and encourages users to be able to see what their friends are watching, which we hoped would prompt enriched moments of interaction, such as asking how they like the movie/show or even requesting to join and watch together.

Browsing & Interaction Flow Diagram

Watching Flow

Given that our MVP was contained within this flow, this was where we wanted our users to spend the majority of their time. Whether a user is watching a movie/show alone, or in a watch party with friends, they will have all the media-related controls readily available to them.

As content is being streamed synchronously across all watch party participants’ screens, they are provided with an additional layer of interactivity via live chat and video/audio feed. This is all in hopes that genuine collaborative experiences and reactions can be fostered to what is playing on users’ screens; which simulates, to an extent, the experience of watching something together in person.

Watching Flow Diagram

Ideal User Journey Map

Given that we only had 48 hours to conceptualize the entire user experience, we took all the data and information gathered from our research to compile a hypothesized ideal user journey map.

Sample Journey Map


To maximize our time for prototyping, we knew we had to be quick and efficient with iterating our wireframes. We were able to deduce Spotlight into two overarching typologies of interfaces; the content browsing pages and our collaborative media player experience.

Navigation & Browsing Wireframe Iterations

We distilled how we’d approach our content browsing pages into two options, the first of which was a left sidebar dashboard approach, and the latter being that of a more web-friendly top navigation iteration. To help us decide between the two, we decided to weigh out the pros and cons of each approach.

Option Set A: Dashboard Sidebar Wireframe Set
Option Set B: Top Navigation Wireframe Set

Sidebar Navigation (Option Set A)

Flexible capacity for additional tabs
Favourable for responsive design
Interferes with horizontal scroll/carousel

Top Navigation (Option Set B)

"F" pattern navigation hierarchy
Familiar navigation of most websites
Limited capacity for additional tabs

While the dashboard started out as our preferred approach due to its “trendiness” within modern web-based applications, we felt that it didn’t align with how we intended the overall user experience to be. For example, despite the left sidebar allowing for additional tabs to be added, we felt that it wasn’t beneficial for Spotlight as we had previously deduced the number of screens to be three (Homepage, Box Office, and My Reel). Moreover, it also impeded our intention to use horizontal carousel-like scrolling for content browsing as users may accidentally click on one of the tabs when attempting to scroll back.

Ultimately, the choice to adopt the top navigation enabled us to dedicate more screen real-estate to what mattered, the content. Additionally, although the number of different tabs/pages we could add was limited, it wasn’t as big of a concern given that we had already optimized the number of separate pages to three.

Mid-Fi Wireframe (Home Interface)

Watching Iterations

Understanding that the movie/show playing would take up most of the screen real estate, the challenge behind our collaborative media player was how we’d approach placing and designing the interactive component. We came up with three iterations, the first two of which contained a chat and video feed function in a sidebar, and the third which placed the video feed across the top of the screen, similar to that of a conference call. We took the same approach of weighing out pros and cons for these iterations as we did for browsing.

Lo-Fi Preliminary Iterations (Theatre Interface)

Chat/Video Sidebar (Option Sets A & B)

Easy text chat integration
Choice between video/text chat
Not friendly with wider aspect ratios

Dynamic Top Overlays (Option Set C)

Greater focus on video interactions
Unique collaborative interactions
Requires camera on for full immersion

With this decision, one thing was certain, and that was the fact that we wanted users to have the choice over their preferred medium for communication and interaction while in the watch party. With that said, we knew that a dynamic overlay approach with video feeds across the top of the screen would inconveniently force users to communicate strictly over video and audio. We felt not only could this be a privacy issue, but also one that could impede users with slower internet connections.

Mid-Fi Wireframe (Theatre Interface)

Content Card

Similar to other entertainment streaming platforms, we wanted the content and its information to be presented with accumulating detail as users begin interacting with them. Specifically, a given content card only presents a movie/show’s most important pieces of information (title, genre, and rating). If a certain movie/show catches a user’s attention, additional controls and information about it will be revealed as a user hovers over the card.

Rating System

After our interview with Jennifer, an interesting insight we had discovered was the unreliability of official critics’ reviews. When she told us that her discovery of her favourite movies/shows was the result of recommendations from her friends, we knew this was an opportunity for Spotlight to shine. The challenge here was to conceptualize a proportional relationship between content rating accuracy and a user’s network influence.

Content Card Wireframe & Rating System Logic

Spotlight’s rating system is a percentage-based weighting combination of a user’s network preferences and critics’ ratings; meaning each user will likely have a unique rating for any given movie/show. This also means that as a Spotlight user’s social circle grows, the more their respective content rating system will be influenced by their friends’ opinions instead of critics. For example, if a user has 35 friends where 30 of them enjoy a movie (~86%), and the official critics’ rating for that movie is 82%, then their customized rating for that movie would be an 83 (see right side of the diagram below for detailed calculation).

Branding & Visuals

Our focus on Spotlight’s branding was in many ways a pursuit of bringing the in-person movie theatre experience to home. It was also an opportunity for us to express our graphic design backgrounds in the greater effort of creating a more sophisticated end-product.


The goal with our logo was to keep things simple and playful through the incorporation of a spotlight as the main visual motif.

Logo Spacing & Concept

Colour Palette

Spotlight’s colour palette was largely inspired by the aesthetic of modern movie theatres, meaning a dark theme was a must. To maximize usability and accessibility, we familiarized ourselves with Material Design’s dark theme colour elevation principles and decided to use four slightly varying shades of grey (increasing in brightness as component elevation increased).

Dark Interface Palette & Depth Layering
Brand Palette


Our typeface choice for titles and headlines was that of something bold and geometric to really stand out to users. Small kerning reductions were made to further enunciate its distinction between body text. Moreover, speaking of body text, we chose a narrow/medium width typeface to maximize legibility in addition to preserving a little bit of character and flair.

Typography Selection

Final Designs

Finally, came the prototyping stage, where we would implement all of our branding and visual design within the structural logic of our wireframes. The use of the spotlight visual motif was similar to that of its real-life application; to bring focus to certain elements. Brighter colours such as Box Office Blue and Premiere Purple were used sparingly to bring more attention to call-to-actions and buttons without visually overwhelming them.

Select Interfaces Catalogue
Sample UI Components

Product Landing Page

Landing Page


Onboarding Process

Content Card Interactions

Content Card Hover

Browsing & Interaction

Homepage Interactions
More Info Page
Activity Bar Interactions

Watch Party Experience

Inviting a friend

Results & Reflection

User Experience
Overall Design
Project score is determined based on the average scores of two or more judges.

Roughly 24 hours after our project submission, we learned that Spotlight had scored 95.5/100 on a judging criterion based on Audience Accommodation (25/25), Innovation (21.5/25), User Experience (25/25), and Overall Design (24/25). This meant that we were one of the top 10 finalist teams invited to present our prototype live on stream with product representatives from both Adobe and Netflix in attendance.


Our project, Spotlight, came in 2nd place out of 985 teams! 🥈🎉🥳🎈🎊

Lessons Learned:


Strong MVP > Having a bunch of features

Having a targeted objective helped our team stay on track with the competition brief and accomplish our goals within the tight timeframe.


Good designs are backed by research

Even if it's a quick Google search, every design decision needs to have a logical reasoning behind it. The more proof, the better.


User experience first, then aesthetics

It was difficult trying not to be pixel-perfect, but we figured a cherry on top of a bad cake doesn't change that fact that it will still be a bad cake.

Notable Highlights:



Our group was constantly sharing unique ideas. This allowed us to bounce off each others' thoughts and come up with new approaches.


Leveraged Strengths

Whether it was research, visual design, and everything in between, playing to our strengths enabled us to complete efficient work.


Technical Knowledge

Being given a task and working hands-on with prototyping software was the best way for all of us to learn how to be more proficient.

What we could've done better:


More user insights

More user interviews could have been conducted to cross reference pain points and motivations; and perhaps discover ones we missed.


Quantitative Data

Much of the data we had used to make our design decisions was qualitative. Numbers don't lie and can be easily obtainable via survey.


User Validation

Our contact with potential users stopped after our research stage. More time should have been allocated to testing our wireframes.