Product Design: NBC Digital Web
Work
Through the many years that I worked at NBC Entertainment Digital I was part of multiple changes in the way content was distributed. As late as 2013, NBC.com’s visual experience and design were still stuck in the old ages of web design: they looked dated, with inconsistent patterns and incohesive branded content. The NBC's web experience desperately needed to embrace a more structured and methodical design: a product that was clean, streamlined, intuitive and simple to navigate.
Discovery
Due to the urgency of putting out the new and updated web product, we set up week-long sprints to expedite the discovery process. Grouped together in brainstorm sessions the product design team came up with the following design principles for the new NBC web experience:
-
Clear: Simplicity clarifies relevance.
-
Direct: Speak clearly to your audience & tell the right story.
-
Impactful: Everything matters, make each element count.
-
Emotional: Build a unique story that resonates with people.
-
Engaging: Create rich experiences that draw users back.
-
Holistic: Design the experience for all platforms & devices.
Data analytics drove requirements which called for a new site structure with streamlined user experience optimized for 1280 desktop viewpoint, with larger images and simplified interface.
Flow
Site flow was also reorganized with priority given to the site’s bread-and-butter: video consumption. Unscripted shows had contestant landing and detail pages.
Wireframes
The next step was to create UX documentation. I worked closely with the UX team to develop wireframes with layout specifications and annotations on typography and type ramps, iconography, and site behaviors.
Iconography
Creating intuitive and familiar symbols was important, since we were transitioning away from a very cluttered and dated experience. Because of the high volumes of people who must quickly navigate through complex environments, we wanted to simplify and keep the design clear.
Typography and Font Mapping
After testing multiple fonts, we landed on two open source Google fonts and a system font…
…and mapped them out to the designs with the proper tags for the developers.
Color Palette, Color Mapping & Background Textures
Color palette consisted of two key colors (a standard color and a highlight color) accompanied by various neutral tones. The two key colors derived from show artworks and needed to be editable.
Each color instance was tagged so it could be mapped out onto the CMS tool and easily switched during production.
Evergreen background textures were a show brand requirement. My production team worked on creating subtle backgrounds to address this need.
The Final Product
The new optimized NBC web experience launched in the fall of 2013. Several versions have been released since, but it felt tremendous to be part of its new beginning.
