Defining the CNN Games experience 0→1
PRODUCT DESIGN • DIGITAL GAMES
OVERVIEW
Digital games are a strategic asset for publishers seeking to increase user engagement and time spent on site while diversifying revenue streams. They provide a dynamic form of content that can attract and retain a diverse audience. From a user perspective, games offer a fresh way to engage with news content, providing both convenience and relaxation.
CNN Games is currently in Beta. As the UX design lead, I partnered cross-functionally with content design, visual design, design systems, product, engineering, marketing, and editorial teams to create this new vertical. A third party vendor supplies the games themselves. I prototyped and specced the Games homepage (including cards for browsing), gameplay page layouts, and the overall user journey.
ROLE
Design Lead
TEAM
CNN Growth
TIMELINE
Q3 2024
SKILLS
0→1 Design
Product Thinking
WHY GAMES?
Games as a growth strategy
CNN is a global journalistic powerhouse with extensive reach, yet its user funnel indicates an opportunity to deepen engagement. To move beyond scale and increase revenue, CNN needs to develop direct relationships with its users, becoming essential in the process.
We believe there is a set of new and existing CNN users interested in playing games on CNN. The long-term success of Games will rely on our ability to create differentiated games. In the short term, partnering with a white-label game provider will allow us to enter the market and test our hypothesis in a fast, low-cost manner.
Vision
Imagine a daily dose of engaging 5-minute games woven into your morning commute, or as part of your bedtime routine. We want users to compete with their friends, share with their family, and return for more.
COLLABORATORS
My role in launching games 0→1
In a traditional working model, the PM might work with the designer to shape the experience, as well as discuss timelines and expectations with the engineer.
However, because (1) the product-person for this project was the VP of Growth, who was juggling other priorities; (2) engineering was to be done by the third-party vendor, rather than our team's engineers; and (3) Games was not the team's primary focus, I took leadership of the experience, becoming its biggest advocate and a primary point of contact.
DESIGN VALUES
How I approached this: balancing fun with brand consistency
Games should be fun! 🪅
While Games is a strategic endeavor, I led with the ideal that games should be fun. Fun can take the form of vibrant colors, playful interactions, and lighter content.
Brand consistency 🧩
Designing for a news organization necessitates care for trustworthiness and responsibility. I sought to ensure Games aligned with CNN's brand identity and overall journalistic environment.
Prioritizing scalability ⚖️
Building lean for an MVP version, I focused on creating a system that could be expanded and iterated upon in future efforts.
SUCCESS METRICS
Beta launch results exceeded all engagement target metrics
80%↗
Users who arrive to Games section and click through to play a game
4.41m ↗
Average time spent on site
40% ↗
Users come back the following day
PROCESS
Breaking down the user funnel to determine what needs to be created
Funnel with user journey & what needs to be created
I started with designing the Games homepage, a dedicated space hub for all games. I focused my design on Mobile Web (1) in order to optimize for on-the-go; (2) because a majority of users access CNN.com there.
HOMEPAGE
Cards were not yet in CNN's design system
In contrast to the typical text-heavy news-reading experience, I envisioned Games to be a very visual experience with each game having its own identity. I set out to achieve this through art and branding strategy.
I first did an internal audit of card components used across CNN — they were used in the newsletter hub, audio hub, and election center. Cards were not yet documented in CNN's design system, so each use case looked different.
I also audited some card components across the web, taking note of their interaction patterns.
Using atomic DS tokens from CNN's traditional article pages, I built out the basic structure of a Games vertical homepage. Next, I partnered with the Visual Design team to create branding that would convey game offerings to users in a fun, consistent, scalable manner.
Collaborating with the Visuals team to create a new brand identity
Seeking to understand the online Games landscape, I grouped competitive experiences into a few loose categories; where would CNN Games fit in? I believed that iconic branding would lead to engagement, but I wanted to involve my Visual Design colleagues early to rely on their expertise in bringing this vision to life. At our first meeting, I shared the homepage wireframe, my research, and goals. We discussed a few potential directions.
Initial concepts by Visuals team
Continuing to emphasize consistency with CNN's journalistic brand and scalability—along with how these visuals could translate to fun animations across devices and within the actual games themselves—we agreed the first direction was a clear winner.
In the next few iterations, I pushed for simpler, cleaner iconography. I wanted users to see a shape and color and immediately be able to name the game. A Visual Designer also animated these shapes to be used for later integrations and promo. Finally, I pushed for brighter colors within the range of CNN's design tokens. Branding for our six initial games was born.
Distinct visuals for each game
What is the best card design I can produce, that vendor developers can replicate in code?
I wanted the visuals we created to be the center of attention on the Games homepage. Building off of what was "allowed" in the CNN Design System, and stretching beyond our DS tokens, I came up with several iterations for the Games Homepage.
Weighing input from design leadership on maintaining consistency with the existing CNN design system, Content Design's suggestion to include a Play CTA on the cards, and
PROTOTYPE
Browse and play CNN Games
Prototype navigating from CNN home to Games, then to Sudoku, a version of the classic game which I designed.
NEXT STEPS
Next, shift our focus from engagement to retention
Player progression 🪜
How will players track their achievements over time? Introduce social features like leaderboards.
Community engagement 🌎
Encourage sharing achievements, discussion, providing feedback. Foster a sense of anticipation and excitement for daily games.
Build habit 🏆
Grow habitual user base through mechanisms such as rewards, competition, personalization, and mobile app integration.
TAKEAWAYS
Challenges and Learnings
CHALLENGE
Balancing brand consistency with engaging gameplay in a vendor partnership
Integrating a fun and light experience within CNN, while working within the limitations of a vendor partnership.
LEARNING
There is high intentionality and potential for games
Initial engagement metrics signal a clear user appetite for games, validating our hypothesis and encouraging future ambitions.
CHALLENGE
Stepping into a multi-hatted role
Learned to navigate the complexities of working with limited resources, taking on product strategy and XF leadership.
LEARNING
Leading with a strong vision
Compromise, but not without asking why, and never without losing the vision.