DAZN (pronounced “Da-Zone”) is an international live sports streaming platform providing fans with unlimited access to live and catch-up events across the world. The service launched in Japan in August 2016 and has grown to America, Canada, Germany, Austria, Italy, and now Spain. DAZN is available online at dazn.com as well as iOS, Android, PlayStation, Xbox, Apple TV, Fire TV, and Smart TV’s.
...
DAZN Loading Icon
Above: This came about from a conversation about how loading spinners are becoming too generic and lack character. Unfortunately early in development we were seeing a lot of loading spinners, so I decided that if we're going to see them often, why not make an interesting adaptation of our branding as a rubix cube loading icon. I built this as a design challenge for myself using After Effects and it is now a part of our native iOS DAZN app.
Below: An additional loading icon concept.
...
ADA and Sections 508 & 504
(aka Closed Captions and Subtitles)
ADA is the Americans with Disabilities Act and sections 508 & 504 are the Closed Captioning & Web Accessibility Requirements. While the requirements are law I decided to personify each one into a user and their stories. I felt that this would better suit my UX thought process and give the requirements a personality and purpose.
User Stories
Nick is based on an actual friend of mine who is Deaf and hosts many social events at his house. Ruth watches a multitude of varying sports and is colourblind as well as Deaf. And finally Wayne and his family love watching Ice Hockey but English not being his first language, he prefers the french commentary while his family prefer english. While these were derived from the requirements of a legal document I now have real world scenarios and some solutions to explore.
One solution that intrigued me the most was having multiple 'sample' backgrounds the user could choose from to better suit the style of their custom closed captions for a particular sport to improve legibility. In movies or TV shows the general background image behind the subtitles can be anything. The advantage we have with sports though, is the general backgrounds tend to be quite predictable. For example the background in Ice Hockey is usually quite bright and white. Tennis can be on blue, brown or green courts. Soccer and American Football are usually on quite green backgrounds. And F1 is mainly grey.
Some other restrictions I had to work around (other than ADA and Sections 508 and 504) were:
• The option to edit subtitles visually would only be available on responsive web.
• Subtitle settings had to exist in the already designed Help & Settings page so...
• I could only use the designated GUI for the DAZN web app.
While the ability to turn Closed Captions ON would be available on the player for all devices, the ability to edit their appearance would only be on the website in the users settings.
After all this, I began doodling...
Among my sketches I considered nomenclature for certain attributes. Such as if I were to have multiple styles for my Closed Captions for different sports, would I call them Profiles or Styles? Another fun find was during competitor research on editing closed captions: the UX for controlling the level of transparency for a colour using a slider ranging from 0% transparency, to 100%. Which was odd as it would be just the same as going from opaque to invisible (or OFF). So with mine I instead considered replacing a slider option with a single tick box labelled semi-transparent. This way, the colour has already been chosen (which is opaque) and if they wanted something transparent they could tick the box (semi-transparent) and if they wanted it 100% transparent the there would be an option of NONE for colour (apart from text colour because having invisible subtitles defeats their purpose).
Subtitles in Current Settings
Based on the settings page and the player already being built, I found that during the wire-framing stage the designs were already quite close to high-fidelity so I decided to continue them to a finished look for sign off. This was an effective move to better convey my ideas based on them using the different sporting background images I mentioned before.
Above Left: Designs for the Subtitle Appearance section in the existing settings page using the DAZN GUI. Above Middle: the edit appearance window after selecting EDIT over a Preset and the above right is a detail view of the drop down showing all the font options in their actual font.
Below: More detail shots of the edit window. Left showing the semi-transparent tickbox in the colour options. The next two showing how an alternative background sports image can help the user decide on customisations to better their reading experience.
Subtitles in Current Player
Above: How subtitles will appear in the existing player on iPad. Selecting a subtitle language will display them in the last used Preset but if this wants to be changed on the fly then choosing settings at the top of the menu will open a window (pausing the video if VOD but resuming if LIVE) where another preset can be chosen and the size altered for different devices and viewing distances. Choosing EDIT from here will warn the user they will be taken to the Subtitles Appearance page in Settings and away from their current video.
To conclude my work with ADA and Sections 508 & 504 in DAZN I feel that Nick, Ruth and Wayne would have a much happier and meaningful experience enjoying live sports in a much more accessible DAZN. While these were fictional characters I made to personify all the legal requirements, the next steps will be real life user testing of the subtitle controls and settings to see how they compare against competitors and how effective they will be in real scenarios.
...
Google Chromecast
Above: Made for DAZN's marketing team to promote the new feature to cast video from a device to a smart tv. I always wanted to make an animated transition between two icons and here was my chance. I started out by sketching the idea of where lines could move from and to and then built it using After Effects and the Trim Path tool.
Below: This is the sketch file of the casting experience from a mobile device (I also made screens for tablet ux). Part of this I had to design the holding screen for the TV (receiver), casting options menu, and a new mini player to allow the user to be able to control the feed from the mobile app as well as stop casting.
Below: A motion design I threw together to better demonstrate how the mini player would appear during browsing and leave when the user scrolls back to the usual position the player would already be. This mini player allows the user to still control the video on the TV whilst browsing the rest of the app.
If a picture is worth 1000 words, then 8 seconds of a motion design at 30fps must be worth 240,000 words.
...
Recruitment Campaign - DAZN Careers Page
Along with some recruitment campaign ideas and banners, there came a task to build a temporary stand-alone jobs website for hiring software engineers. The reason it was stand-alone was there were already plans in place to improve the current DAZN careers page using an external agency. That was massively behind schedule and we needed developers.
I worked with one of our developers to build the site quickly but effectively. It took us a little over two weeks to go from sketches to finished, live website.
Below: I wanted to tie sports to career opportunities and found a quote from Wayne Gretsky "You miss 100% of the shots you don't take" and felt like that could work when talking about applying for an exciting opportunity like a new career. Then I found a few more and made them the main header of the page. These then link to their respective wiki pages to read more about the athlete. Future plans will be implementing motivating quotes from our developers and display them in a similar nature. A symbolic representation of how important our developers are to us along side the athletes we show
