Fixate - A Productivity Application for students

Human computer interaction and design

Timeline – 7 weeks

Collaborators

My Role  – UX Researcher and Front End Development

Problem 

Distractions are endless and college students (and employees) find it hard to focus on school or work, no matter how much motivation they have. The question that arises among everyone is that how can we give ourselves the little push we need to turn out goals into productivity?

Motivation

Research shows that studying in intervals accompanied by breaks of around 1/6th of the interval time are quite effective (especially 1hour interval – 10 minute break plan are found to be most effective). This time management method known as the  Pomodoro Technique developed by Francesco Cirillo is based on similar grounds which uses a timer to break down work into intervals, separated by short breaks. When using technology for the purpose of homework, many people find themselves easily distracted due to the vast amounts of possibilities that the internet offers. Hence we are designing an application that would implement the Pomodoro technique by creating blocks of time directed towards studying with short break periods in-between, and hence improving the ability to focus and learn.

To further improve their productivity, the app would let the user record their study sessions and progress throughout the semester (or quarter) and then he/she can access these reports in the application with the help of graphs and charts.

Design Process 

Brainstorm 

The idea of the application came upon when we decided to look into various problems that students have in their daily life. Our team brainstormed various issues that the students have (especially college students) which required attention that inspired us to delve into this topic. Once we zeroed into it, we look into many alternatives and researched into various solution that could solve this problem.

We also created an inspiration board and each member of the team put on their research on various applications or services that college students use which relates to the problem. Few of the apps that we gathered inspirations as shown below.

Concentrate: Google Chrome Extension - A simple Chrome extension that blocks your choice of distracting websites for a solid period of time. It’s easy and helpful but lacks the option for break periods during your timer.

Concentrate: Google Chrome Extension - A simple Chrome extension that blocks your choice of distracting websites for a solid period of time. It’s easy and helpful but lacks the option for break periods during your timer.

A mac app that works to gently remind users to take breaks form their laptops on a regular basis.

A mac app that works to gently remind users to take breaks form their laptops on a regular basis.

Focus: It is a productivity app that is integrated into your computer that incorporates additional interactivity such as break activity generators and music playing to help you get focused in your work

Focus: It is a productivity app that is integrated into your computer that incorporates additional interactivity such as break activity generators and music playing to help you get focused in your work

Inspiration Board

Need-Finding and Requirement Gathering

The next phase of the project involved planning for need finding. We started with categorizing various users (freshman, juniors, seniors, grad students etc) and then performed many rounds of interviews with them. After that we chose a couple of individuals whom we could observe and further research about their study schedules and make notes based on the observations. This helped us gain insights about various design opportunities we could use in our web application. Once we collected all the data, we found out and identified the user needs based on the observations and need-finding research we conducted for our project.

Storyboarding and Prototyping

After getting the relevant data, we looked into various existing applications, artifacts and services that relates to your concept. The inspiration board helped us understand and compare the existing landscape of the applications which eventually led us to do a competitive analysis among these services and products that facilitated our design ideas.  

Our team narrowed down to two design ideas and we illustrated it with the help of storyboards.

Storyboards

After laying out the storyboards, we discussed strengths and weaknesses of each design and how well they achieve the goals set out by our point of view.

Then based on the storyboard ideas, we designed two paper prototypes that instantiated our ideas into our web based mobile application.

Initial Paper Prototypes based on storyboards

Heuristic Evaluation and Wireframes 

After getting the prototypes, we let experts (professors, TAs and other students) evaluate our prototypes based on usability and other factors. We conducted many walkthroughs with a wide range of evaluators and took feedback from them on usability issues found in our prototype. Then we went through all the heuristic evaluations to redesign our prototypes and then formed wireframes showing navigational skeleton that looked upon for improvement of usability issues found by the evaluators.

Wireframes with Navigational Skeleton

Development Phase 1

After getting the wireframes, we designed a development plan (weekly basis) and started fleshing out our interactive prototype into a full-fledged application. We started with the basic functionality first and got our interactions working and then concentrated on the design aspect of the application.

Initial First phase HTML Prototypes

USER TESTING

After completing the first phase of development, we started the user testing of our application. We got around 3 – 4 students to test our application and then observed the users testing out our prototype on their own cellphones. Users were asked to carry out tasks such as timer functionality and other navigational flows to explore the application. We thoroughly noted down observations and gathered feedbacks from the users, and compiled enough information for further redesign and testing.

User Testing of Working Prototype

REDESIGN AND A/B TESTING

Based on the user testing, we redesigned many aspects in terms of navigational flow and usability. There were few design decisions for which we were not sure of its effectiveness, so we prototyped alternatives and performed A/B testing on the various prototypes. After getting the results, we looked into our chi-square tests to identify whether the design decisions in the modified prototype made any significant impact or not.

A/B (Chi Squared) Testing Data

A/B (Chi Squared) Testing Data

Final Design

The final working prototype was published online on x10hosting and heroku cloud hosting platform. Our application fixate essentially lets the user create sessions for studies and break and implements the Pomodoro technique with the help of timers. With the help of bar graphs, the users could also their progress throughout the week. To store user’s session information, we implemented a database using MySQL. 

Final Design Prototypes

Final Design Prototypes