Pomodoro App

OVERVIEW

We designed Pomodoro, a desktop app that utilizes features like blacklisting websites, gamification, and group study sessions to encourage studying and as a byproduct, suppress procrastination.

With Pomodoro, users can feel motivated to study by farming in-app currency through study sessions to purchase aesthetic upgrades! Users can also restrict access to distracting sites via the app and replicate group studying through its group session feature.

TYPE

Design-a-Thon Project
Personal UX Case Study
Web Design

TIMELINE

3 Days (Design-a-Thon)
1 Month (Iterating)

TEAM

Austin Leung
Leon Hsieh

ROLE

UI / UX Designer
User Research, Visual Design, Prototyping & User Testing

Screen capture of the study session screen of the Pomodoro app

‍Invite your friends to join you or study alone when you start a study session! Using popular and proven study technique "Pomodoro," which utilizes short breaks and study periods, you can work efficiently and not feel mentally fatigued.

Before your study session you can create a prioritized task list to help break down those large tasks into bite-sized items. You can check these tasks off as you go, revealing the next task in decreasing priority!

Ever get distracted while studying on your laptop? Find yourself wandering off onto sites like Youtube or social media? The new Blacklist feature allows you to set "Blocks," which are sets of websites that will be restricted from access while you study! Customize your Blocks to suit each of your unique study sessions and prevent those intrusive thoughts by making it not a possibility.

Screenshot of session type selection page of Pomodoro (group or solo)

Studying or working can be an incredibly mentally taxing activity. When you use a Pomodoro study session, you will be able to grow crops as you study, giving a sense of progress and fun, and earn money as you study, which can be spent on aesthetic upgrades like different types of crops or avatars! Collect and explore all the different types of crops available, each with their own animations and selling price!

Skip to Final Design

This project originated in late 2020 from my university’s held Design-a-Thon, which is a three-day end-to-end design process with a specific prompt. That year’s prompt was Productivity and Mental Health Procrastination.

Given the prompt, my team decided to pivot the wellness theme into schoolwork and procrastination, as we are both deeply familiar with those hardships. Our goal for the project was to make something that people would desire and even look forward to incorporating into their studying. Make studying fun. Suppress procrastination in the process.

How can we prevent procrastination in an indirect and engaging way?

Competitive Analysis

We first looked into the existing market of study apps, to find existing positives and negatives in the market. What do existing apps already offer and how can we improve upon these features? What doesn’t exist in the market and how can we help fill it?

From each site, we gathered insights on features, accessibility issues, and user flow issues that we wanted to expand upon, fix, or remove. We found user-positive features such as gamification via growing a virtual tree in Forest or task management in Flora. However, none of the existing apps take an active role in preventing procrastination. How can we make the study process fun and exciting while actively inhibiting bad habits?

View Competitive Analysis Screen shot of the competitive analysis on an Excel sheet.

User Forums

Because we only had three days to complete the entire design, we decided to utilize online forums as a way to gather varying perspectives on how procrastination affects people and how people are currently dealing with it. We mainly went to study-related subreddits to find popular insights into the subject.

Screen shot of a reddit post about structuring your time as a solution to procrastination.

1. I can deal with procrastination by using time management methods and structuring my time doing work.

2. Dividing my large tasks into smaller, easily palatable 'baby steps' makes my work much easier to start.

3. Making to-do lists and writing down a concrete list of things to do has helped many students in procrastination.

User Interviews

After completing some initial desk research, we wanted to get more personable research via interviewing family, friends, and students on campus with varying experiences with procrastination. Going into this, we aimed to find and understand how we could transition effective both online and in-person study techniques to a desktop app feature.

Concerns and Design Goals

We then compiled all the insights onto a jam board where we were able to categorize each specific concern into a summarized high level goal / common problem for users. These goals will be used to help guide our design to be more user-centric.

Screenshot of jam board of users' own thoughts on causes of their procrastination

Screenshot of jam board with users' self-proclaimed or self-though solutions to their procrastination problem

Ideating

After compiling the key insights and design goals from users, we had a few ideas on how to help stem some of the concerns. We each spent half an hour sketching and writing out ideas for each of these concerns and presented our ideas to each other, grouping similar ideas and adding notes to less popular ones.

