NBCUniversal.com was launched in 2020 with a fresh and immersive Brand direction. My goal was to elevate the site and create a compelling experience that distinguishes it from other major media giants. I supervised the execution and day-to-day operations to bring this vision to life, shaping the overall design direction and establishing a clear and inspiring framework for how the new site could contribute to the organization's goals and mission.
In collaboration with our internal design team, an external agency, and cross-functional teams, we successfully achieved our objectives. Post-launch, NBCUniversal.com experienced a remarkable 1720% increase in traffic.
This rebranding effort established a unifying design vocabulary across NBCUniversal's enterprise platforms, enhancing the user experience and improving overall brand recognition.
NBCUniversal.com
Final Homepage (Desktop, Tablet & Mobile)
Final History Timeline
Marketing - Digital Display Screens & Social Media
The dynamic, anamorphic movement of the purple and magenta palette introduced in the NBCU Brands section has now been adopted across all enterprise social media branding, platforms, and marketing. My vision was to create a Brands section that feels vibrant and alive, symbolizing the breadth and vitality of all NBCU International Brands.
Project Objectives
• Modernize and energize the site by adding video, animation, interactions
• Incorporate NBCUniversal branding throughout the entire user experience
• Dedicate more areas to showcase top priority content above the fold
• Create a site that represents an top international entertainment company
• Use active and fun photos and content that exudes a sense of NBCU culture
• Incorporate an effective Search feature, SEO priorities
• Help users find relevant info they are seeking; E.g. Historical topic, News items
• History on homepage - add visual appeal, animation & interactive elements since it's a highly visited section
Functional Requirements
• Drupal 8 platform upgrade
• Improved usability and maintenance for content editors
• Scalability of content
• Mobile friendly approach
• 100% full width responsive, immersive design
• Showcase video component
• Refined Search functionality – easy to find what you need
• Proper SEO – content, linking, meta descriptions, url structure, redirects, proper page titles
• User friendly, streamlined and intuitive back end management/panel
Initial Homepage Prototype
Design Exploration Sample
With a solid product and market fit already in place, one of my first tasks was to align the visual design with the global brand. We explored several different design directions including button patterns, fonts and color palettes. The explorations resulted in a fresh and bright new visual language.
NBCUniversal 'Jewel' Color Palette
Color & Font Explorations
UX Sitemap & Wireframe Samples
The biggest challenge I faced throughout this project was balancing forward progression of my internal team's visual designs and user flows, whilst collaborating with cross functional teams and the external interactive agency designers and engineers. Using Figma as our main design tool, I guided and contributed hands-on to the full design cycle. Since this project touched every part of our business, I needed to coordinate and get buy‐in from many stakeholders. Managing feedback was more challenging because it felt like a constant evolution of viewpoints. Design principles and the content prioritization framework helped to create visibility into my decision‐making process and unify the teams to share in the vision.
Ideation Design Sprint
Analytics and My Impact
• Thinking Big - In collaboration with the design team, I developed a cohesive design vocabulary and system for the NBCUniversal brand across multiple platforms and touch points. When I joined NBCU, the products, apps, and websites lacked continuity and did not reflect a unified brand vision.
• Consistent Design Elements - For each project, whether large or small (e.g., the Legal app, Thrive HR educational site, NBCUniCareers), I established a common color palette and style, ensuring the use of consistent elements such as font styles, line quality, call-to-action buttons, interactions, and onboarding UX/UI.
• Implementing UX Methodology - I introduced a formal UX design methodology and workflow where none existed before, including folder structures, file-naming conventions, UX workflows, and a formal QA process involving both design and development.
• Team Expansion and Training - I expanded our digital design department by adding three highly skilled designers, whose strengths and areas for development complement the overall capabilities of the team. I set a high standard for our team, ensuring that we produced only the highest quality, functional, and polished products.
• Strengthening Relationships - I strengthened relationships with business units, building trust in our team for all design needs rather than relying on outsourcing, which resulted in significant cost savings.
Challenges & Wins
• This high-profile project had an ambitious timeline that required ongoing input from all stakeholders, including the SVP of Corporate Creative and the Director of Corporate Communications. In order to stay on track, I created and distributed a very detailed timeline that incorporated every stage of approval & feedback, research, design, development, testing, and QA, providing full visibility to all cross functional teams. This helped to align the schedule for all parties involved.
• I navigated the complexities of balancing requirements and feedback from various business units while addressing development and engineering challenges associated with a highly animated and interactive site. This involved making compromises among all parties involved.
• The front-end development and quality assurance for this content-rich site were quite demanding, requiring meticulous attention to detail.
• I facilitated collaboration between an agency’s development team, which had extensive front-end interactive experience, and our internal development team, which focused on the Drupal 8 backend. This partnership was essential for ensuring seamless integration between the two components.
NBCUniversal.com Before Redesign
