Shades: B2B SaaS, News & Media

Shades: B2B SaaS, News & Media

Enhancing Shades with gamification features for a modern, interactive news experience that targets Gen-Z users.

Shades

3 months

Solo

Product Designer

Project Overview

At Shades, an interactive news platform for Gen Z, I designed a gamification feature to enhance user engagement and retention. I developed a 1v1 trivia duel system with ELO rankings and rewards, transforming news consumption into a more interactive and competitive experience.

Context

Context

Attracting the younger audience by making news dynamic

Attracting the younger audience by making news dynamic

Attracting the younger audience by making news dynamic

Shades News is an app guided by cultural relevance for Generation Z, offering concise overviews and various viewpoints on current happenings. It recreates conventional news into a more captivating experience with elements such as real-time polling, summarized news, and its distinctive bright theme.

Problem

Problem

Problem

Users found a lack of incentives to stay on Shades

Users found a lack of incentives to stay on Shades

Users found a lack of incentives to stay on Shades

The CEO identified user retention and time spent on the app as key challenges, influenced by various user behaviors. This was crucial since Shades operates on an advertisement-based model rather than a paid service, ensuring the app remains free on the App Store.

User Retention - While many users are downloading the app, they are not returning daily or weekly. The app needs to introduce stronger incentives to encourage repeat engagement.

User Retention - While many users are downloading the app, they are not returning daily or weekly. The app needs to introduce stronger incentives to encourage repeat engagement.

Increasing time spent - Along with user retention, users are not staying engaged long enough within the app. Maximizing app usage is crucial as it directly impacts the advertisement-based revenue model.

Increasing time spent - Along with user retention, users are not staying engaged long enough within the app. Maximizing app usage is crucial as it directly impacts the advertisement-based revenue model.

Aligning with the audience - Any solution addressing retention and engagement must be designed with the target audience in mind, ensuring it resonates with their interests and behavior.

Aligning with the audience - Any solution addressing retention and engagement must be designed with the target audience in mind, ensuring it resonates with their interests and behavior.

Advertisement Model - While developing the solution, it’s essential to incorporate monetization opportunities and optimize ad placements to enhance profitability without disrupting user experience.

Advertisement Model - While developing the solution, it’s essential to incorporate monetization opportunities and optimize ad placements to enhance profitability without disrupting user experience.

⚑ CHALLENGE

Develop a solution to increase user retention and boost overall time spent on the app. The solution should be tailored to the target audience while also creating monetization opportunities.

Balancing innovation with familiarity - Virufy’s AI-powered cough analysis must feel approachable to new users. A user-friendly experience for a complex tool ensures clarity, trust, and adoption.

Defining the product strategy and market - Virufy needs clear positioning on how it is marketed to the targeted audience. This will shape its market strategy and long-term relevance.

Driving volunteer engagement and data - Virufy depends on community participation to improve its AI model. The platform must increase visibility, engagement, and make it compelling to participate.

Establishing professionalism and validity - As an AI-powered organization, Virufy must establish credibility and trust. The platform must display indicators of legitimacy to instill confidence in users and stakeholders.

⚑ CHALLENGE

Integrate the AI background of Virufy into their website and design the AI client-facing app to be clear, functional, and trustworthy.

Discovery + Synthesis

Discovery + Synthesis

Discovery + Synthesis

Conducting a "how might we" ideation session

Conducting a "how might we" ideation session

Conducting a "how might we" ideation session

I developed four key guiding statements to shape my work, helping me identify and address Shades' core challenges during design and research. Establishing these early on ensured that every design decision aligned with these principles, leading to a final solution that covers all bases.

[1]

make news consumption more interactive to increase time spent in the app?

make news consumption more interactive to increase time spent in the app?

[2]

introduce incentives or features that encourage users to return daily or weekly?

introduce incentives or features that encourage users to return daily or weekly?

[3]

design experiences that resonate with Gen Z interests and behaviors to improve retention?

design experiences that resonate with Gen Z interests and behaviors to improve retention?

[4]

integrate monetization in a way that doesn't disrupt user engagement?

integrate monetization in a way that doesn't disrupt user engagement?

Exploring the root causes of the current issues.

Exploring the root causes of the current issues.

After being debriefed by the CEO and team, I took a closer look at the root causes behind these issues. Understanding these underlying factors was key to developing a targeted and effective solution. To gain deeper insights, my primary research method was user interviews.

Exploring the root causes of the current issues.

After being debriefed by the CEO and team, I took a closer look at the root causes behind these issues. Understanding these underlying factors was key to developing a targeted and effective solution. To gain deeper insights, my primary research method was user interviews.

USER INTERVIEW (GOOGLE MEETS)

User Interviews & Synthesis

User Interviews & Synthesis

User Interviews & Synthesis

