Role
Product Designer (Designed and launched a game "MIXX", streak, and reward system. )
Timeline
Sep. 2024- Present
Contribution
✓ Launched the Mixx Game
✓ Increase user retention rate ~ 12%
✓ Increase user engagement time ~ 7%
Tool
Figma
ProtoPie
Adobe After Effects
Adobe Illustrator
Project Overview
The Shades News is a news & culture app for Gen-Z, allowing users to read quick summaries of multiple perspectives on current issues to get the full picture and engage with the content and other users with polls, takes, likes.
As a product designer, I focus on designing engaging and intuitive in-app games, integrating them with the news app’s purpose, and implementing a streak and reward system to boost user engagement and retention.
PROBLEM WE TRY TO SOLVE:
Users find Shades Games unintuitive, less engaging, and lacking incentives to return.
BUSINESS MODEL
Generally, there are two primary models for news app: (1) subscription-based and (2) advertisement-based. For Shades, the CEO explained their decision to adopt the advertisement model to ensure the app’s content remains free and accessible to all users. This approach also aligns with their target audience, younger Gen Z, who may have limited financial resources.
bUSINESS METRICS
Adopting the advertisement-based business model means that attracting advertisers and securing funding depends on three key metrics: (1) the size of the user base, (2) user retention rate, and (3) the time users spend on the app. Currently, the team is exploring ways to enhance the in-app games to boost user retention rates.
Primary research: User interview
Shout out to Lisbeth and Jamie for putting and organizing these documents and the User Experience team for conducting these user interviews.
After analyzing over 600 interviews and synthesizing insights through LLM and affinity mapping, I identified key user pain points to offer actionable recommendations for improving user experience and user retention rates on Shades Games.
secondary research: Competitive analysis
To gain a comprehensive perspective on game design within news apps, I conducted a competitive analysis of NYTimes Games, Washington Post Games, and Fox News Games.
New York Times Games
Washington Post Games
Fox News Games
Game Type and Purpose
• Educational, mostly puzzle and word games.
• Educational, word-related puzzle games.
• Puzzle, quiz, and entertaining games tied to news and culture.
Engagement
• Fun and engaging; no rewards, but users can share results.
• No rewards.
• Fun interaction with general users’ quiz answers.
Monetization
• Subscription with tiers (Free, Limited Daily Play, Exclusive Access).
• Free with ads linking to other games.
• Free with general ads.
Social Integration
• None.
• “Play with friends” option.
• Shows user answers and percentages for quizzes.
Game uniqueness
• Inventive games like Wordle and Spelling Bee, often collaborations.
• Unique games like “On the Record,” a quiz based on news stories.
• Includes interactive features like multiplayer experiences in quizzes and entertaining games.
kEY research INSIGHTS
These insights provide valuable perspectives on improving user retention rates.
01
Lack of Clear Instructions & Intuitive Visual Feedback
02
Limited Integration of News Content in Games
03
Need for Enhanced Competition & Reward
Games like “Wurd” and “Gradient” frustrated users due to unclear instructions and a lack of intuitive visual feedback. Users desired animations to enhance the “win” feeling and make gameplay more easy to follow.
Some games, such as “Gradient,” were perceived as unrelated to the app’s news theme. This mismatch made them feel disconnected and less relevant to the app’s core purpose, reducing their appeal.
Users desired competitive features like leaderboards to foster competition and motivate repeated play. They also wanted in-game rewards, badges, and streak systems to provide a sense of progression and achievement.
How might we create intuitive and instructed game experience that fits into news app, incorporating rewards and competitive elements, to engage users and drive retention?
Solutions
Solution - 01
Clear Instructions
Designed a comprehensive tutorial for the Shades Games, outlining step-by-step instructions on how players can earn points through engaging interactions. The tutorial combines clear, concise text and dynamic visuals to guide users through gameplay mechanics.
These are instruction pages for the six games on Shades: Gradient, Wurd, Quiz Me, Baw, Slide, and Mixx
Users found the recent version of the tutorial somewhat unclear and difficult to follow. Refined the tutorial to improve its logic, enhance clarity, and elevate the user experience by addressing logic gaps, simplifying instructions, and incorporating engaging animations for a more intuitive and seamless interaction.
The new animation for the game "QUIZ ME" was created using Figma Prototype.
intuitive visual cues
User research revealed that the current game animations lack smoothness, with insufficient visual cues for correct answers and no clear responses for incorrect ones, leaving users feeling confused.
To address this, the winning interaction experience was enhanced with engaging animations, including smooth score counting, pop-up point additions, and celebratory confetti, creating a more intuitive and rewarding experience.
The new animation was created using Adobe After Effects.
Solution - 02
Integration of News Content in Games
Based on user research, we discovered that users surprisingly prefer the games to be closely tied to fresh, recent events in the news. Additionally, for the ‘Quiz Me’ questions, users felt that some questions were too difficult or unfamiliar, yet they expressed curiosity and a desire to learn more.
To address this, we refined the ‘Quiz Me’ game to feature questions directly related to daily news. We also introduced a ‘Hint’ button, which redirects users to the relevant news page and highlights the text containing the answer, creating a more engaging and educational experience.
The new animation was created using Figma and Adobe After Effects.
Solution - 03
Enhanced game statistics page
For the current games, users appreciate the streak feature but feel it lacks a sense of achievement, as the current display is limited to just a number. They frequently mentioned wanting a leaderboard to see rankings among friends or all users, which they found motivating. Additionally, they expressed a desire to track their progress over time.
To address this, we broke down the concept of achievement into smaller aspects. We added a calendar feature that marks the days users played within a week, enhancing their sense of accomplishment. We also revamped the existing statistics panel, integrating streak data with user scores and introducing line charts to help users track their score progression over time.
Overall STRAK SYSTEM in the app
Currently, Shades features individual streak systems for its four games and news story tracking, which users find fragmented and hard to follow. To address this, an integrated overall streak system is proposed, combining all individual streaks into a cohesive experience.
Two options were considered for earning an overall streak:
1. Completing any individual streak (simple but lacks a sense of achievement and may not boost engagement or retention). 2. Completing all streaks (provides accomplishment but risks discouraging users due to high effort).
The challenge lies in balancing user motivation with business goals like engagement and retention.
CHALLENGE:
how to design an overall streak system that balances the difficulty of maintaining streaks with motivating users to engage more actively across all activities?
To address the challenges, a balanced solution was developed: Option 3: Tiered Streak System, where users earn streaks at different tiers based on their engagement level:
• Bronze Tier: Earned by completing a single task, such as reading a story or playing a game.
• Silver Tier: Achieved by completing multiple tasks, like reading multiple stories or playing several games.
• Gold Tier: Awarded for completing all tasks, including reading a story, leaving a comment, taking a poll, and playing all four games.
This tiered system rewards incremental progress, motivating users to engage without imposing overly demanding requirements. It balances activity encouragement with accessibility, supporting user satisfaction and business goals.
Easy to Maintain
Simple to Understand
Motivates More Engage
Connects Individual and Overall Streaks
Option 1
(Simple single streak)
🟢 User can keep the overall streak when they read one story and play one game.
🟢 The mechanism is easy to understand.
🔴 Users can earn streaks by fulfilling basic conditions, but it might not strongly motivate more interaction.
🟡 Provides limited connection between individual and overall streaks.
Option 2
(Detailed 7 streak)
🔴 User need to complete all the 7 tasks to keep the overall streak.
🟢 The mechanism is easy to understand.
🟢 Motives users to play all the games and read stories and leave comment
🟢 Connects all individual streaks to the overall streak.
Option 3
Tiered streak
🟡 In between user can easily keep a bronze streak and also can strike to get a gold streak.
🟡 Users might need time to fully understand the streak mechanism.
🟢 The gold streak motivates users to engage more with games and stories.
🟢 Provides a moderate connection between individual streaks and the overall streak.
To fulfill users’ desire for a more detailed dashboard to track all their streaks, we designed a flip card interaction. The front of the card displays a simplified tiered streak summary, while the flip side reveals detailed streak information, breaking down how the overall streak is composed.
This video was created using Adobe After Effects.
Streak + MASCOT
One of the side quest of the internship is come up with a brand mascot and avatar design for the app. We came up with also 3 options:
1. Optopus: took inspiration from the shades app's concept of different perpects with the animals nature of changing color
2. Eye "Monster" (Circualr eye) : took inspiration from the Shades eye logo and the app's concept of see world's event and different perspectives.
2. Eye "Monster" (Alomond eye) : directly intergreate the shade from the Shades' logo.
These illustrations are my original designs, created using Adobe Illustrator and Figma.
Style
Relevance
Memorability
Engagement
Option 1
(Animal, Octopus)
🟢 Real-life Animal Character
🟡 Draws inspiration from Shades's concept of showing different opinions. The octopus’s natural ability to change colors aligns with this.
🔴 The animal character might lack uniqueness, as its design is similar to other mascots and may not stand out enough to be easily remembered.
🟢 The animal character adds a personal touch to the app, making it appealing and engaging for Gen Z and younger audiences.
Option 2
(Abstract, Circular Eye)
🟢 Fictional Item Character
🟡 Takes inspiration from the Shades signature app logo—a single eye—and fits well with the app’s goal of allowing users to see diverse perspectives.
🟡 The abstract and monster-like design of this character is quite unique, making it memorable for users.
🟡 The design balances a playful, monster-like style with a sense of cuteness and uniqueness.
Option 3
(Abstract, Almond-Shaped Eye)
🟢 Fictional Item Character
🟢 Directly uses the eye shape from the Shades signature app logo, tying closely to the brand identity.
🟢 The creative use of the logo’s eye shape and monster-like elements ensures the character is recognizable.
🟡 The design balances a playful, monster-like style with a sense of cuteness and uniqueness.
To integrate the streak system with the mascot, we introduced phone screen widgets that display streak progress alongside dynamic mascot expressions. The mascot’s expressions change based on the user’s streak status—cheerful and encouraging when streaks are maintained, or disappointed when streaks are broken. This playful and interactive feature motivates users to return to the app regularly, reinforcing streak habits and boosting engagement.
Reflection & what could i have done differently
1. Proactive Communication and Initiative: At the beginning, I noticed a lack of accessible user research insights, even though the company had a dedicated user experience research team. Collaboration between teams was minimal. I took the initiative to address this gap by reaching out to the CEO and the different teams to advocate for access to research data. Through this, I obtained user research documents, enabling us to design solutions that were better aligned with user needs.
2. Reflections on User Testing: Looking back, I recognize the importance of conducting more user testing, especially since this is a consumer-facing (to-C) product. Increased testing would have provided valuable insights into user behavior, helping us refine the design further to enhance engagement and usability.
3. Success Metrics and Business Model: During the internship, I recognized the importance of defining clear success metrics to measure the impact of our designs. While working on the streak system and game interactions, I ensured we tied our designs to measurable goals, such as user retention rates, time spent in the app, and the frequency of streak completions.
