Productivity has become a major concern among users in recent times. We see a lot of people not getting work done because they find it hard to stay focused. This affects performance levels for both individuals and companies.
I was part of an ambitious project to design a mobile app to encourage users to stay focused when working.
Flow is a mobile app inspired by the “flow mental state” which aims at keeping users in that hyper focused state when working. Reducing distractions to ensure they carry out their work effectively and efficiently.
Without pre-existing insights, I started off by gathering data on why users can’t seem to stay focused when working. The goal was to find out what was making it difficult to stay focused during work. Naturally I assumed it was because of distractions but I couldn’t just start designing with that, I needed to explore other possible reasons and dissect the problem to get to its roots. I gathered secondary data from research papers on productivity and conducted user interview sessions with 7 users
My research revealed that the initial assumption was correct. Users were finding it hard to stay focused because of distractions but that wasn’t all. We discovered that a large number of this distractions were specifically from notifications on their smartphones. Other distractions were from being in a noisy environments and multitasking- doing more than one task at the same time.
Something notable I discovered was users that are passionate about their work were more productive as they are always motivated to complete their task. This type of motivation is intrinsic and made them stay focused and not give any chance to distractions whenever they carry out their task.
This discovery changed my initial look at the problem. There was a new part to look at which had to do with users state of mind. If I could keep users motivated and reduce the distractions around them while they work they’ll be more focused.
This begged the question how might we keep users motivated so they won’t easily get distracted.
We know there are so many distractions on our mobile phones and we almost fall for them all the time. Flow let’s you block out those distractions on your phone while you work and keeps you motivated so you can complete your work
After successfully getting to the roots of the challenge, they revealed factors which I could build a solution from. Our solution wasn’t only to block distracting apps but also encourage users to stay focused by maintaining their motivation throughout a session.
Using a familiar way to block distracting apps so users don’t get discouraged
I am trying to be innovative and creative with my solution but an important part of problem solving is knowing what works.
Competitor analysis revealed that a crucial part of app blockers is including the app blocking process in the onboarding while allowing users to be able to skip the process and continue later. I implemented this mental model of app blocking so we don’t scare away our users by being so different that the solution isn’t functional. The goal was to reduce abandonment rate by 100%
Making the design more user-friendly
The original design sketch for the UI of starting a session was a simple input field and dropdowns. This design was straightforward but didn’t carry enough information for the user and using tooltips for that would cost interaction. The goal was to convey enough information and still be straightforward and aesthetically pleasing, this meant the UI needed to be simple and intuitive.
Initial design
Final UI design
4.5/5
Customer Satisfaction Score (CSAT)
1s
Time on task
How we keep users motivated
What is pomodoro and why is it being used
Pomodoro technique helps keep people focused by taking short breaks which promote sustained concentration and stave off mental fatigue. I adopted this technique because it helps prevent users from feeling overwhelmed and by doing so it keeps them motivated throughout the time they work
Source: Shortform.com
How pomodoro technique was implemented in making the user experience of Flow
I used the Pomodoro technique as an inspiration to design a dynamic, repeatable time management flow that helps users stay focused while maintaining a sense of control over their schedule. Rather than following a one-directional path, Flow encourages a cyclical rhythm of work and rest, mirroring the essence of Pomodoro.
I implemented this through “focus level” and “break periods”. With focus level users can select the number of breaks in a session while break periods allow users choose the duration of breaks. I created 3 stages of focus level with each stage having a fixed number of allowed breaks in a session. The time the break starts in a session is determined by the app. It uses data from the focus level and the duration of the session to determine when the break will start
Focus level bottom sheet design
Break period bottom sheet design
I provided 3 ways of starting a session in order to accommodate users needs and preferences in timing. Users can:
1. immediately start a session
2. schedule a session for later
3. create a routine session.
Focus level and break periods apply to the 3 cases when starting a session
How design was used to make users set and focus on their goals
Changing how users write their goals
I wanted users to be more expressive with how they write their goals. The initial design was a single-line input field while the final design was a textarea.
I went with the final design because after carrying out A/B testing with 7 users it revealed that 80% of users preferred the textarea field because in their own words “it was more welcoming” and gave them freedom to write expressively.
Initial single-line design of the input field
Final textarea design of the input field
Using gamification to keep users motivated
One of the best way to motivate people is by rewarding them for completing a task. This was pretty straightforward but I had to implement it in a way that’s not too playful but just enough to have fun and be productive at the same time. I explored gamification methods that best fits and settled for this 3:
1. Achievement badges
2. Time constraint
3. A reward system
How achievement badges and time constraint keep users motivated
People love collecting badges so I made it easy to collect them by creating a substantial amount of badges to be unlocked. I partnered with our graphic designer to design this badges. By doing so users are encouraged to interact with the app more and complete more sessions in order to get as much badges as they can. There’s something for everyone.
This led to users frequently starting sessions and exploring the app
I designed a progress bar and a timer for the sessions UI, and a progress bar for each achievements to help users keep track of their progress but that wasn’t all they were doing. Progress bars are great motivators, having a half-filled progress bar isn’t very pleasing so it often pushes users to fill it.
Using rewards to push users to get work done
Most often in video games when players get rewards they can use them to do some nice things like upgrades to a game character. I wanted to implement this same rewards system in my design so users have more use for badges than just collecting them and they can unlock more features on the app for a better experience. This reward system is also proven to be a great way of increasing user engagement which we were trying to do at this stage.
The problem was how can I implement this. Unlike video games, our users don’t get points for completing task instead they get badges which are more like milestone rewards. We needed a reward system in which users have to be more productive in order to achieve it and would in return boost their productivity.
I developed a system that rewards users with more break time flexibility giving users the chance to choose when and how their breaks happen. I implemented this by creating a default limited break period. By completing sessions and collecting a total of 10 badges, users are allowed to increase the break period. This is the first set of rewards users get.
I tested this system with 5 users to see the impact it had on their engagement and overall experience. The results were impressive. 70% of users liked how they can get more break period by earning badges and it gave their collecting badges a purpose. This was a go ahead to implement this system in the design
The design of Flow had a positive impact on users motivation and productivity. Users became more productive as they were able to maintain high motivation levels throughout working sessions.
Our goal was to stir up an intrinsic feeling and there’s only so much design alone can do. Users still need to approach task with positive mindset in order to stay productive. I believe this is an attitude that can be developed over time