Conducting five user interviews with primarily Gen-Z participants, I focused on uncovering actionable recommendations and identifying key pain points to inform design decisions. In the interview the participants were tasked with giving their perspectives on the news consumption experience as well as the current Shades games.

Current Shades Games

Pain Points


  • Some game instructions were unclear and confusing.

  • Users felt the games weren't engaging enough.

  • Games were not really related to news consumption.

Recommendation


Ensure games include instructional screens and seamlessly integrate news consumption, allowing users to engage with gameplay that reinforces the knowledge they acquire.

Incentives to return to the app

Pain Points


  • There was no urge to return to the app for the games.

  • Lack of statistics/leaderboards to track my performance.

Recommendation


Develop more comprehensive stats, points, and streak systems to incentivize users to keep playing and encourage them to return to the app.

User Satisfaction

Pain Points


  • Users felt the games weren't satisfying to play.

  • The app didn't feel productive or any sense of accomplishment.

Recommendation


Make games intuitively satisfying by integrating engaging news-based questions and diverse topics while incorporating interactions that create a sense of accomplishment.

Exploring design opportunities and defining the vision for my solution.

Exploring design opportunities and defining the vision for my solution.

After discovering the pain points of users, I wanted to conduct both a competitive analysis as well as desk research to find inspiration and direction for my design.

Exploring design opportunities and defining the vision for my solution.

After discovering the pain points of users, I wanted to conduct both a competitive analysis as well as desk research to find inspiration and direction for my design.

Wireframing + Gameplay Flow

Wireframing + Gameplay Flow

Wireframing + Gameplay Flow

Keeping Shade's main challenges in focus, I began outlining the gameplay.

Keeping Shade's main challenges in focus, I began outlining the gameplay.

Keeping Shade's main challenges in focus, I began outlining the gameplay.

As I developed low-fidelity wireframes for the game's foundational design, I ensured that the logistics of the gamification feature were well-defined. This included detailing the game mechanics, name, rules, and overall goals.

Defining the gameplay and key mechanics

Duel/Challenge

Users can challenge random opponents or compete against friends and family in a thrilling trivia duel, testing their knowledge.

Live Trivia


This game will be a trivia experience that allows users to compete against each other in real time, making the game more engaging.

News-Based Questions


Trivia questions will be derived from current events, challenging users on their news awareness and comprehension.

ELO Points/Ranking System

Users will be ranked based on an ELO point system, allowing them to see how they compare against other players.

ELO Points/Ranking System

Users will be ranked based on an ELO point system, allowing them to see how they compare against other players.

ELO Points/Ranking System

Users will be ranked based on an ELO point system, allowing them to see how they compare against other players.

Defining the goals and solution

Increasing User Retention & Usage - The trivia game keeps users engaged by making news consumption interactive and competitive. By combining learning with entertaining gameplay, it encourages users to stay longer and return.

Monetization & Audience - Designed for Gen-Z, the duel and ranking mechanics create an engaging trivia experience. The gameplay attracts young users while enabling monetization through ads, cosmetics, and subscriptions.

GAME MECHANICS/FEATURES

Final Solution

Final Solution

Final Solution

Introducing "Trivia Duels," a fun and educational way to consume more news.

Introducing "Trivia Duels," a fun and educational way to consume more news.

Introducing "Trivia Duels," a fun and educational way to consume more news.

Users will first see an instructional screen to provide context and eliminate confusion on how to play. Then, they’ll access the main trivia duel dashboard, displaying their arena level, leaderboard, stats, and a start duel button.

Simple & Informative Instructions - Users will be given instructions that give an overview of the game, something that was an issue with Shades current set of games.

Comprehensive Dashboard - A simple and informative dashboard displaying user stats, ranking, and arena level, motivating players to duel more and climb the leaderboard.

Various topics and news-based trivia questions.

Various topics and news-based trivia questions.

Various topics and news-based trivia questions.

To enhance trivia engagement, I introduced a topic selection feature, allowing users to choose their strongest subject for the first question, while their opponent picks the second. All questions remain news-based, aligning perfectly with Shades' core focus on modern news consumption.

News-Based Questions - all trivia questions are based on real events, making the game both interactive with Shades and an engaging, educational experience.

Time-Based - each question features a 10-second timer, making the trivia duels fast-paced with real-time gameplay and a competitive experience.

Variety Of Topics - by categorizing trivia into broad topics, it helps users organize news content while adding a fun, interactive element throughout the game.

Testing your knowledge and making news consumption competitive.

After the first two questions, a real-time random topic generator selects the next category, adding surprise and testing knowledge across topics. Once someone has won, the results screen displays game stats, points gained or lost, and a rematch option, keeping players engaged.

Random Topic Generator - a random topic generator for the remaining trivia rounds adds suspense, variety, and deeper knowledge, making each duel unique