Screenshot of feature ideas for Pomodoro (brainstorming)

We ultimately decided on a few main features to solve or mitigate the users’ concerns:

Pomodoro Style Study Session

After conducting the desk research and user interviews, we decided to implement the popular and highly suggested pomodoro style study technique to help structure users' study times and give the app more of a design direction. The pomodoro technique has been proven to be effective at helping users work more efficiently.

Gamified Study Sessions

To make users more interested in studying, we decided to take the approach of implementing gamification. Each study session will allow the users to earn currency which can be spent on aesthetic upgrades, which have also been proven to be effective at retaining a userbase.

Blacklist - Blocking Websites

Many users complained about being easily distracted by social media or sites while attempting to study. We decided to try utilize the platform of our app and make it restrict access to certain sites and apps to promote good study habits.

Friend System

Oftentimes users prefer to study with friends and the visual confirmation that a peer is studying at the same time can often encourage users to study as well. We decided to implement a friend system where users can add friends to study sessions or view their current status.

We then decided to create a rough skeleton of the app, creating paper wireframes for the screens. It was important for us to not tunnel-vision onto one design; thus, we were each given a limited amount of time to sketch as many wireframes as possible, no matter how outlandish or unusual they seemed to be. By doing this, we were able to come up with many traditional and unorthodox design screens that we discussed in further detail.

Screenshot of low fidelity preliminary sketches of Pomodoro

After comparing many of the screens, we decided to test some of the paper sketches on users by converting them into mid-fidelity digital wireframes. The main user flow we wanted to test was the process of starting a study session, as depicted below.

Mid-fidelity screen of Pomodoro's home page

Mid-fidelity screen of Pomodoro's session set-up screen

Mid-fidelity screen of Pomodoro's warning screen

Mid-fidelity screen of Pomodoro's study session screen

User Feedback

To test the flows, we asked each participant to do a task with no specific instructions -- which in this case, would be to start a study session. While completing this unmoderated task, we noted down their thought process via what buttons they pressed or any verbal thought processes during the study's lifespan.

After doing this testing, we found some feedback for our designs: a big one being confusion due to lack of instructions or CTA buttons for several of our features like starting a study session or using our new ‘blacklist’ feature.

Feedback #1: Starting a Session

Some users mentioned it was unclear how to input tasks into the ‘to-do list’ and that the process of starting a session was confusing due to lack of annotations. Users also mentioned they would like to see what sites are currently blocked in the ‘blacklist’ when starting a session, due to differences in how they want to study.

This was something we previously did not think of before. Was there a way to make the blocked sites visible as well as easily and quickly modifiable from both the ‘start session’ pages and ‘blacklist’ page?

Screenshot of old before study session screen on Pomodoro

❌ No visibility of blacklisted sites
❌ Users mentioned that they were confused on what to do
❌ Lack of instruction and confusion between two important inputs

Screenshot of new crop selection screen on Pomodoro

✅ Crop selection box is larger and more readable
✅ Added upper progress bar for progress visibility
✅ Split the two inputs into separate screens reduces cognitive overload

Screenshot of new task-list selection screen on Pomodoro

✅ Adding a task is more intuitive with clear CTA button 'Add Task'
✅ UI is more clean and consistent

Feedback #2: Blacklist

Users mentioned that the ‘blacklist’ feature was hard to understand due to lack of instructions and ambiguity of the feature’s name. Furthermore, they stated that when a large number of websites were added to the blacklist, it was hard to read or peruse due to the sheer number of words on the site. Additionally, some claimed that they wished there was some search or filter feature. For example, if some user wanted to add back access to a certain site, they would have to scroll through their entire banned site list to find it and then remove it.

Screenshot of old blacklist feature on Pomodoro

❌ Lack of clear division and categorization makes page hard to read
❌ Users mentioned that they were confused on what to do
❌ Users desired a search or filter function

Screenshot of new blocks page on Pomodoro

✅ Included tutorial for instructions on using unique feature
✅ Stronger CTA buttons
✅ Split the page into a summary page and details page for visibility
✅ Transitioned from a singular blacklist feature into 'Blocks' for multiple blacklists

Screenshot of the editing blocks page in Pomodoro

