Redesigning the website to drive engagement and game sales through captivating narratives
Broke the Game, a board game centered on poverty awareness, offers a valuable learning opportunity for players to understand the systemic nature of poverty. Since its launch, the website struggled to effectively communicate the game’s purpose and engage potential players.
As a UX Designer, I collaborated closely with the game creator to enhance the website’s design, making it more engaging and informative. Our goal was to help users better understand the game’s purpose, spark their interest in playing, and support its promotional needs.
TIMELINE
Oct 2024 - Dec 2024 (3 months)
ROLE
UX Designer
TEAM (2 Members)
UX Designer (ME:))
UX Researcher*1
RESPONSIBILITY
Sitemap • Wireframe • Prototype
Wix Website Development
By making choices on real-life situations through Broke the Game, players has the engaging gameplay experience to gain empathy and shift their perceptions towards people living in poverty.
.gif)
Foster consistent self-monitoring/ regulation with increased levels of efficiency
Inspire motivation to initiate task focus promptly by using the Pomodoro Technique
Encourage structured task execution and proactive planning through organization and prioritization
Cultivate confidence in decision-making skills while scheduling work activities
The website lacked clear messaging about the game’s educational goals, making it difficult for visitors to understand its value, which led to reduced interest and interaction from potential players.
Foster consistent self-monitoring/ regulation with increased levels of efficiency
Inspire motivation to initiate task focus promptly by using the Pomodoro Technique
Encourage structured task execution and proactive planning through organization and prioritization
Cultivate confidence in decision-making skills while scheduling work activities
The challenge goes beyond improving the website’s visual appeal; it’s about crafting a clear and compelling narrative that effectively communicates the game’s value and mission. By highlighting its educational impact and unique gameplay experience, the goal is to help visitors understand why the game is worth playing and how it can shift their perspective on real-world issues.
Foster consistent self-monitoring/ regulation with increased levels of efficiency
Inspire motivation to initiate task focus promptly by using the Pomodoro Technique
Encourage structured task execution and proactive planning through organization and prioritization
Cultivate confidence in decision-making skills while scheduling work activities
To gain a deeper understanding of Broke the Game and its creation, I had several conversations with the game creator, Dana Gold, to discuss her purpose and vision behind the game. Additionally, I observed multiple gameplay sessions and spoke with players to gather their feedback, learn about their experiences, and understand the emotional impact of the game.
.jpg)
Foster consistent self-monitoring/ regulation with increased levels of efficiency
Inspire motivation to initiate task focus promptly by using the Pomodoro Technique
Encourage structured task execution and proactive planning through organization and prioritization
Cultivate confidence in decision-making skills while scheduling work activities
Broke the Game is designed to be adaptable across various learning environments and to engage diverse audiences, including:
• Educational settings (students and educators)
• Workplaces (employers and employees)
• Community organizations and social workers
• DEI
.jpg)
After understanding the value of the game, I analyzed the original website and synthesized the main pain points that the original website has - what’s right, wrong and missing.
Foster consistent self-monitoring/ regulation with increased levels of efficiency
Inspire motivation to initiate task focus promptly by using the Pomodoro Technique
Encourage structured task execution and proactive planning through organization and prioritization
Cultivate confidence in decision-making skills while scheduling work activities
Foster consistent self-monitoring/ regulation with increased levels of efficiency
Inspire motivation to initiate task focus promptly by using the Pomodoro Technique
Encourage structured task execution and proactive planning through organization and prioritization
Cultivate confidence in decision-making skills while scheduling work activities
Foster consistent self-monitoring/ regulation with increased levels of efficiency
Inspire motivation to initiate task focus promptly by using the Pomodoro Technique
Encourage structured task execution and proactive planning through organization and prioritization
Cultivate confidence in decision-making skills while scheduling work activities
Foster consistent self-monitoring/ regulation with increased levels of efficiency
Inspire motivation to initiate task focus promptly by using the Pomodoro Technique
Encourage structured task execution and proactive planning through organization and prioritization
Cultivate confidence in decision-making skills while scheduling work activities
Avatar Customization
Players choose a virtual "buddy" at the start, serving as both a reflection of themselves and a supportive partner
Improve Productivity: Pomodoro
Players input tasks with start time and duration, utilizing Pomodoro technique - a focus timer for efficient work sessions (25-min) interspersed with short breaks (5-min).
The avatar provides company during focused work, employing body doubling to promote effective work and self-motivation for staying focus.
Incentivization: Task Completion Rewards
Upon tasks completion, users will receive and select reward items to decorate their own virtual spaces, while unlocking new environments at specific XP level.
Empowering Self-Affirmation through Dialogues
Self-affirmation dialogues will be delivered by the avatar, reinforcing users' positive attributes that promote sustained productivity and self-assurance for resilient and confident mindset.
Progress Tracking & Visual Achievement
XP-Value / Personalized Environment / Statistics Visualization
1st User Testing Results
🧠 NEED for ENHANCED MOTIVATION
- Preview of locked rewards or environments
- Overview of current progress and XP levels to improve goal-setting and motivation
🕹 INSUFFICIENT CUSTOMIZABILITY
- Users want the ability to set due dates, task start times, and reminders for better task management
- Incorporation of the Pomodoro technique for managing longer tasks
- Option to reschedule unfinished tasks
🤔 AMBIGUITY in the INTERFACE
- Lack of clear instructions for proceeding to the next step
- Icons with vague or unclear meanings
Conversation Dialogues 👏
Consistently reminding users of their progress, effort, and capabilities to tell users how they are ‘good enough’ or capable of completing their tasks, rather simple or complete tasks.
Conversation Dialogues 👏
Consistently reminding users of their progress, effort, and capabilities to tell users how they are ‘good enough’ or capable of completing their tasks, rather simple or complete tasks.
Simulation Gaming Aspect ⛳️
Distracting users from real-life pressure and incentivizing them to complete tasks to get rewards
.jpg)
Offer a safe barrier between users and serious themes 😬
Separating users from their real-life barriers of ‘Procrastination, anxiety, or mental health while facing failure', aiming to decrease their anxiety and resistance
%20(1).jpg)
Virtual avatar and working environment 🐱
Provide a companionship by having someone working alongside the user, enhancing focus and motivation, delivering encouragement, assistance to relief them from feeling isolated.
ANIMAL AVATAR
Users now have the option to choose an animal avatar, fostering personalization and engagement within the game's virtual world.
VIRTUAL LEARNING ENVIRONMENT
The virtual learning environment has been reimagined to promote immersive and interactive educational experiences, enriching users' learning journeys.
BRANDING
A soothing blend of neutral pastels with warm hues is chosen to create a tranquil atmosphere and help ease users' stress levels.
ICONOGRAPHY & TYPOGRAPHY
The visuals are designed with "soft and friendly" characteristics to consistently convey a sense of serenity for users facing high stress and intense academic workloads.
💡 CUSTOMIZABILITY
Increased customizability of task list- daily/weekly/monthly view, prioritizing task, drag-and-drop task reordering
🔎 SIDEBAR NAVIGATION
A streamlined sidebar navigation system can optimize user accessibility and ease of exploration throughout the game interface.
⏱ POMODORO TECHINIQUE
The integration of the Pomodoro technique offers users a structured approach to managing tasks, enhancing productivity within the game environment.
✅ ONBOARDING TUTORIAL
The onboarding tutorial has been revamped to provide clearer instructions and intuitive iconography, addressing previous issues of interface ambiguity.
Website Redesign Focus
Engaging Experience
Interactive section to get a sense of what Broke is
Positive Learning Outcome
Empathizing on the impact of
Broke the Game
.png)
Accessibility and Usability
Concise information and clear sections for better navigation
I re-organized the information on the website to tell a clear and engaging story that guides visitors through the value and story behind the game, building their interest and encouraging them to explore further.
The hero section is crucial as it’s the first thing visitors see, setting the tone for their entire experience on the site. The original version overemphasized the app, which failed to engage users and highlight the game’s broader experience.
Foster consistent self-monitoring/ regulation with increased levels of efficiency
Inspire motivation to initiate task focus promptly by using the Pomodoro Technique
Encourage structured task execution and proactive planning through organization and prioritization
Cultivate confidence in decision-making skills while scheduling work activities
Beyond "What is Broke?", I wanted visitors to understand why Broke is the game they should play and how different audiences can leverage it to create meaningful impact.
Why Broke?
The website highlights what players can gain from playing Broke the Game and features different scenarios of people playing the game, empathizing diverse ways Broke the Game fosters empathy and educates players about the systemic nature of poverty.
Interactive Section
I added the situation cards from the board game into an interactive section, allowing visitors to experience key gameplay decisions, set expectations, and gain a clearer understanding of the game’s themes.
Foster consistent self-monitoring/ regulation with increased levels of efficiency
Inspire motivation to initiate task focus promptly by using the Pomodoro Technique
Encourage structured task execution and proactive planning through organization and prioritization
Cultivate confidence in decision-making skills while scheduling work activities
By enhancing the website’s design, we not only improved user understanding of the game’s impact but also increased its visibility, attracting a broader audience.
Website Traffics
Conversion Rate
(website visitors who made a purchase)
Average Time Spent on the Website
Foster consistent self-monitoring/ regulation with increased levels of efficiency
Inspire motivation to initiate task focus promptly by using the Pomodoro Technique
Encourage structured task execution and proactive planning through organization and prioritization
Cultivate confidence in decision-making skills while scheduling work activities
Graduate Students
This project tackles the challenge of balancing productivity amidst procrastination tendencies and overwhelming workloads. We conducted user research to identify key pain points of our users: the stress and anxiety while facing high-density schedule, the challenge of sustaining motivation to initiate and keep focus on tasks, and the lack of confidence in making effective decisions.
I aimed to tackle this issue in a more interesting manner by deeply engage users with our game and positively influence their behavior and attitude. Our creation, Fluffy Focus, is a desktop game designed to promote a proactive approach to task management, featuring a customizable system. I contributed to both user research and game design, focusing particularly on refining wireframes and enhancing the user experience.
Get in touch to collaborate or just to talk.
.png)
