Sony Pictures : Screeners
Screens App Redesign
PROJECT OVERVIEW
My Role: Lead UX Designer
Tools: Sketch App, InVision and Zeplin
BACKGROUND
Screening Room Online was a Sony Pictures Entertainment application used by sales teams and executives to preview advanced content.
The ask was to create a new application design with a cohesive feel and user experience across phones, tablets and desktop.
The goal
The Screening Room Online (SRO) user base was a limited group of mostly internal Sony employees and the content was kept to the newest releases and advanced content. The hope going forward was to expand the content library and to expand the user base to include external people as well.
The major problem was that SRO existed in two different and disconnected capacities - an iPad app and a web portal. The iPad app featured a static landscape orientation and had to be manually installed on devices. The web portal was a copy of the iPad app but with added functionality that was built by a different business unit.
In order to open the app up to more content and more users, we needed to create a flexible design for multiple devices that would maintain a cohesive user experience throughout. That meant dealing with outstanding pain points related to architecture and usability as well.
The original iPad homescreen
Pain points
GROUPING
By far, the most painful pain point was the lack of content grouping. In the app content was separated by category and not title which felt very disjointed and incomplete. There was no place to go for an overview of all content related to a title.
ARTWORK
The existing app handled artwork so poorly. On the homescreen, half of the poster / packshot was covered with a text box that would obscure the imagery as well as the content branding. Elsewhere in the site, when it was unobstructed, it was still just very small.
GENERAL USABILITY
One of the biggest reoccurring problems was that users would filter the site by subtitle, forget that they had the site filtered and then call support asking why they couldn't find content. The visual feedback for the active state of this filter was so insignificant that even the support team, who knew what to look for, would often look past this when trying to troubleshoot!
The users
SRO was an established product and while their were no personas created, there were established user "types" that we knew we were designing for. Unfortunately, we would have to start this project with a more abstract understanding of these users as we searched for design solutions.
Our key user types were:
ADMINS
Admins were mostly office based and would be big users of the web and iPad apps. They set categories and regulate permissions of other users.
BUYERS
In the past, these users were being sent playlists of content that were generated by salespeople and that was the only way they interacted with SRO. Going forward, they would be getting full access with a baseline of categories for them to freely browse. These users would be using SRO style apps for multiple studios and a bad experience with us could effect how they viewed our studio and content.
SALESPEOPLE
The sales team is scattered across the globe and would be needing an easy to use, straight forward experience on their mobile devices mostly. iPhone, iPad and sometimes laptop.
Platform analysis
The consensus from our stakeholders was that they wanted to have the look and feel of a commercial video on demand service that was consistent across all available platforms. We looked at the VOD marketplace leaders Netflix, Hulu and Amazon as well as premium services like HBO and Showtime.
We knew that our app was going to have to go many places that a B2C platform didn't have to go but we wanted to know how they handled the transition from desktop to handset. We learned a lot about responsive content grids and grouping from this exercise and we ready to get ideating.
Regrouping…
The biggest pain point coming in to this project was also one that deeply affected the structure of the platform. Access to the Sony Pictures Screeners platform was and is based on category access. Previously that had translated to a very disorienting experience where a user may not know all of the content they had access to related to a specific title.
We began our redesign process by establishing new rules and guidelines for grouping based on title instead of category. Creating a single title based repository with multiple access points that housed all of the user's available content based on their access level, would result in a smoother and more complete viewing experience.
Once the new grouping guidelines and principles had been established, we began ideating. There was going to be a lot of content so we wanted to start by looking at the handset/phone views to make sure it all fit functionally.
Version 1
This general idea took a couple forms and came directly out of our observations of other VOD platforms. In this scenario, the categories would be lined up in a row that scrolled side to side. For a straight up B2C platform, this slider would simply contain one season after another. From a users stand point, the expectation would be that the seasons would increase until they stopped and that would be it. In our case, we would have more than seasons, we would have any number of additional categories that may or may not be expected. This version, while clean and concise, would hide too much information from our users.
Version 2
This version fell in to may of the same pitfalls as version 1 but was potentially even worse at the same time. Swapping the slider for a single category drop down kept a clean look but withheld even more information from the user. This option would have potentially scaled up better, but this shortcoming was too much for us to continue with it.
Version 3
After two failed designs, we realized that we needed to fully embrace the wealth of content that we would be providing our users. Staying close to version 2, we instead went for an accordion approach so that all available categories would be visible to the user.
This gave us some flexibility for how to scale the group details page for iPad and web. For our first pass, we maintained the accordions across all iOS devices.
Mobile first
Once we came to a consensus on how to handle grouping, we began to flush out the rest of our key mobile screens and map out a full suite of sketches and wireframes.
From a structure and flow perspective, we went with a fairly straight forward approach of category based sliders of content on the home screen and grids of content on the browse and search results pages. This allowed for quick and easy access to a title's group details page, filled with all relevant metadata and playable content.
To the right is a low fidelity wireframe prototype showing the flow of a user logging in, selecting their business unit, finding a title and reviewing its contents.
The web
Moving from mobile to web brought a new set of challenges. With the phone and tablet devices, you are dealing with static widths. As a result, setting up rules for content grids is fairly straight forward. Creating a responsive grid of content for web required revisiting our platform analysis and a lot of number crunching.
It came down to deciding between two responsive models. First, a left aligned site where the individual thumbnails grow and contract to completely fill the width of the screen. Alternatively, a center aligned site with static sized thumbnails in which the outside gutters do the expanding and contracting.
Initially we went with the first model but when we got further in to the site, we found it was going to be problematic dealing with a wealth of information on the details pages. As a result we went with the second model because it allowed us to determine any number of set breakpoints that we wanted to support and design for them specifically.
With our suite of breakpoints related to the content grids on the home and browse pages, it was important to have all other screens (namely the content details pages) utilize the same behavior while maintaining readability. Below is an example of our content details page resizing in the browser window, hitting all of our breakpoints and adjusting slightly to maintain readability while preserving continuity.
Architecture
The architecture of the iOS and Web apps are nearly identical as we mirrored functionality across all platforms. The only major difference would be that iOS allows users to download content and the web does not. This continuity allows users to work on their desktop in the office and continue to work on their phone or tablet as they jet around without missing a beat.
Mock-ups
Launch
Our Web and iOS app launched during MIPCOM 2017 in Cannes, France to about 200 users who put it through the ringer! The usage scenarios of sales people using the app to download content and demo it for clients came to life and we made it through with pretty great reviews.
Post launch saw the design and development of new features both large and small - content filters, playlist management, etc and I will be writing those up shortly.