HTML5 player
Launching an HTML5 web player with DRM support - beating Netflix to the punch!
HTML5 Web Player
Prime Video was moving away from Silverlight as it became unsupported by Microsoft. The industry was pressed to figure out Digital Rights Management (DRM) within an HTML5 framework. Having designed the previous player versions, I was tasked to redesign the Web player for this new framework. Using Fire TV as a reference point I designed a player that fit within the Prime Video player suite, but also touched on unique Web attributes and input requirements.
Anatomy
1. X-Ray safezone
2. Title
3. Controls; Subtitles & audio, Playback quality, Volume, fullscreen, close.
4. Play/pause, skip 10 seconds
5. Timestamp, Stream quality indicator
6. Progress bar, Slider
7. Next episode
8. Trickplay
9. Next up
Subtitles & audio
Subtitles/captions & audio language can be quickly turned on/off via the controls. This went though several versions of design — ultimately we wanted to foster discoverability and give customers the ability to effortlessly swap language options without interupting playback.
Subtitles can be adjusted via ‘Subtitles settings’. Here you can change size and style. Styles can be further customised wthin the account section.
Here a customer has turned on Subtitles by selecting a language. Subtitles are then displayed at the bottom of the screen.
Video quality control
Data concerned customers are able to switch out their streaming quality.
We also ask them to rate the quality via a feedback dialogue.
Customer satisfaction
A quick way to gain some Customer Satisfaction metrics. Customers can rate their streaming experience anytime and offer some feedback for analysis.
Next up
The next up card is displayed when the credits role. This card can be hidded, muting the action of auto-play.
Initially the countdown to autoplay was 30 seconds, allowing ample time for decision making.
We performed tests around auto-playback and found that an increased speed resulted in higher consumption metrics. The speed was therefore increased to 5 seconds.
Advertising
Designed the plan for advertising — this initiative was intially targeting Non Prime customers, allowing them to watch the first episod efree, with ads. These days thoguh advertising has become default for all Prime customers and continues to act as a big revenue stream for Amazon.
This presentation using small pips to represent ad breaks was relatively new to stremaing at the time — now very mainstream.
This also included a ‘skip ads’ option after a set time.
Purchasing in player 🛍️
CONCEPT
Concept for purchasing in-player. Targeting non Prime Subscribers, by offering the first episode free, and prompting a purchase flow at the end of the free episode.
For customers taking advantage of transactional video-on-demand, this allows them to purchase eipsodes or complete seasons while watching.
Cross platfrom delivery
A cohesive design language across all devices.
Desktop
Mobile
Fire TV,
TV apps & consoles
Work process
Exmaple of redlines delivered to the development team.
Responsive guidelines
