Harnessing creative play to turn the turmoil of procrastination into moments of delight.
Details
Role: Sole Product Designer
Timeline: Fall 2023 (5 weeks)
Skills: Visual Design, Interaction Design, Prototyping
Tools: Figma
Overview
Bubblofi is the first interaction design project I did at CCA. It's an interactive productivity tool that turns the stressful, anxiety-inducing process of managing responsibilities into a motivating and playful experience. With bubbles, the idea was to turn procrastination into stepping stones for progress with an interface + interaction model that makes responsibilities feel approachable.
The brief was to design an end-to-end experience for "a productivity app that would help college students better manage their time given all of their responsibilities."
Tl;dr
Problem
Complex, negative emotions fuel procrastination, keeping students trapped in a cycle of avoidance.
College students face a paradox: an abundance of productivity tools, yet a persistent struggle with procrastination. This disconnect raises questions about the effectiveness of existing solutions and presents an opportunity to explore why traditional approaches seem to fall short and develop an alternative solution that would better address students' needs. I found that traditional management frameworks fail to address the core issue.
Solution
Imagine… combining the satisfaction of crossing off items on your checklist with the addictive feeling of popping bubble wrap.
Academic and personal obligations are a source of stress, and the brief of the design challenge was to create an app that would help college students better manage their time. By the end of the five weeks, I conceptualized Bubblofi.
Bubblofi is a canvas with endless potential. With just a press and hold, what we call our "blow-a-bubble" interaction, users have complete control over their workflow.
There are three customization options available creating a bubble. Located above the keyboard, users have the option to edit the size of their bubble, color, and add tags
Process
Secondary Research
Time mismanagement is prevalent and persistent, indicating that current systems are ineffective.
My secondary research consisted of a brief understanding of the current state of college students and their productivity/time management habits to determine the problem area's relevance. Given the persistence of time mismanagement, it was clear that there was something ineffective about current tools, but what?
Primary Research
3 focus points for discussion and investigation.
I compiled a list of questions to ask during my interviews, which fell under these three main categories: methods, challenges, and behaviors. (However, since my interviews were rather unstructured, some questions were formulated spontaneously out of curiosity and fell outside of this scope).
01 Methods
How do students currently manage their time and responsibilities?
02 Challenges
What barriers do students face when trying to stay productive?
03 Behaviors
What factors influence how students approach time management?
Interviews
Learning more about our target users.
I conducted semi-structured interviews with five college students from different majors and universities. I found that their time management responses were rooted in emotions and overwhelmingly negative.
[🐻❄️] 1st-year animation major
[🐰] 2nd-year CS & media arts major
[🐥] 2nd-year science major
Competitive Analysis
After understanding the general landscape of productivity tools, I found that they only serve as temporary solutions.
Diving deeper, I analyzed popular time management apps, including those mentioned in my interviews. I found that these tools focused primarily on structure-based techniques that were either complex or required too much effort to maintain, often making it difficult for procrastinators to get started and/or follow through.
Analysis
Discovering a gold thread.
Using an affinity diagram, I consolidated the observations and insights gathered from my interviewees to identify the most critical and common issues. Through this, I uncovered an interesting connection between emotions and procrastination.
Analysis
Turns out, it's an emotion-management problem, not a time-management one.
->
Digital productivity tools feels like a chore.
Many time management apps are high-effort and excessive, which makes the initial steps toward time management feel burdensome and overwhelming.
->
Students still meet their deadlines despite procrastinating.
Students lack motivation to change their habits because, despite the toll on their well-being and work quality, they still manage to complete tasks on time.
->
Rumination perpetuates the cycle of procrastination.
Repetitive negative thoughts like perfectionism, anxiety, guilt, and fear of failure hinder students’ ability to get work done in a timely manner.
Turns out, it's an emotion-management problem, not a time-management one.
->
How might we make a tool that feels approachable to encourage students to get started?
Lowers barriers to engagement, making it easier for students to start without added stress.
->
How might we help students to develop healthier (procrastination) habits?
Focus on small steps to give students manageable ways to improve their habits over time.
->
How might we reshape the negative emotions around procrastination into opportunities for growth.
Shift the emotional narrative around procrastination to encourage self-compassion.
Opportunity
How might we create a productivity app that aligns with students’ existing habits, but also encourages growth in a way that feels natural and non-intrusive?
Ideation
It started with a multitude of ideas that fell short. Then, an aha moment: bubbles.
I realized my concepts felt too complex or similar to existing apps, so I revisited my research. Seeing that all my interviewees used checklists inspired me to design something just as simple and familiar (but better!).
Final Experience
A new interaction model.
I tried a new interaction using a long press gesture, eliminating the need for a cta "+" button and enabling users to create bubbles anywhere on the screen. This approach additionally allows users more flexibility to adjust bubble sizes beyond just prioritization.
Final Experience 01: Long-press gesture to create a bubble.
Additionally, the modal inputs have been simplified to three options: manual size adjustment, extensive color picker, and quick tag application. Positioned just above the slide-up keyboard, these features are easily accessible, allowing for quick interactions while leaving room for bubble visualization.
Final Experience 02: Simplifying to three customization options.
To pop a bubble, I opted for a long press gesture that mirrors the "blow a bubble" interaction and with its design replicating the burst of a real bubble. Combined with a visible loader, this minimizes accidental triggers and offers visual feedback, giving users time to reconsider their actions to reduce potential errors
Final Experience 03: Long-press gesture to create a bubble & pop a bubble.
↓
Final Slideshow
More on Bubblofi and its features.
Or view the full case study presentation:
Ending Notes
My reflection and takeaways.
Since this was my first time working with Figma, the five weeks I dedicated to this project were not only enjoyable but also an invaluable learning experience. Below are some of my key takeaways:
->
Meaningful design come from user insight.
->
Complexity precedes simplicity.
->
Clarify the vision early on with fidelity that cannot be misinterpreted.
There's a lot more that went into this project before landing on the final result. If you'd like to learn more, please reach out!
Thanks for being here.