Results Feed - Displaying key stats like average response time and weakest topic motivates users to improve and play more. The drive to earn points or reclaim lost ones creates an addictive and engaging experience.

Additional Features + Thoughts

Additional Features + Thoughts

Making "Trivia Duels" even more immersive and exciting enough to continue playing.

As I completed my final designs, I was challenged to think beyond the core gamification feature and explore new opportunities for Trivia Duels. This led me to develop an exciting expansion of Team Trivia.

Testing your knowledge and making news consumption competitive.

Testing your knowledge and making news consumption competitive.

After the first two questions, a real-time random topic generator selects the next category, adding surprise and testing knowledge across topics. Once someone has won, the results screen displays game stats, points gained or lost, and a rematch option, keeping players engaged.

Random Topic Generator - a random topic generator for the remaining trivia rounds adds suspense, variety, and deeper knowledge, making each duel unique

Results Feed - Displaying key stats like average response time and weakest topic motivates users to improve and play more. The drive to earn points or reclaim lost ones creates an addictive and engaging experience.

Additional Features + Thoughts

Additional Features + Thoughts

Making "Trivia Duels" even more immersive and exciting enough to continue playing.

Making "Trivia Duels" even more immersive and exciting enough to continue playing.

As I completed my final designs, I was challenged to think beyond the core gamification feature and explore new opportunities for Trivia Duels. This led me to develop an exciting expansion of Team Trivia. This concept would be an expansion of what Trivia Duels is as a game, but allows for more rounds, team questions, and added competitiveness.

The all-rounder solution to incentivize Shade's users to use the app.

The all-rounder solution to incentivize Shade's users to use the app.

The all-rounder solution to incentivize Shade's users to use the app.

Built on research, concepts, and ideation, Trivia Duels directly addresses Shades' key challenges. By revisiting our "How might we" statements, this gamification feature provides a targeted solution to those statements.

[1]

make news consumption more interactive to increase time spent in the app?

make news consumption more interactive to increase time spent in the app?

[2]

introduce incentives or features that encourage users to return daily or weekly?

introduce incentives or features that encourage users to return daily or weekly?

[3]

design experiences that resonate with Gen Z interests and behaviors to improve retention?

design experiences that resonate with Gen Z interests and behaviors to improve retention?

[4]

integrate monetization in a way that doesn't disrupt user engagement?

integrate monetization in a way that doesn't disrupt user engagement?

Trivia Duels drives a competitive experience for users, motivating them to level up and play daily.

Trivia Duels drives a competitive experience for users, motivating them to level up and play daily.

Arena levels, points, and leaderboards increase user retention by encouraging repeat play and competition.

Arena levels, points, and leaderboards increase user retention by encouraging repeat play and competition.

Replacing doomscrolling with fast-paced trivia, duels make learning news fun, engaging, and tailored for Gen Z.

Replacing doomscrolling with fast-paced trivia, duels make learning news fun, engaging, and tailored for Gen Z.

Trivia Duels enables cosmetic monetization and subscription plans, offering more daily plays and premium features.

Trivia Duels enables cosmetic monetization and subscription plans, offering more daily plays and premium features.

Reflection

Reflection

Reflection

Reflecting on my experience designing gamification at Shades.

Reflecting on my experience designing gamification at Shades.

Reflecting on my experience designing gamification at Shades.

This Product Design internship was a unique and insightful experience, as it was my first time focusing on a specific feature like gamification rather than general screens. Developing a solution for Shades pushed me to think beyond design and incorporate a business-oriented mindset. Since this was also a product strategy internship, I integrated business and content strategy to create a game that effectively addressed Shades' core challenges. Working alongside other interns, I gained valuable experiences through collaboration, idea-sharing, and friendly competition, making it a methodical and enriching time here.

Endorsement from Jeff Grimes - CEO of Shades

Jaime Calabrese - Internship Program Manager

Key Highlights

Ranking & Leagues

My Trivia Duels solutions caught the attention of Shades' CEO, leading to key inspirations from my designs being implemented in the published app. Features like a ranking system with ELO points and a spin-off of my arena levels, now leagues, were directly influenced by my work.

My Trivia Duels solutions caught the attention of Shades' CEO, leading to key inspirations from my designs being implemented in the published app. Features like a ranking system with ELO points and a spin-off of my arena levels, now leagues, were directly influenced by my work.

Intern Standout

During the internship cohort, I collaborated with fellow aspiring product designers, honing my skills through teamwork and innovation. My internship manager recognized me as a standout, highlighting my exceptional designs and work ethic as going above and beyond.

During the internship cohort, I collaborated with fellow aspiring product designers, honing my skills through teamwork and innovation. My internship manager recognized me as a standout, highlighting my exceptional designs and work ethic as going above and beyond.