PeacockTV, Bespoke Landing Pages
2021 – July 2023 | Status: Shipped
Role, Contribution, & Achievements
Lead Product Designer, Acquisition
2021 - 2023 PeacockTV.com
Led the design of PeacockTV.com's signed-out web experiences, shaping the first impression for potential subscribers.
2021 NFL Sunday Night Football
Led the design for the 2021 NFL Sunday Night Football landing page, driving over 4 million visits to PeacockTV.com and the NFL landing page. This successful campaign contributed to acquiring 1.6 million paid subscribers on Super Bowl Sunday.
2022 Winter Olympics (Beijing)
Led the design for the 2022 Winter Olympics signed-out web experience. Created a customized landing page that successfully converted approximately 790k free tier users to premium subscribers during the February 3-20, 2021 event.
2022 Copa Mundial de la Fifa (Men’s World Cup - Qatar)
Led the design for the Spanish-language World Cup landing page, serving as the primary gateway for viewers to watch all 64 games live on Peacock and Telemundo. Telemundo's promotional efforts contributed to 60% of paid conversions on the Spanish landing page. The World Cup landing page achieved 177K paid signups and 3.3 million visitors.
2023 Copa Mundial Feminina de La Fifa (Women’s World Cup - Australia & New Zealand), B1G 10 Football, Sports Directory
Teammates Kim McClure, Clarke Spinosa, Rachel Rogers, Young Sun, Charli Rousseau, Jaime Lutz, Arielle Baer, Jaime Antonian, Diana Akhavan
Problem & Solution Live sports are a key driver of conversions and new subscribers for PeacockTV. Major events like the Winter Olympics, World Cup, and Super Bowl LVI significantly contribute to our growth. A central portal is essential for potential users to discover our current sports offerings and easily sign up to watch events. This includes tentpole events like the Winter Olympics and ongoing projects like maintaining landing pages for sports like Tennis, Rugby, WWE, and the homepage.
2021 – July 2023 | Status: Shipped
Role, Contribution, & Achievements
Lead Product Designer, Acquisition
2021 - 2023 PeacockTV.com
Led the design of PeacockTV.com's signed-out web experiences, shaping the first impression for potential subscribers.
2021 NFL Sunday Night Football
Led the design for the 2021 NFL Sunday Night Football landing page, driving over 4 million visits to PeacockTV.com and the NFL landing page. This successful campaign contributed to acquiring 1.6 million paid subscribers on Super Bowl Sunday.
2022 Winter Olympics (Beijing)
Led the design for the 2022 Winter Olympics signed-out web experience. Created a customized landing page that successfully converted approximately 790k free tier users to premium subscribers during the February 3-20, 2021 event.
2022 Copa Mundial de la Fifa (Men’s World Cup - Qatar)
Led the design for the Spanish-language World Cup landing page, serving as the primary gateway for viewers to watch all 64 games live on Peacock and Telemundo. Telemundo's promotional efforts contributed to 60% of paid conversions on the Spanish landing page. The World Cup landing page achieved 177K paid signups and 3.3 million visitors.
2023 Copa Mundial Feminina de La Fifa (Women’s World Cup - Australia & New Zealand), B1G 10 Football, Sports Directory
Teammates Kim McClure, Clarke Spinosa, Rachel Rogers, Young Sun, Charli Rousseau, Jaime Lutz, Arielle Baer, Jaime Antonian, Diana Akhavan
Problem & Solution Live sports are a key driver of conversions and new subscribers for PeacockTV. Major events like the Winter Olympics, World Cup, and Super Bowl LVI significantly contribute to our growth. A central portal is essential for potential users to discover our current sports offerings and easily sign up to watch events. This includes tentpole events like the Winter Olympics and ongoing projects like maintaining landing pages for sports like Tennis, Rugby, WWE, and the homepage.
Process Overview
Curating High Performing Web Experiences
Following the landing page's launch, the team provides ongoing support throughout the tentpole event. This includes keeping the page updated with breaking news, such as player injuries and scores, while simultaneously maintaining business-as-usual (BAU) operations for the rest of PeacockTV.com.
Learnings & Reflections To enhance the process, we aim to create a more flexible CMS that ensures design consistency and structure. NBCUniversal's current CMS restricts design possibilities within its limited templates and functionality. This is particularly challenging for non-designers and becomes even more problematic as the company expands to include platforms like SkyShowtime, ShowMax, and NOW TV. Recognizing these limitations, the team decided to develop a more 'intelligent' authoring system.
Curating High Performing Web Experiences
Premium landing pages are crucial for attracting new customers. Product provides specific guidelines for each signed-out page experience. By analyzing click-through rate analytics and past research, design and product collaborate to understand customer needs.
During major events like the Olympics and World Cup, we carefully market and present information to the widest audience possible. Collaborating with internal and external stakeholders, we ensure accessibility and optimal SEO. For the 2022 World Cup, we created a Spanish-language landing page experience under Telemundo and Peacock, targeting Spanish speakers and bilingual customers to drive conversions.
Finalization and Maintenance Following the landing page's launch, the team provides ongoing support throughout the tentpole event. This includes keeping the page updated with breaking news, such as player injuries and scores, while simultaneously maintaining business-as-usual (BAU) operations for the rest of PeacockTV.com.
Learnings & Reflections To enhance the process, we aim to create a more flexible CMS that ensures design consistency and structure. NBCUniversal's current CMS restricts design possibilities within its limited templates and functionality. This is particularly challenging for non-designers and becomes even more problematic as the company expands to include platforms like SkyShowtime, ShowMax, and NOW TV. Recognizing these limitations, the team decided to develop a more 'intelligent' authoring system.
GSP Intelligent Authoring, Creating an “Idiot-Proof” CMS
2023 – Ongoing | Status: In Progress
Brands PeacockTV (United States, SkyShowtime (Europe), ShowMax (Africa), NOW TV (Europe)
Role & Contribution
Product Designer for Frontend Experience, CMS Tooling
Designed templates and modules for the internal CMS, streamlining content creation processes for PeacockTV, SkyShowtime, ShowMax, and NOW TV. Collaborated with backend teams to refine design direction and enhance the overall user experience for internal content editors.
Teammates Jenny Du, Shank Raval, Young Sun, Khanh Lam, Clarke Spinosa, Emily Hunt, June Ko, Asha Isaac
Problem & Solution As NBCUniversal expanded internationally, a streamlined and intuitive CMS became essential to maintain consistency and a premium look and feel across our streaming platforms. Recognizing the limitations of the existing CMS and the challenges faced by our internal and external stakeholders, I focused on improving usability and accessibility. The current CMS was difficult to navigate, had a steep learning curve, and made it challenging for non-designers to maintain a consistent appearance. With multiple propositions and users of varying design skills, controlling the signed-out web experience was particularly difficult. The lack of building blocks for landing pages led to inconsistencies, hindering the premium feel we wanted to maintain. Drawing on past experiences with landing pages, the team aimed to redesign the CMS to avoid similar pain points for future users. We hope to redesign the CMS with a focus on improving user experience, streamlining workflows, and ensuring consistency across our platforms.
2023 – Ongoing | Status: In Progress
Brands PeacockTV (United States, SkyShowtime (Europe), ShowMax (Africa), NOW TV (Europe)
Role & Contribution
Product Designer for Frontend Experience, CMS Tooling
Designed templates and modules for the internal CMS, streamlining content creation processes for PeacockTV, SkyShowtime, ShowMax, and NOW TV. Collaborated with backend teams to refine design direction and enhance the overall user experience for internal content editors.
Teammates Jenny Du, Shank Raval, Young Sun, Khanh Lam, Clarke Spinosa, Emily Hunt, June Ko, Asha Isaac
Problem & Solution As NBCUniversal expanded internationally, a streamlined and intuitive CMS became essential to maintain consistency and a premium look and feel across our streaming platforms. Recognizing the limitations of the existing CMS and the challenges faced by our internal and external stakeholders, I focused on improving usability and accessibility. The current CMS was difficult to navigate, had a steep learning curve, and made it challenging for non-designers to maintain a consistent appearance. With multiple propositions and users of varying design skills, controlling the signed-out web experience was particularly difficult. The lack of building blocks for landing pages led to inconsistencies, hindering the premium feel we wanted to maintain. Drawing on past experiences with landing pages, the team aimed to redesign the CMS to avoid similar pain points for future users. We hope to redesign the CMS with a focus on improving user experience, streamlining workflows, and ensuring consistency across our platforms.
Process Overview
Research & Roadmap
For each template in Intelligent Authoring, three components were required: the user-facing interface, the internal team-facing interface, and documentation on template usage. Templates ranged from individual building blocks (e.g., video players) to full programmatic page redesigns. For projects, such as the programmatic pages, we closely collaborated with SEO experts to ensure that our landing pages were easily discoverable by search engines and had streamlined, outdated design elements. By prioritizing SEO, we aimed to enhance the visibility and performance of our landing pages, driving organic traffic and improving user engagement. We streamlined internal team interactions with our CMS by providing new building blocks. This ensured consistency, reduced page creation time, and minimized maintenance efforts. While the improved backend reduced flexibility for CMS editors (e.g., colors, sizes), it simplified the process and ensured adherence to our design system. This allowed our teams, especially those with no designers, to focus on content and avoid unnecessary design decisions, ultimately improving efficiency and maintaining a cohesive web experience. As many of our CMS editors are non-designers, we wanted to make the design decisions for them. Each template includes detailed documentation to guide users on optimal usage.
Stakeholder Collaboration
To ensure alignment, we prioritize MVP requirements while considering post-MVP improvements. We maintain open communication with stakeholders, facilitating workshops and collaborative feature prioritization. This approach balances satisfaction with feasibility and timelines. We proactively address issues, set clear expectations, and manage scope effectively. By prioritizing features that align with strategic goals and consider project constraints, we ensure project success. Even if timelines shift, user satisfaction remains our top priority for both CMS editors and customers.
Research & Roadmap
To inform our CMS redesign, we conducted qualitative research within NBCUniversal, gathering insights from various internal teams and analyzing survey results. Additionally, we explored external CMS platforms to understand best practices in content creation and management. Based on this research, we identified key areas for improvement and narrowed down the necessary templates for PeacockTV, ShowMax, SkyShowtime, and NOW TV.
The product team established a detailed roadmap, outlining the design and development phases, timelines, dependencies, and resource allocation. This roadmap served as a blueprint for the project, ensuring efficient collaboration between design, development, and other stakeholders. To ensure accurate timelines, each template was prioritized and estimated using a T-shirt sizing method. As a project with both domestic and international implications, it was crucial to prioritize MVP requirements while carefully considering post-MVP features. This approach allowed us to balance immediate needs with long-term goals while effectively addressing the needs of both domestic and international markets.
Frontend, Backend, and GuidelinesFor each template in Intelligent Authoring, three components were required: the user-facing interface, the internal team-facing interface, and documentation on template usage. Templates ranged from individual building blocks (e.g., video players) to full programmatic page redesigns. For projects, such as the programmatic pages, we closely collaborated with SEO experts to ensure that our landing pages were easily discoverable by search engines and had streamlined, outdated design elements. By prioritizing SEO, we aimed to enhance the visibility and performance of our landing pages, driving organic traffic and improving user engagement. We streamlined internal team interactions with our CMS by providing new building blocks. This ensured consistency, reduced page creation time, and minimized maintenance efforts. While the improved backend reduced flexibility for CMS editors (e.g., colors, sizes), it simplified the process and ensured adherence to our design system. This allowed our teams, especially those with no designers, to focus on content and avoid unnecessary design decisions, ultimately improving efficiency and maintaining a cohesive web experience. As many of our CMS editors are non-designers, we wanted to make the design decisions for them. Each template includes detailed documentation to guide users on optimal usage.
Stakeholder Collaboration
To ensure alignment, we prioritize MVP requirements while considering post-MVP improvements. We maintain open communication with stakeholders, facilitating workshops and collaborative feature prioritization. This approach balances satisfaction with feasibility and timelines. We proactively address issues, set clear expectations, and manage scope effectively. By prioritizing features that align with strategic goals and consider project constraints, we ensure project success. Even if timelines shift, user satisfaction remains our top priority for both CMS editors and customers.
Tech Hand Off & UAT
After design completion, we provide specifications and rely primarily on dev mode for prototyping. We address questions during weekly calls or directly with the lead designer. We conduct UAT to ensure template satisfaction and cross-platform compatibility. Following a maximum of three review rounds, we request developers to push designs to production. Subsequent feedback is handled as follow-on tickets.
Finalization and Adoption
We will initiate template adoption with data migration as well as a phased rollout to minimize disruption. Ongoing support and assistance will be provided to all teams. As the templates grow, we will focus on documentation, gradually reducing the need for extensive training.
Learnings & Reflections One reflection on this project is the need for earlier feedback loops to avoid delays caused by late-stage requirements. While these additional features might be considered MVP, they can disrupt design timelines as they were not in the initial tickets or discussions. Additionally, we lack quantitative and qualitative testing for these modules, hindering our ability to measure their effectiveness domestically and internationally. In the future, the team wishes to address these issues, by conducting thorough testing after launch.
After design completion, we provide specifications and rely primarily on dev mode for prototyping. We address questions during weekly calls or directly with the lead designer. We conduct UAT to ensure template satisfaction and cross-platform compatibility. Following a maximum of three review rounds, we request developers to push designs to production. Subsequent feedback is handled as follow-on tickets.
Finalization and Adoption
We will initiate template adoption with data migration as well as a phased rollout to minimize disruption. Ongoing support and assistance will be provided to all teams. As the templates grow, we will focus on documentation, gradually reducing the need for extensive training.
Learnings & Reflections One reflection on this project is the need for earlier feedback loops to avoid delays caused by late-stage requirements. While these additional features might be considered MVP, they can disrupt design timelines as they were not in the initial tickets or discussions. Additionally, we lack quantitative and qualitative testing for these modules, hindering our ability to measure their effectiveness domestically and internationally. In the future, the team wishes to address these issues, by conducting thorough testing after launch.