Video Player Redesign
The Story
The video player is a primary feature used in our application it should be easy and inquisitive to use. A benchmark study was done to see how our product was being received to users. Some of the key takeaways were that users were not satisfied with their experience.
​
The Ask: To take a look at the current video player design on all platforms and find areas of the that could be enhanced for a better experience and to create a consistent design and experience regardless of what platform the user was on.
​
Project Details
ROLE: UI Designer, UX Research, UX brainstorming
TOOLS: Sketch, Confluence, Slack, Abstract
The Research
Our group did extensive research on our product on different devices along with competitors.
Design Comparison within Our Products
Video Player on 10ft devices (Roku, FireTV, Tizen)
• Soft UI visible to user
• Scrub circle different style
• Channel logo in upper right area
• Channel metadata above progress bar
• No progress time associated with progress bar
• Soft UI and remote does not work as expected by the user
Video Player on ATT TV (10ft)
• Soft UI hidden from user
• Scrub circle different style
• Channel logo locked up with channel metadata
• Channel metadata below progress bar
• Progress time shown with progress bar
Video Player on ATT TV (mobile)
• Soft UI in multiple places
• Scrub circle different style
• No option to scrub through progression
Video Player on ATT TV (web)
• Soft UI in multiple places
• Scrub circle different style
• No option to scrub through progression
Design Comparison with Competitors
Key Insights
• The app lacked basic features that a user would expect (not being able to pause on live tv, no keyframes)
• Certain devices here confusing to use (it didn't do what the user expected it to do)
​
• When compared to other devices, it did not have a branded look a feel
​
• When put side by side, the featured looked different on each platform
Design Approach
• Determine which features would help enhance current experience.
​
• Decide how to make the current look and feel of the design consistent
on all platforms.
​
• Rework video player UX experience to make it easy and predictive
for the user.
Low Fidelity Wireframes
When working on the wireframes, we started off with the sky as the limit. We mainly focused on the different types of players we offered along with the options that should be available to the user.
Design Challenges
• Designing for different types of players (LIVE,VOD,cDVR)
​
• Designing for devices with limitations (Roku)
​
• Designing with different engineering teams that had their own limitations
​
•. Designing a feature with functionality that will work on with different remote controls
The Final Product
The 10ft video player for Roku, FireTV and Tizen were all aligned. The ATT TV device and the tvOS device remained the same due to limitations. We were able to align the 10ft style closely to the ATT TV device so it felt like it was from the same family.
​
For the mobile, table and web versions, we were able to align them closer than they were before so they were all able to work the same on any device.
change image to include the play/pause
UPDATES MADE: Video Player on 10ft
• Soft UI hidden/muted down
• Scrub circle matches ATT TV style
• Progress time associated with progress bar
UPDATES MADE: ATT TV (Mobile)
• Scrubbing option brought in
• Jump options available
​
​
UPDATES MADE: ATT TV (Web)
• Scrubbing option brought in
• Jump options available
​