✅ Added website icons for better readability
✅ Fixed color contrast issues
✅ Users mentioned that new 'Blocks' feature much more intuitive than former

Given all the usability testing and user goals discovered, we heavily shifted the user interface to be more clean and simplistic. We also made many changes in simplifying the user processes for many of the features, constantly reviewing our initial design goals as a guide to our process.

View Figma Design Prototype

| Features in the App

Screenshot of an onboarding screen on Pomodoro

During user interviews, a very common issue for users was not knowing how to use or interact with the app. Also, during stakeholder feedback, we found certain features to be confusing — especially the Blacklist or Block feature. Thus, it was important for me to implement an extensive Onboarding feature that explains the app features in detail about how to blacklist websites or start a group study session for a new user. I wanted to make the app more usable and friendly to all types of users, whether they were seasoned app users or were brand new!

From initial user interviews, we found that many (4 out of 5 participants) users preferred to study with friends to reduce procrastination. Additionally, looking at all current existing competitors on the market, there is not an app that supports the idea of “studying together.” Thus, I thought it was very important to create a sense of studying with friends in the app as something that sets the app apart and fulfills users’ needs.

In Pomodoro, you can start a group session where you can study with friends! You can grow your own crop as well as watch your friend’s crops grow alongside, creating a sense of community in working together.

Screenshot of Friends screen on Pomodoro

Screenshot of the virtual market/shop on Pomodoro where you can buy aesthetic upgrades

Gamification of apps or in general has been proven to make people and employees to be much more productive than if gamification weren’t employed! As such, we initially decided to employ this feature to encourage users to return and keep using the app. Additionally, we conducted user testing with and without gamification elements and found that most users responded positively to the gamified elements, claiming that it made the app “more fun” and enticing.

In Pomodoro, gamification comes in the form of the in-app currency Coins which is achieved through studying in Pomodoro sessions and growing crops, which are sold for Coins. These coins can be used to purchase aesthetic upgrades such as different crops or avatars!

After conducting initial user interviews, we found that users had trouble focusing and often found themselves wandering off onto “more fun” things, such as social media. To reduce this mental wandering, we implemented a Blocks feature, where the app would be able to restrict access to certain user-designated websites during a Pomodoro study session!

Users can name, edit, or create as many Blocks as they want! Each block contains their own list of custom blocked websites, allowing users to switch between sets of blocked websites with ease and based on their needs!

Screenshot of a solo study session screen on Pomodoro

The app is based around the Pomodoro study technique which has been proven to be effective at helping productivity by breaking down mental stamina into multiple study parts and breaks. This technique has been utilized by other popular study apps such as Forest. We decided to base our Design-A-thon prompt solution around this technique, as both of us have used it to help with our procrastination before.

Pomodoro elevates this study technique by adding Blocks (explained above), group sessions, and user-designated priority tasks. These are all customizable via the Pomodoro configuration pages prior to starting a Pomodoro.

Creating a stronger brand identity

Due to time constraints, we weren't able to create a strong brand identity for Pomodoro. I think that the design for the app is a little too simplistic -- although good for visibility and ease of user flows -- and some pages are lacking in content and too strong in white space. Exploring Pomodoro-centric graphics, typography, colors, and such would definitely elevate the app to a greater level, making this a strong first future step for the app.

User testing the final product

Additionally due to time constraints, we weren't able to test the finalized design or some of the mockups along the way in the design process. There may be untapped potential in scrapped designs or untested usability errors in the final design that need to be fixed. Some questions that lingered on my mind about the designs included:

How can we better simulate studying in popular 'outside study environments,' similar to a café or library?
How can we make studying together with friends more collaborative if there is group work?
How can we continue to make Pomodoro more unique than other apps on the market?
How can we further make the 'Blocks' feature more accessible and easy to understand to new users?

Fleshing out the design system

During the Design-a-Thon, the friend system was a last-minute inclusion which was implemented with less design thinking than I wished. Looking back, I would love to explore finding new like-minded friends through the app itself to study with, or anonymous group sessions which could simulate studying in outdoor study environments.

I think that real-time peer or group sessions aren't very explored in study apps, and I think that it could make this app be unique and a great selling point.