Projects
About
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!
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:
How might we design a platform that can foster genuine & shared experiences for families & friends who otherwise can’t be together? 🎬🤔💻🤝
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:
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.
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.
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.
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.
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:
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.
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.
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.
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.
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.
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.
A user’s general browsing experience after onboarding or logging in consists of three larger pages:
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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).
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.
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).
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.
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.
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! 🥈🎉🥳🎈🎊
Having a targeted objective helped our team stay on track with the competition brief and accomplish our goals within the tight timeframe.
Even if it's a quick Google search, every design decision needs to have a logical reasoning behind it. The more proof, the better.
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.
Our group was constantly sharing unique ideas. This allowed us to bounce off each others' thoughts and come up with new approaches.
Whether it was research, visual design, and everything in between, playing to our strengths enabled us to complete efficient work.
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.
More user interviews could have been conducted to cross reference pain points and motivations; and perhaps discover ones we missed.
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.
Our contact with potential users stopped after our research stage. More time should have been allocated to testing our wireframes.
