Harnessing creative play to turn the turmoil of procrastination into moments of delight. 🫧
Timeline: 5 weeks, Fall 2023
Role: Individual Designer
Tools: Figma, Notion
▦ UX DESIGN
▦ INTERACTION DESIGN
▦ MOBILE UI DESIGN
▦ USER RESEARCH
▦ WIREFRAMING AND PROTOTYPING
▦ Context
What is Bubblofi and what did I do?
Bubblofi is an interactive productivity tool that turns the stressful, anxiety-inducing process of managing responsibilities into a motivating and playful experience. With bubbles, I aimed to turn procrastination into stepping stones for progress with an interface and interaction model that makes responsibilities feel approachable.
My role was to design an end-to-end experience for a productivity application that would help college students better manage their time given all of their responsibilities. However, this objective changed quite drastically early on in the process when I realized that simply iterating on time management strategies wouldn't solve the issue at its core.
BUBBLOFI
↓
TL;DR
▦ THE 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, presenting an opportunity to explore why traditional approaches seem to fall short and develop an alternative solution that would better address students' needs. Through generative research, including in-depth secondary research, five user interviews, and five competitive product analyses, I found that traditional management frameworks fail to address the above core issue. So, the solution? Well...
▦ Jump to the full solution?
↓
▦ THE SOLUTION (Preview)
Imagine… combining the satisfaction of crossing off items on your checklist with the addictive feeling of popping bubble wrap 📋.
Understanding that managing academics and personal obligations is a source of stress, the theme 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. Take a peek at a few of the features I designed below!
▦ FEAtURE 01
The world screen is your oyster.
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.
▦ FEAtURE 02
Streamlined customization options.
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.
▦ TAKING a step back
Okayyy… but how did we even get here? Why bubbles? 🫧
THE DESIGN PROCESS
▦ Secondary research
I found that time mismanagement was prevalent and persistent, indicating that current systems were 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
The 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.
Utilizing 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.
▦ SYnthesis
Turns out, it's an emotion-management problem, not a time-management one.
▦ Pain Point 01
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.
▦ Design Opportunity 01
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.
▦ Pain Point 02
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.
▦ Design Opportunity 02
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.
▦ Pain Point 03
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.
▦ Design Opportunity 03
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
First, a multitude of ideas that feel short. Then, an aha moment.
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!).
▦ Wireframing
Interface and interaction explorations.
I realized that the CTA and information input were critical triggers that initiate or halt user action. Based on user feedback, I realized that my initial designs reinforced avoidance behaviors. As I continued to iterate on my wireframes, I focused on making flows and interactions as easy, quick, and enjoyable as possible.
▦ Standard modal iterations
▦ Slide-UP modal iterations
Modals presents limitation issues with simpler iterations and visual overwhelm with more comprehensive inputs.
Modals obscures the bubble/feedback element. (This also made me question how the information would be displayed in the bubble.)
Modals either may require scrolling or clashed with keyboard when it came time to enter text.
User found these input modals way to demanding and rather unnecessary, requiring me to change my approach entirely.
▦ 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.
▦ Long-press gesture to create 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.
▦ Three quick customization options
▦ Wireframing
Bubble interaction exploration.
The bubble’s playful design is intended to make tasks feel less intimidating and more approachable. To fully develop this experience, I thought it was important to focus not only on how users create bubbles but also on how they remove them.
▦ Standard tap-to-pop
Building on my initial sketches, I designed the bubble with a countdown to specify the task/event deadline, but I found this added unnecessary stress for the user. I also realized that the click-to-remove gesture was prone to accidental pops during screen navigation, and while I thought of adding confetti to "pop" out of the bubble upon completion, it didn’t align cohesively with the overall aesthetic.
▦ Tap-to-pop with error prevention
My second iteration featured a simpler popping mechanism and eliminated the countdown. After popping the bubble, users had five seconds to undo the action in case of a mistake. However, the five-second undo feature may not fully prevent accidental pops as users might not notice it in time or react quickly enough.
▦ Final Experience
Bubble interaction exploration.
Recognizing the issues with the tap-to-pop mechanism, 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.
▦ Long-press gesture to create bubble & Pop a bubble
↓
▦ FINAL EXPERIENCE
A final look at Bubblofi and its features.
Or view the full slideshow presentation below:
▦ Feedback
What do students think of Bubblofi?
Given the project constraints, I couldn't measure quantitative results; however, the following are testimonials from students regarding Bubblofi and its potential impact. I also received valuable feedback and recommendations to consider for further iterations.
▦ Likes
▦ Some things to improve upon
▦ Ending notes
My reflection and takeaways.
Since this was my first time working with Figma on such an extensive project, I found myself wondering if the final product was simply too creative or if its uniqueness would help it stand out. I guess both can be true. Either way, 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 through user insights
One of my key takeaways was the importance of involving the user in the process. Feedback from my target audience highlighted that their insights are essential for creating a more human and meaningful experience. I really learned the value of always sharing ideas and solutions openly, as collaboration and input pave the way for better design outcomes.
▦ Complexity Preceed Simplicity
The problem was complex, and the architecture of the app was tough to break down (sooo much sketching). I questioned whether certain features were truly necessary and if simplifying would risk confusing users by deviating from UI conventions in other apps. Would this leave them in uncertainty and fustration? However, through this cumulative process, I learned how to distill complexity to its essence. Ultimately, this led to a design that went beyond my initial expectations... because who would have thought bubbles would be the outcome.
▦ Clarifying the Vision Early On
Users responded positively to my low-fidelity wireframes but were less receptive to my high-fidelity designs. I realized this was likely because my low-fidelity designs lacked enough detail, leaving too much open for interpretation and causing a shift in expectations. In the future, I'll include more context in my low-fidelity wireframes to better convey my ideas and provide a clearer depiction of what users would actually interact with, but not with too many details that it would be distracting.
▦ What's next + If I had more time
Bubblofi is still in its foundational stages, and I’ve realized there are several gaps to address like long-term support and additional features for sustained engagement. If given more time to answer these questions, I would have conducted more user research and testing on my designs. This would help ensure the app goes beyond being a glorified checklist and meets user needs to its best ability.