raisin' bread

I worked on Raisin’ Bread, a productivity tracking browser extension, with three other students as the final project for CS0320 Introduction to Software Engineering. We spent three weeks designing and developing the extension. I was primarily responsible for designing the frontend, which consisted of three main features: an options menu, data visualizations, and gamification.

Drawing inspiration from Tamagotchi pets, we wanted to create a creature that users would care for by spending time on productive websites. If users visited unproductive ones, their pet would become malnourished. The way users spend their time online determines the health and happiness of their pet.

Like Tamagotchis, we knew wanted the dough to ultimately evolve into a unique form. However, it seemed difficult to create a set of new characters in the time span we had. After a few mock-ups of the pet, we decided to make pet bread. Users begin with an unformed lump of dough that with time and care, can be raised into bread. If users are unproductive, their bread may come out of the oven burnt.

I worked on creating a control panel. This would allow users to customize things to fit their mood and context. Users can choose to whitelist/blacklist the current site, have their bread follow them from site to site, and increase the intensity of the game.

After feedback from initial users to create, we added the intensity feature to promote balance between work and rest. Increasing intensity will emphasize the influence that unproductive sites have on your productivity while decreasing it will allow the user to relax the constraints of productivity. From the results of the studies, we also added tooltips to the popup to explain the functionality of each element. Once users are familiar with the system, they can choose to turn off the tooltips. 

The anthropomorphized dough is a great short term measure of productivity, but I was curious how patterns would take shape long-term. Using d3.js, I crafted visualizations on the way a user spent their time on the web. It was a challenge finding visualizations that struck the balance between being intuitive and motivating.

To add complexity to the game. I designed and implemented a pantry, where there are tiers of bread, common, uncommon, and rare. Each level corresponds to an interval in the pomodoro timer. The longer users are productive, the more chance they have of unlocking a rare bread.

Finding the best way to tie productivity to the dough in a way that was sufficiently difficult but also motivating was another challenge. After iterating on our design, we created a fun, interactive game with positive reinforcement that would lead users to be more productive. Designing an intuitive and unobtrusive user interface was a time-consuming process. However, I found it rewarding to see how paying attention to the smallest details could transform something simple to be compelling.

It was awesome and rewarding to bring this project to life. What began as a far-fetched idea of making a pet that would groan if you went on Instagram, became a fully-realized lump of dough that can be raised with care. Working on this project taught me how important design was. When it comes down to it, writing code wasn’t the hard part. Reasoning about how and why something works the way it should can save hours of work.

You can download the extension here. Unzip the file, go to ‘chrome://extension', click ‘Load Unpacked,’ and select the folder.

See if you can dough your best to stay productive!