What's new with Three Good Things

One of my weekly projects at coding bootcamp was Three Good Things, a website that helps users record and share positive experiences. The inspiration came from the three good things exercise, which I learned about as a postdoc at the Positive Psychology Center.

The exercise is simple: every night, take a few minutes to reflect on the day and write down three good things that happened. While I love this idea, I’ve always had a difficult time sticking to the habit. A good thing (ahem) about the Three Good Things website is that users can set text message reminders each night and easily complete the exercise on their phone or another device. If nothing else, it has helped me—I’m on a 30+ day streak!

Since finishing bootcamp, I’ve been busy improving Three Good Things, with the hope that others will try it out and get hooked, too. Here’s a summary of a few things I’ve been working on lately:

Visual design

Our initial prototype wasn’t pretty, but it worked. Take a look:

initial design of Three Good Things Our initial prototype

I’ve been slowly chipping away at the ugliness, hoping to making it easier to use and more pleasant to view. One big thing I noticed after a few weeks was that it was just too bright. The exercise dictates that the app should only be used at the end of the day, so I aimed for a nighttime-friendly feel.

nighttime design of Three Good Things New and improved nighttime makeover

Now users won’t be blinded when they login before bed each night.

Daily well-being tracker

We thought that users should have a way to track their own well-being/happiness, so the first version of the app allowed users to complete a fairly long survey about themselves on a monthly basis. To display results back to the user, we used the chartkick gem to create simple graphs.

When I started to actually use the app, I noticed three bad things:

  1. The surveys were too long
  2. The surveys weren’t frequent enough
  3. Customizing the graphs was a pain

In response, I swapped the old monthly surveys with short and sweet daily ones. These only take seconds to complete (or you can simply ignore them), but they generate much more interesting data.

Each night before adding their three things, users can note how much they experienced different dimensions of well-being:

  • positive emotions
  • engagement
  • positive relationships
  • meaning/purpose, and
  • achievement.

If you’re familiar with Flourish, you might recognize these as the PERMA dimensions of well-being. The basic idea is that there’s more to psychological well-being than happiness and good feelings. Sometimes our best days aren’t filled with joy and smiles—instead, they might involve deep engagement in an complex activity, or devoting time to a meaningful cause, for example. Tracking multiple dimensions of well-being helps capture these nuances.

My favorite part was switching from chartkick to d3.js to create more interactive visualizations of the daily well-being data. Within the dashboard, users can compare their well-being over the last 90 days, as an aggregate or by individual dimensions.

daily well-being graphs More detailed well-being graphs on the user dashboard

That sums up the changes that a user might notice, but I’ve also been working on the backend to make the app more maintainable and robust, too.

Tests!

When we hammered out the initial version, we didn’t use a test-driven approach, and that did eventually bite me. More than once, I refactored some code and only later realized that I had broken something in the process. So, I’ve added tests with RSpec for the models and controllers so I can refactor and add features with more confidence. While there’s still plenty more tests to write, these basic tests have been a huge help already. Writing unit tests has really helped me understand my own code better, and they are great motivation to keep methods small, simple, and easy to test.

Diving into testing also gave me a good excuse to check out services like Coveralls (for measuring test coverage) and Travis CI (for automatically checking your test/build status before merging that sweet feature branch). You can see a record of Three Good Things’ testing journey on the Coveralls repo page. Most importantly, my project README now has a cool little test coverage badge.

Changing from ERB to HAML

Lastly, I decided to change all of the view templates from ERB to HAML. Compared to ERB, writing templates in HAML is faster, cleaner, and much more readable. HAML uses indentation to indicate nested HTML elements, and allows you to rid your templates of all of those ugly closing ERB tags.

Here’s a quick before and after shot to demonstrate. On the left side, you’ll see one of the original view templates written in ERB. After removing some unnecessary elements, I converted the template to HAML, shown on the right. Doing this with all of my templates was surprisingly satisfying.

erb to haml comparison Before (ERB) and after (HAML)

More to come

While Three Good Things started as a weeklong assignment, it’s exciting to think that it could actually be useful to someone else someday. As I use it more and more, I’m starting to think that’s possible. There is still so much I’d like to add and improve, so in the meantime, I’ll be grinding away on it whenever I get the chance.

If you are interested, sign up and give it a shot! And if you have any suggestions, please send them my way.