As our screen time increases, there are lots of people who experience cognitive overload on a daily basis and struggle to focus. Flowstate is a web app created to help users sustain focus and increase productivity, especially for study and office work. As cognitive overload often limits productivity, the goal was to develop a tool that supports focus without causing mental overload, so the user can gain more mental clarity and get stuff done.
My role
Entire product design from research to concept creation, visualization and testing.
Design goals
• Offer a solution that reduces mental load
• Create an intuitive, distraction-free interface that’s not overwhelming to the user
Target group
People who report to struggle frequently with focus and productivity while studying or working a desk job.
Outcome
A focus and productivity app that is both brain- and neurodivergent-friendly, and leads to decreased mental load, increased productivity, focus and improved well-being among users.
At the start of the project, I defined several questions to clarify user needs. With the answers to these questions, I could identify and create solutions that are beneficial for focus and productivity.
• What are pitfalls and best practices regarding focus and productivity?
• How are personality and neurotypes affected by mental overload, and what are their needs?
• How can we visualize data without causing overwhelm?
To answer the research questions, I used a variety of research and design methods. These were the ones that had the most impact on design decisions.
• User interview and prototype testing
I asked users about their focus and productivity habits, and later on tested the clickable prototype to refine core functionalities and usability of the app.
• Concept review
I asked users and experts for feedback to validate and align my concept with user's needs.
• Expert interview and review
I consulted therapists specializing in focus challenges to understand cognitive overload and how personality types (like ADHD or perfectionism) impact focus and productivity. I also involved this group later on in the design process by testing clickable prototypes to validate my insights.
To get the anwers to the questions I had, research was conducted. I could now identify how to create solutions that are beneficial for focus and productivity. Here's what I've found out.
Experts made it clear that balancing focused work with breaks preserves your mental energy. This led to the integration of both focus intervals and meaningful breaks.
Focus and break rhythms will vary per person and task. We can add value by offering customizable focus and break duration.
Choosing the intention of both your focus time, but also your break time helps. Task breakdown may help with this, being able to cross things from your to do list can help to build more momentum.
Users need an app with minimal learning curve. When focus and productivity already in need of improvement, most simply won’t have the bandwidth to get started with apps that have a very steep learning curve. By focusing on keeping the app's initial interface simple and intuitive, users will be able to get started immediately.
Color usage and the right amount of contrast in your design isn’t only good UX for visually impaired users, they affect each and every one of us, by reducing our mental load. Additionally, data that's made more visual allows the user to understand the data in just one quick glance instead of users having to read or count everything can also make a huge positive impact.
I ideated through sketching as this is a low-effort way to explore new ideas. I created the essential features of the app like the visual timer, focus and break mode, and the to-do list. While reviewing the concept with experts and users, it confirmed the insights and gave a green light to move on to the higher effort phase of wireframing and protyping.
After some adjustments, wireframes, clickable mid- and high-fidelity prototypes were created using Figma. For visual design I chose high-contrast colors to make the interface accessible and mentally low-impact, making it possible for users to see progress at a quick glance without too much distraction. By using strong color differentiation between focus and break modes, I created a clear visual cue that signals the mental shift between focus and relaxation.
I iterated on background colors, drawing from natural hues, as this was recommended by experts to support focus. User tests revealed small vulnerabilities in the structure of the user interface in certain scenarios and interactions. In addition, users asked smart questions, which led to further improvements.
I approached the design with 'Atomic Design' principles. Structure-wise, this meant that smaller components are the building blocks for the larger, more complex components. This ensures sustainability and scalability to a design system for future iterations, and enhances efficiency and technical feasibility in the development phase.
A user-centered, iterative design, created while collaborating with mental health experts.
Flowstate optimizes mental capacity so users can stay productive and focused, and feel better while doing so. To reach this outcome, I conducted research, ideated, created and tested three prototypes (low-, mid-, and high-fidelity) with users.
• 75% of users reported being more productive and focused
• 85% felt less overwhelmed while working or studying with Flowstate
• 80% noted improved well-being both during use and afterward
When resources are available, these are my recommendations for a future version based on user and expert feedback:
• Customizable color schemes to suit user preferences
• The ability to add a time estimation to both to do's and break activities
• Drag-and-drop functionality from to-do list to screen (so the user can work on a selection of tasks per focus session)
• To avoid external distractions, ask the user if they would like to snooze all notifications when in Flowstate mode (more research needed on technical possibilities)
Designing Flowstate helped me to deepen my understanding of cognitive load, the importance of simplicity, data visualization, clear phases and transitions. It taught me to prioritize simplicity where possible, so products work smoothly for users without overwhelming them.
In hindsight, I have to admit that refining the product to its core functionality was way harder than it looked. There was a constant temptation to add more features to solve more pain points I found, with the risk of compromising on simplicity. I eventually solved it through prioritizing pain points and opportunities.
Collaborating with mental health experts was an unforgettable experience. I gained valuable insights on cognitive load that helped me grow as a UX designer. I continue to apply these lessons in my designs, because I believe we could all benefit from a mental "deload" from time to time in our (user) journeys.
I'm available for job opportunities, collaborations,
or just a friendly 'hello' 😄
