TimeCrunch App

Mobile App

Project Overview

TimeCrunch allows students and professionals to break down large assignments or tasks into smaller, manageable parts. The app incorporates goal setting and timed sessions to help users work productively. Rather than prevent users from getting distracted online with the use of website blockers, TimeCrunch encourages them to develop personal accountability for their work by setting realistic goals and working to achieve them.

My Contributions

Roles & Skills: front end development, UI/UX design, visual design, rapid prototyping, user testing, and user research.

Tools: Figma, Node.js, and Heroku.
Languages: html, css, and javascript.
‍

The Studio brief: “The Quantified Self.”
‍
Users should be aware of the time they spend working and the time they spend taking a break in order to gain greater awareness of their natural tendencies. Quantifying time spent on certain activities is an excellent data gathering tool that will allow users to evaluate their progress and feel proud of their accomplishments.

The intended users are students and professionals completing work on their computers. They will use the app when they have a certain assignment to complete and want to monitor their work vs. break time to ensure they complete the assignment before it is due.
‍‍
The motivation for using the App is the desire to improve personal accountability for completing work on time.

Background

UI/UX Designer + Front End Developer

‍App reads from JSON file in order to populate suggestions for break time activities. In order to have variation between suggested activities, handlebar templates are used to choose different options from the JSON file. Users can add in their goals for the work session, which is then appended to a JSON file, to be used later on when the user completes their session and wants to see the goal they completed.

The app first allows users to define a goal and time they wish to complete a task in. Afterwards it encourages users to work towards their goal until they accomplish the task. If users require a break, they may take one at any time. The app provides suggestions for activities users may do during their break time. Once they decide break time is over, users are to return to work time. ‍

Functionality

How It Works

Task:
Users picked a small goal that involved a task/assignment they needed to complete on their computer and wrote it down. They worked on it for 20 minutes straight without taking a break or getting distracted. At the end, they were to take a break and do a relaxing activity of their choosing. In the end, we asked them to reflect on the goal they set to see if they completed it.
‍
First User Test Reflection:
‍Overall we found that the navigation and style of our App was pleasing to our users. They were all able to set a goal, work on it for the specified amount of time, and take the break time activity that was suggested to them. However, they all had difficulty understanding the meaning of “break time suggestion” on the set up screen, made mistakes in navigating back to the timer page, and needed a reminder of their goal during the work session.
‍
Changes we made prior to running the next test:
Making the goal setting input text box bigger, rewording the break time suggestion input to be easier to understand without explanation, changing the “no” button on the break time screen to “start another session?” to prevent navigation errors, adding the inputted goal to the timer page to give a reminder, and creating better overall styling to the App. Our users expressed that the App design looked extremely basic overall and lacked some continuity. We added our App logo, and better style to the colors/typography of each page to create a more polished design.

Justification for changes:
‍The timer page contains the main functionality of our App. We wanted to see if having the goal reminder on this page prevented users from navigating away from the App and getting distracted while they are working, thereby leading to higher rates of goal completion. In addition, we wanted to see if displaying “Keep going! You can do this!” further motivated users to keep working.

Second User Test Reflection:
‍We learned about the efficacy of our two variant designs from A/B testing. According to Google Analytics, people stayed on our App longer when they were viewing the second version of the App, which we interpreted as them spending more time working towards completing their goal.

User Testing

Feedback + A/B Testing

Prototype Final Brand Name:
‍CrunchTime
Pitch:
‍As students, I think we can all relate to that feeling of anxiety you get scrambling to finish a huge assignment that you waited until the last minute to do. At TimeCrunch we understand that students need a way to break down large assignments into smaller, manageable parts. That’s why our App incorporates goal setting and timed sessions to help users work productively. Rather than prevent users from getting distracted online with the use of website blockers, TimeCrunch encourages students to develop personal accountability for their work by setting realistic goals and working to achieve them.
‍

Branding and Aesthetics

Though this project was relatively less demanding in terms of design, I learned so many other skills in the process that enhanced my overall abilities as a designer. This was my first time working with Node.js, Heroku, and Google Analytics which altogether gave me the ability to not only design the interfaces of the app but also do some front end coding and conduct in-depth user research. It was very satisfying to see a fully functioning end product that I could put to use myself. Most importantly, this project gave me more confidence to pursue skills that I used to think were beyond my abilities and outside my scope as a UI/UX designer.

Reflection

TimeCrunch App

Let's chat :)