Fluffy Focus
A Transformational Desktop Game Against Work-Induced Anxiety
Inspired by my own struggle, I initiated a project to create Fluffy Focus, a product designed to motivate college students to take action despite heavy workloads.
(This project is currently under development by the team.)
ROLE
Researcher
Product Designer
TEAM
Margaret (Product Design)
Lori Chen (Product Design)
Tzu-Ling (Research)
Peiwen Huang (UI Design)
DURATION
Sep - Dec 2023
12 weeks
WHAT I DID
Generative Research
Sketching & Ideation
Figma Prototyping
Design Systems
Usability Testing
CONTEXT
Work-induced anxiety is a pitfall.
Research shows that every 1 out of 4 college students experience work-induced anxiety during their degree. Anxiety could lead to negative impacts, such as procrastination and self-denial, ultimately resulting in poor task performance.
Leveraging the transtheoretical model of attitudinal change, we aim to use persuasive techniques to shift students to taking determined actions, and ultimately, maintaining such a mindset through positive rewards.
PROBLEM STATEMENT
How might we empower college students with a more positive mindset amid heavy workloads?
Feel free to play around
the prototype here ↗.
FEATURE 1
Receive positive affirmations from your personalized avatar
Upon entering the app, users can choose their preferred work buddy, who later delivers periodic self-affirmations during progress milestones or casual occasions.
FEATURE 2
Work with your avatar during pomodoro focus sessions
While performing tasks, the app uses the pomodoro technique to help users break down long work sessions into shorter intervals with breaks. The avatar works alongside the user to act as a source of companionship.
FEATURE 3
Level up your space after completing a task
After a focus session, users are rewarded with furniture to decorate their virtual environment and unlock new environments as they level up.
FEATURE 4
Visualize progress for sustained motivation
Users can see their completed tasks being crossed out on their daily task list. They can also visit achievement page for a comprehensive weekly progress visualization.
_gif.gif)
Why does it work?
The avatar creates a distancing effect from users’ real-life identity, hence reducing workload perception. Meanwhile, it boosts productivity through social support.
Periodic self-affirmation dialogues by the avatar reinforce users' positive attributes and core values, fostering sustained productivity and self-confidence.
Why does it work?
Granting users autonomy in choosing rewards and decorating amplifies personal relevance and motivation, aligning with the Elaboration Likelihood Model to bolster task engagement.
Why does it work?
This feature empowers users to review their achievements, fostering sustained productivity by promoting consistency and commitment to their goals.
Why does it work?
Taking regular breaks and celebrating completed pomodoros provide positive reinforcement, reinforcing users’ behavior of focused work.
Unboxing the final design!
FINAL DESIGN
IMPACT
What's the buzz about our product among others?
During the final showcase, a total of 32 participants came and tested our prototype. At the end of the session, we asked them to rate the product in terms of functionality and usability. Below are the results.
88%
of the participants envision that the product will be helpful in preventing procrastination.
91%
of the participants thinks that they are more motivated to do work after using the app.
100%
of the participants envision integrating this app into their daily workflow.
94%
of the participants think that the product is easy and intuitive to use.
RESEARCH
Exploring the terrain.
10
Literature Review
4
Focus Groups
3
Expert Consults
on topics such as anxiety, procrastination, and transformational games to understand the problem space.
with 10 participants using the new metaphor framework to explore explicit and implicit user pain points creatively.
with CMU faculties specializing in game design and decision science to study promoting anxiety-free behavioral changes.
INSIGHTS
Learnings, learnings, learnings.
The main causes of anxiety are
Perceived Workload
Often, it's not the workload itself that causes anxiety, but rather how people perceive the workload.
Self-Doubt Hinders
Self-doubt often impedes handling tasks calmly. Negative thoughts like "I can't do this" could surface.
Anxiety can be combatted through
Support Mechanism
People are less anxious studying with friends due to their presence and encouragement.
Reward System
Considering post-task rewards before starting a task can significantly boost motivation.
REFRAMING
Detailing the approach and rethinking the goal.
How might we alleviate anxiety in task management by reframing perceptions of workload and fostering long-term confidence?
IDEATION
From research to rough sketches.
The team began ideation with a feature mind map, exploring potential app directions. We then discussed specific design pros and cons and finalized with a basic feature flow diagram and low-fidelity screens.
FEATURE ITERATION
Scaffolding up the persuasive techniques.
The team walked 10 participants through our prototype and asked them to use a think-aloud method when evaluating gaming reward system mechanism and avatar messages' effectiveness.
01
Switching to a penalty-free reward system
We initially employed reinforcement and punishment for the gaming mechanism: incentivizing positive user behavior with decorative rewards and punishing negative behavior by requiring users to exert more effort to unlock the same items.
After further secondary research, we concluded punishment lacks efficacy in promoting behavioral change without offering alternatives. We removed it, focusing on reinforcing users' core values for fostering positive behaviors.
02
Fine-tuning avatar dialogue through switching pronoun
Avatar is only a study partner who sends words of encouragement to users. It is no longer a reflection of the users and can no longer create a distancing effect to divert from their true identity.
🦁 Social Support
🦁 Social Support
Social support is the encouragement provided by one's social network. It can promote well-being and coping abilities by reducing self-doubt.
E.g. Studying in library / cafe
Avatar is the exact mirror of the user, which could create a distancing effect for the user but could sound a little bit too awkward when praising. “I am capable of achieving my goal”, “Congrats to me on finishing a task!”
🐱 Distancing
🐱 Distancing
A coping mechanism in which an individual emotionally distances themselves from a stressful situation by projecting their feelings onto a fictional character.
E.g. Gaming characters, Memoji
Avatar will be both a mirror of the users and a supportive study partner. It can create a sense of social support while reminding users they are the charming character who can achieve all goals.
🐱 Distancing
🐱 Distancing
A coping mechanism in which an individual emotionally distances themselves from a stressful situation by projecting their feelings onto a fictional character.
E.g. Gaming characters, Memoji
🦁 Social Support
🦁 Social Support
Social support is the encouragement provided by one's social network. It can promote well-being and coping abilities by reducing self-doubt.
E.g. Studying in library / cafe
HOVER TO LEARN MORE!
USABILITY ITERATION
How did I make sure our usability worked?
I co-developed the testing guide and led 5/15 testing sessions where I provided tasks for users to complete while silently observing their interactions. Then, I led the team in making the following key design decisions.
PROBLEM 1
Placement of onboarding dialogue is dividing up too much attention.
Onboarding steps were presented in conventional dialogue boxes next to key affordances. But users find it hard to focus on both dialogue boxes and the avatar's speech at the same time.
All onboarding processes are incorporated into avatar dialogues to keep attention consistent.
PROBLEM 2
Task creation modal feels cumbersome and induces anxiety.
All fields below are required for a user when creating a task. Users find it cumbersome and say it may discourage them from using the app. Plus, the “due date” would induce a level of urgency and hence anxiety.
We reduced the required fields to only the “start time” and “duration” required. Plus, we leveraged progressive disclosure and gave users the choice to incrementally view the content.
PROBLEM 3
The lack of semantic cues on the Pomodoro focus interface is causing confusion.
There were no onboarding nor titles provided on the Pomodoro focus session page. Users were confused by how the two progress bars differ at first glance.
We added titles to the two progress bars and incorporated onboarding.
DESIGN SYSTEMS
How did I build a robust design system?
STEP 1
Atomize the icons
Icons were selected based on different use cases. Toggle icons were also determined to improve consistency.
STEP 2
Setting up components with properties
I created various types of properties for components such that they become easily scalable.
STEP 3
Constructing the organisms
Component groups of different UI elements are built from individual components to improve efficiency.
REFLECTION
Looking back and moving forward.
01
Research-informed design.
This is a project where I realized the power of research-informed design. By leveraging persuasive techniques, I was able to develop and refine design decisions that could drive real behavioral changes.
02
Design systems drives efficiency.
I also pushed myself to build a robust design system. Though it takes extra effort to learn, it is able to speed up the entire design process and make it more systematic and scalable.
03
Downloadable Game + iOS Ecosystem
For the next steps, we envision Fluffy Focus becoming a downloadable game. It would also expand to connect with the whole Apple ecosystem. Whether on an iPhone's lockscreen via LiveStatus or as an iPad widget, it will continue to serve its purpose of motivating students to reduce anxiety and develop long-term habits.
Shoutout to my amazing teammates <3