Web Design

NBC SPORTS

BACK

A new live portal and tool for NBC Sports International to share and promote their titles and create instantly a custom PDF presentation.

nbcsports-int.com

 

Details

year // 2019

role // Lead Product Digital Designer / UX Designer 

client // NBC Sports

duration // 10 months

Categories

Web Design

Tools

Sketch / InVision / Illustrator / Animate CC / After Effect / Crazy Egg

/ NBC Sports live portal

Discover / Brief

NBC Sports INTERNATIONAL had an existing online portal to preview available titles and then select them to create a PDF presentation to be used as sales material. This existing solution was un-used due to the complexity of the website itself.

The client needed an updated, simple and modern public portal to be their first impression to clients willing to buy NBC Sports titles and also a tool for sales representatives to download PDF ready-presentations with requested titles.

Discover / Research

To convert internal staff and external users to use this tool I started my research by understanding the reasons why the existing tool wasn’t adopted. Firstly I reviewed and analysed the online solution to understand the user flow and the level of simplicity.

I was also able to speak with the only adopter of the online tool that used to download the requested presentations for every member of the staff.

To complete my research I analysed and compared similar existing solutions to help in creating a familiar environment for the user and so to improve adoptions.

Challenge

Creating a tool that was functional, effective and simple and, at the same time, visually appealing and engaging to be used not only from internal staff but also available to the public, and so designed to be then adopted as a tool by everyone.

/ Wireframe

Discover / Strategy

Getting a client to understand the value of wireframe and receive useful feedback on functions (rather than aesthetics) isn’t always easy. For this project, I created a version of the wireframes that looked better than their live websites but still simply based on functions before style.
In this way, we received first the desired feedback on functionalities and after all of them were calibrated to their needs we were able to request
feedback on UI to update the website style to a more modern and pleasant looking version.

Define / Concept

The wireframe presented to the client had all the main functions (either existing on the live website or new and useful) with basic branding applied. As this website had to work in a similar way of an e-commerce website with a PDF downloading as an ending point I structured it mainly like one. I introduced a section for filtering on the left side and a bottom section for selected titles (like a basket) with options not only to download the selection in a PDF presentation but also to share it directly via email to multiple contacts. On top of this, the titles had a quick preview option for the user to check the title itself being sure of not losing the existing selection.

Design / Solution

I was able to create a concept with all the main features that were going to simplify and improve effectiveness and usability, and then by simplifying and applying the latest web design trends to the product I achieve a solution that exceed in all aspect client’s requests and solved effectively the main challenge.

On top of this the all platform was design mobile-first so the user, that will work with the platform, will have less obstacle to become a recurring user.

/ Streamlined User Flow

/ NBC Sports overview

/ NBC Sports live portal

Related projects