Making studying with music distraction-free with 30/30 Listen

Making studying with music distraction-free with 30/30 Listen

Overview

6 col navy line

I was tasked with redesigning the 30/30 app, which is a pomodoro productivity timer that had the capability of categorizing tasks into lists. This project was mainly focused on getting accustomed to IOS guidelines, UI design, and prototyping.

Context

3 col navy line

4 Weeks

Interface Design Course

University of Washington

What I did

3 col navy line

UI/UX Design

Prototyping

hero mockup

“Work work work work work” - Rihanna

The pomodoro method is a highly recommended form of time management to increase one’s productivity. Traditionally, it consists of working on a task for 25 minutes with a 5 minute break, four times until you can take a longer 30 minute break. Rinse and repeat.

On the other hand, listening to music while studying can become distracting, especially if you spend too much time trying to find the perfect playist to tune out. Through 30/30 listen, I wanted to turn that distraction into an incentive for productivity through pomodoro.

before mock

Gesture overload

The original 30/30 app is pretty straightforward in theory; a pomodoro timer where you can organize tasks into categories. However, in an attempt to utilize touch gestures, there were too many complex interactions that were physically unintuitive. For example, a three-finger tap created new lists and swiping in various directions each had a separate action.

Visually, I really wanted to clean it up with a more minimalistic design. I felt that the visuals and interactions were distracting, defeating the purpose of using a pomodoro app.

Big picture

User goals

topic line

To increase productivity using an app to plan and automatically time tasks/breaks

To minimize distractions from the app itself

  

Class goals

topic line

Experiment with IOS guidelines

Practice with mobile app design and prototyping

Explore opportunities for microinteractions

Research

Market research

topic line

I looked at many other popular pomodoro-style timers to see how they incentivized users and prioritized features for the sake of simplicity.

  

Information architecture

topic line

Though pomodoro apps are generally shallow in structure, I wanted to reduce it even further as I explored hierarchy of features and information.

iteration screens

Finding the right visuals and patterns

This took the majority of the time as I explored different patterns in which I could organize tasks while keep the structure shallow. Visually, I wanted to challenge myself to a minimalist look since I often had the tendency to over-design.

music player options 3
microinteraction gif start line
music player options 2
microinteraction gif start line
music player options 1
microinteraction gif start line

Making the same mistake

One of the biggest challenges of this project was the interaction to reveal the music controls. I explored different options, but they didn’t seem intuitive and having the controls visible by default conflicted with the timer controls.

However, I realized that I had introduced the same issue that I had highlighted in my heuristic review; unnecessary interactions and information. Instead I pivoted to a more visual approach to lessen the hierachy of the music player and consolidate the actions you can take on the timer and the music.

However, I realized that I had introduced the same issue that I had highlighted in my heuristic review; unnecessary interactions and information. Instead I pivoted to a more visual approach to lessen the hierachy of the music player and consolidate the actions you can take on the timer and the music.

hero all feature mock

Introducing 30/30 Listen

Organizing tasks into lists

topic line

Tasks can be organized into lists so that users can focus on one workflow category like school work or a project. This also encourages users to be specific in creating tasks like "work on logo hw" as opposed to "homework".

 

 

create list flow final

 

timer flow final

Pomodoro timer

topic line

Users have limited controls to what is playing during work mode, using a thumbs up and down method to skip songs if necessary. The task list can also be viewed in full-length if users wish to see their whole workflow.

Music and timer preferences

topic line

Users can set up any notification, timer, or music preferences in Settings. Music is first set up by choosing a streaming service, in which it will import your existing playlists or a recommended playlist that users can choose from to enhance their productivity.

 

settings flow final

My favorite Spotify playlists & artists for studying 

6 col navy line

O3ohn

John OFA Rhee

Daniel Caesar

Offonoff

Russ

The Pulse of K-Indie

Interested?                                                                                        Interested?                                                                                        Interested?                                                                                       Interested?