A centralized clearinghouse website designed to simplify the complex permitting process for researchers, developers, and managers working on harmful algal bloom (HAB) control technologies.
US HAB-CTI
Role
Product Designer
Team
Shaunak Mirashi
Hrushikesh Ingale
Yash Deshmukh
Nupur Wagle
FNU Prasshanna​
Project
Capstone
Timeline
Sep 2024 - May 2025
OVERVIEW
Problem Statement
How might we create a centralized, easy-to-navigate platform that helps researchers, technology developers, and managers understand and access the permitting requirements for testing and deploying HAB control technologies across different states and agencies?
APPROACH
User Research
To understand how people handle digital distractions and maintain focus, I interviewed 10 individuals with diverse backgrounds. The goal was to uncover what breaks their concentration, what helps them focus, and how they perceive productivity tools.
​​
Affinity Mapping
After conducting user research, I organized the raw responses into an affinity map. This helped me identify recurring themes and patterns in how users approach focus and productivity. By clustering similar insights, I gained a clearer picture of the main pain points and needs.​
Key Findings
By clustering similar insights, I gained a clearer picture of the main pain points and needs. These recurring themes emerged, guiding Mellow’s design decisions.
​
-
Frequent Distractions:
9/10 participants reported that notifications, social media, and multitasking frequently disrupted their concentration. Many described losing track of time when switching between tasks.
-
Music & Ambient Sounds:
5/10 participants already rely on background noise or music to help them focus, citing that certain sounds (like rain or lo-fi beats) improve their ability to concentrate.
-
Varying Awareness:
7/10 participants acknowledged struggling with focus but didn’t actively seek solutions. However, when introduced to structured focus tools, they expressed interest in using them.
User Personas
I created two user personas based on insights from research and key findings. These personas represent distinct user types with different focus-related challenges, needs, and expectations. ​
Competitive Analysis
To understand the existing landscape, I analyzed focus and productivity apps, ambient sound generators, and curated playlists. While some provided useful presets and ready-made soundscapes, many suffered from poor UI/UX, unorganized options, and inconsistent user experiences.
Navigation felt cluttered, making it difficult to find the right settings quickly. A few platforms offered seamless one-click presets, which were convenient, but overall, personalization and intuitive workflows were lacking. This analysis helped identify opportunities where Mellow could offer a more streamlined, user-friendly, and adaptive solution.
PROTOTYPES
Brainstorming Solutions
Before jumping into high-fidelity designs, I started with a round of low-fidelity paper prototypes to explore different layouts and interaction flows. Sketching allowed me to visualize ideas quickly, test variations, and refine key elements before moving to digital wireframes.​​
Paper Prototypes
In the first iteration, my focus was on tackling the core problem identified in my research. Taking into account the tasks that users need to perform, I identified key features that I needed to build.
-
A way for users to quickly select ambient sounds from a curated library.
-
A customizable "Focus With Me" mode combining ambient sounds with visual escape.
-
A guided flow for personalization, allowing users to select their activity and preferred sounds.
-
​A nap timer with an alarm for short breaks without disrupting workflow.
Wireframes
After sketching out the first version on paper, I translated the ideas into digital wireframes. This helped bring more structure and clarity to the layout while keeping the core flow and features intact. The goal here was to visualize the experience more clearly and prepare for high-fidelity design.
DESIGN
Visual Identity
The design choices for Mellow were intentional, focusing on creating a calming and inviting experience.
-
Typography: The logo uses a slightly playful typeface to maintain a friendly, approachable feel rather than a rigid, overly professional look. For headings and body text, I chose Raleway, which offers a clean, modern, and slightly rounded aesthetic—balancing clarity with warmth.
-
Color Palette: Soft, muted shades of blue and lavender were selected to promote relaxation and focus. The goal was to ensure that nothing on the interface felt overwhelming or visually distracting, making the experience more seamless and easy on the eyes.
-
Illustrations & Graphics: A minimal line-art style was used for visuals to complement the color palette and enhance the platform’s aesthetic.
FEATURES
Solving with Design
Before moving into the final prototype, I wanted to highlight the key features that shaped Mellow. Each one was designed in response to real user pain points. I conducted usability testing and follow-up discussions with users I initially interviewed. Their feedback helped me refine and rework the experience into something more focused, flexible, and easy to use.
1. Clearer Homepage Flow
3 out of 6 users felt the layout was scattered.
Solution: The homepage now follows a structured flow: hero section → sound selection → feature highlights.
2. Sounds to match the user's mood.
5 out of 6 users found the sound selection process a bit difficult.
Solution: Users pick a mood (Calm, Energetic, Cozy, etc.), and Mellow suggests sounds automatically.
3. More Flexibility in ‘Focus With Me’
4 out of 6 users wanted more control over the visuals, like switching scenes mid-session.
Solution: Users can now switch scenes or change activities mid-session.
4. Nap Timer Clarity
4 out of 6 users were unsure if the nap timer adjusted audio.
Solution: Clearer UI indicators now show when the timer is active and its state.
HIGH FIDELITY
Working Prototype
Bringing Mellow to its final stage, I focused on refining the interface for a seamless and distraction-free experience. The design prioritizes intuitive navigation, effortless sound selection, and a clean, calming aesthetic.​​
IMPACT
Making a Difference
Mellow was built to reduce digital distractions and help users focus better. With multiple iterations and user feedback, the final design solved key pain points:
​
-
Reducing Distractions
Mellow minimizes cognitive overload by offering an intuitive, mood-based sound selection, helping users enter focus mode with minimal effort.
-
Enhancing Personalization & Ease of Use
The competitive analysis showed that many existing focus tools lacked customization and felt rigid in their workflows. Mellow’s mood-based sound selection and adjustable visuals give users the flexibility they need to stay engaged without manually curating playlists or settings.
-
Structured Focus Sessions
7/10 participants in research mentioned struggling with focus but not actively seeking structured tools. Mellow’s "Focus With Me" mode, inspired by real-world study techniques to influence and train your mind, provides a guided experience tailored to the user's needs, making structured focus more accessible.
-
Improving the Nap Timer Experience:
Mellow’s refined nap timer makes it easier for users to take effective, controlled breaks, ensuring better rest without disrupting their workflow.
REFLECTION
What I Could've Done Differently
If I had more time, I would have explored additional iterations and refinements:
​
-
High-Fidelity User Testing
Conducting a final round of usability tests with a fully interactive high-fidelity prototype could have provided deeper insights into micro-interactions and usability gaps.
-
More Personalized AI Recommendations
Expanding on mood-based sound selection, I could have explored AI-driven recommendations that adapt based on user behavior over time.
-
A/B Testing for Navigation Flow
Running A/B tests on different homepage layouts could have provided more data-driven insights into what structure best suits user needs.
-
Mobile Experience Optimization
Since Mellow was designed as a web app, additional exploration into mobile-first designs could have ensured a seamless experience across devices.
-
Community Features:
Some users expressed interest in sharing focus sessions with friends or having a leaderboard for maintaining consistent focus. Given more time, I would have explored social integrations that align with the core purpose of Mellow.