This project is a personal endeavor and is not affiliated with, endorsed by, or representative of NBC Universal (NBCU) or any of its associated entities. The use of any NBCU trademarks, logos, or other intellectual property is purely for artistic and informational purposes. All rights to the original materials are owned by their respective copyright holders. This project is not intended for commercial use or distribution. Any views or opinions expressed within this project are those of the creator and do not necessarily reflect the views or opinions of NBCU or its affiliates.
NBCUniversal Local | AdPlaybook
By Guillermo Ramírez
Due to restructuring and rebranding efforts, many of NBC's old digital platforms became obsolete with outdated information stranded in a digital limbo. This project revitalizes a crucial platform for the NBC Local Stations: the AdPlaybook, a site that provides potential NBCU Local clients with information about the available digital advertising offerings on these stations, including those affiliated with NBC and Telemundo.
The redesign of this platform looks into the usability struggles, the display of information, the overall look and feel and accessibility issues of the old site, updating it so it fits the current brand image.
Project Duration: 2 months from Research to Hi-Fi Prototype
Impact:
-
Updated information, the site was brought again to life after years of not being used.
-
Improved usability, it is now simpler for the user to see and understand what and where to go within the site.
-
Accessibility-related issues are resolved, and with this, the number of prospective clients is increased.
Goals & Process
The client made it clear that their main goal was to renew the outdated page, either by:
Proposing a "cool design" that follows the standards of other NBCU Local Websites
Coming up with a "cool feature" that makes it more appealing to the clients of NBCUniversal and Telemundo
The whole process took about 8 weeks
User
Testing
Ideation
Sketching and Wireframing
Hi-Fi Prototype Design
So, what was the issue?
User Testing was conducted among prospective clients of NBC and current employees working directly with this platform, and the two main issues found were:
1
2
Users struggle navigating within the page, mainly because of the confusing filtering options and the lack of an official “home page”
The colors and the way the information is displayed make the users to become uninterested/annoyed/confused by looking at the page
How might we...
Redesign the Home Page
Standardize Filtering Options
Upgrade the display of ads
Let's start with the Home Page...
The solution to establish a 'starting point' was to add a section on top of the page that clearly indicates to users what the site is about and what to do within it, providing them with clarity about the interactions they can expect during their navigation. This section is common across the NBCU platforms, and would be a good fit in this specific scenario.
%2022_25_03.png)
%2014_35_40.png)
As for the navigation enhancement, the new proposal aims to do away with specific pages for each type of ad and, instead, display all the information in a pop-up overlay, allowing the user to easily 'go back and forth' between ads.
%2022_58_44.png)
%2023_02_28.png)
Now, the Filter Bar...
The new filter bar provides users with access to the most relevant information in one convenient place. In the old site, this bar did not exist. While users could still filter results, they had to figure out the process, which often involved multiple steps.
%2023_16_19.png)
%2023_16_31.png)
As you can see, the original design wasn't unified and the labels were confusing for users not familiar with the ads.
%2023_21_11.png)
%2023_20_55.png)
Finally, the AdThumbnails...
The first proposed solution for displaying information about each ad involves enhancing the hover interaction to provide users with a better understanding without the need to click. Additionally, as part of this solution, there is a suggestion to play with the colors of the content. Previously, the main thumbnail was gray and purple, which caused annoyance for users and led to a loss of interest. This has been replaced with NBC's official palette, which is livelier and more vibrant.
The second solution focuses on how information is presented in the previously mentioned pop-up overlay. Originally, upon opening the ad, users were met with a plain page featuring an extensive list of specifications. In the updated version, the primary thumbnail image is showcased in detail, accompanied by a video demonstrating the ad in action. As for the specifications, only the crucial details are retained. This adjustment aligns with the primary goal of the AdPlaybook – to captivate users' interest and lay the groundwork for potential future product sales.
Is the experience accessible?
Although there is still work to be done through iteration, the redesign was intended to take into account people living with colorblindness. That's why color contrasts were selected to comply with the rules established by the Web Content Accessibility Guidelines, whithout breaking the brand's look and feel.
Take a look
The impact of these changes has been significant. Firstly, the site feels refreshing with updated information after years of disuse. This revitalization breathes new life into the platform. Secondly, the user experience has been greatly enhanced. Navigating the site is now more intuitive and straightforward, allowing users to easily find the information they need and know where to go. Lastly, accessibility issues have been addressed, widening the potential client base. This improvement not only ensures inclusivity but also leads to an increase in prospective clients.