Making Nurture, a Chrome ExtensionIntentionally nurture your likes and dislikesBen ReimerBlockedUnblockFollowFollowingJun 10Photo by Sharon McCutcheon on UnsplashA few weeks after finishing my last class in a Bachelor of Interaction Design, I found myself sitting on a couch with lots to do — but doing none of it.
Outside of the structure of a school or a workplace, staying productive was surprisingly tricky.
It’s hard to be self-motivated.
I decided to cancel all the plans (I wasn’t doing anyway) for the day, and spend the remainder of my time building a chrome extension to help myself be more productive.
Here’s how it went.
3pm: StartI started this project with some introspective thinking, and realized that the best solution for my productivity issue would be for it to come naturally.
To love being productive, and hate being unproductive.
If your feelings are in line with your goals, then there’s no need to try and trick yourself into working hard.
Instead of needing to rely on the structure provided by others, I can be productive because I just want to be productive.
In other words, I need to nurture a love for what is good for me and a hate for what is bad for me.
It won’t be hard to work on projects if I love doing it.
It won’t be hard to say no to distractions if I hate the feeling of being distracted.
It will be easy to eat healthy if I love eating healthy.
It will be easy to avoid junk food if I hate eating junk food.
Admittedly, it still requires self-discipline.
I figure that, if you prefer doing the ‘good’ thing, you’ll do it naturally.
But until you get there, it will take some willpower to keep focusing on the good.
This rests on one significant premise — that it is possible to intentionally change your likes and dislikes.
While my evidence is anecdotal, I think it’s possible.
Somehow, I’ve found that, in a way, I have made the change myself.
Take working out, for example.
I don’t really do it.
But I do have a morning routine that involves push ups.
I used to hate doing them, so I would skip it.
But eventually my desire for being fit overcame my desire for being lazy, and now I actually do it — and enjoy it.
I found a feeling within it (that burn in your arms afterward? It feels good, like I’m making progress), and nurtured it to the point where I look forward to push ups, and miss them when I don’t.
In James Clear’s book Atomic Habits, he describes, “one of the ways to make habits easier is to improve the reward that follows the habit.
” The better the reward, the more likely your brain decides that this is worth repeating.
That’s what I did with my morning routine.
I focused on the reward (the feeling of progress), and pumped it up so that was all I thought about.
I’ve done it in other aspects of my life as well.
I eat less junk food because I think of how it affects me, and that makes me dislike it, just a bit.
I used to hate washing dishes as a kid — now I don’t even mind it.
I sometimes almost enjoy it.
It feels almost therapeutic to get those dishes clean again.
So clearly it’s somehow possible to change your likes and dislikes at an identity-based level.
It seems to involve focusing on a feeling within that action (junk food feels unhealthy, cleaning dishes feels therapeutic), and growing that feeling enough to change my overall perspective on it.
So let me somehow app-ify this knowledge.
3:30pm: Design — Iteration OneI’m planning on this work being iterative — in that I just start by making something, see where it went wrong, make something better, and repeat.
It’s too easy to get paralyzed with indecision if I want it to be perfect the first time.
Better to ‘fail forward’, and mess up as I go along.
In iteration one, I simply wrote down all the components I thought I’d need.
Right away, the first problem I see is the interaction.
What do the users actually do?.Just look at the likes or dislikes for a minute, then close the app?3:50pm: Design — Iteration TwoEarlier I noted that, “if you prefer doing the ‘good’ thing, you’ll do it naturally”, and that seems to be the core issue.
You could track progress with how you feel towards the action over time — it provides a visualization of your goal.
According to the first, and only, psychology paper I then looked up on the matter:“[people] judge easy-to-visualize goals to be closer than difficult-to-visualize goals, which in turn increases effort and commitment” (Cheema & Bagchi, 2011).
Sounds legit, I’ll go with it.
My second iteration included the typical five range smiley faces to visualize a range of like to dislike.
Dots underneath indicate the number of times each had been selected.
I thought that a rather clever way of showing progress, would be by older dots fading away.
So you can see progress as the dots (ideally) move toward the side of the range you want them too.
With this, you also create a new identity you can see, as all your dislikes turn into likes.
And you’re not stuck in the past — if you now love broccoli, you’re not forever plagued by the five times you said you absolutely hated it, months ago.
4:20pm: Design — Iteration ThreeI thought the previous version was on the right track enough to move to higher fidelity.
Furthermore, I need to keep this app as simple as possible if I’m actually going to be able to code it later today.
I found almost all the faces I needed in about 50 seconds, thanks to a membership on the Noun Project.
The rest of the design quickly came together.
4:30pm: Design — ContinuedNot having anyone around to user test the idea (I’m feeling iffy on the copy and flow of content), I’ll just move on to the rest of the design.
I added a home page, and the ‘add new’ page.
In the process I added percents.
So for push ups, I’m aiming to 100% like it.
Based on previous clicks, I’m at 64%.
This provides a sense of progress and mastery; adding an element of gamification to the process.
5:00–6:00pm: Break for a call and food6:00pm: DevelopmentI’ve never built a chrome extension before.
I started with Chrome’s “Getting Started Tutorial”.
As with learning anything new, there’s a fair bit I didn’t understand.
But enough that I did understand.
Something I started doing on a previous project, is pseudo-coding on my designs, to think through architecture and identify potential problems.
The first two times I added this picture, I immediately noticed an issue.
So it did indeed help.
Using the example files from Chrome, I removed what I didn’t need and began adding what I did.
At the beginning it was mostly playing around, seeing what affects what and how it breaks.
7:00pm: Design — UpdatedI found some holes in my designs as soon as I began developing.
I had forgotten a ‘close window’ button (rather significant), and I didn’t have control over the window border radius or shadow, among other things.
I decided to build this project in Vanilla JS.
In my history of coding I somewhat jumped from jQuery to React, so it’s nice to go back and do a proper Vanilla project, and practice directly manipulating that DOM.
I started working out the components.
The first challenge was turning an array of objects into a list of HTML.
I made a function to do it for me, and voila, the home page:Next, I focused on making the individual item page.
Turns out that Chrome extensions refuse inline JavaScript, such as onClick, which I’d become used to in React.
To register a click, I needed to add EventListeners to a dynamically changing list.
This was a nice opportunity to learn about how event delegation works.
Instead of EventListeners on each item, I simply added one to the parent and used the event target id to identify which item had been clicked.
I discovered JavaScript’s weirdness with floating point numbers, when I tried to manipulate opacity on the dots.
To avoid this in code, I worked with opacity out of 100 (instead of from 0–1), and calculated the CSS value out, once all JS math was complete.
9:30pm: More DevI built out the third module; the add item.
A nice UX touch was having the input placeholders specific (and change) according to if a user was trying to build a like or dislike.
1:40am: BedNearly 11 hours after I started, I called it quits for the day.
The app could still use some serious styling updates, and the individual item page had static dots not yet clickable by the user.
Over the next week I will put in time here and there where I can to complete it.
The Following WeekFunnily enough, as I work, I get a taste of what I’m trying to accomplish.
Feeling unmotivated, I start wasting time.
But I catch myself and say, “I hate being distracted.
” It kind of actually works.
This moment highlighted the importance of self-identifying with what you’re trying to become.
Looking back at the app, I realize I could make some changes to better achieve this.
I turned the action into a sentence the user aims to identify with — “Yes, I do like push ups”.
The updated version requires less cognitive load for the user to put together the purpose of the page.
Instead of mentally piecing the elements together (push ups, like, 64% progress, reason why), they’re already put together in a natural flow.
It also clears up what exactly the faces mean.
Does a happy face mean I really like the action?.Or that I really identify with the goal?.(This is significant when building a dislike).
On the development side, I looked into how user information should be stored.
For this project I chose Chrome’s chrome.
storage.
The fact that it is asynchronous was a bit tricky, as sometimes I’d try to grab data before it was brought back in.
For what I needed, it could be solved simply with some refactoring, although a better long-term solution would be to look into Promises.
Iterations have become smaller, but still significant.
I update the copy to be more conversational and clear.
To make it more polished, there were some final changes to make.
I added a splash page, ability to delete items, and an about page.
That’s version one of Nurture.
You can find it on the Chrome Web Store here.
A Week LaterOne evening, a week later, a friend mentioned the idea of ‘mindful eating’.
Instead of thoughtlessly consuming food, you slow down, think about, and enjoy your food.
You pay attention.
She said it can help with portion control and eating less junk food.
It’s a type of food meditation.
In a sense, it’s very much like Nurture.
You reflect on your food.
You build an appreciation for the good food.
You grow a dislike towards the unhealthy food.
Through reflection you intentionally nurture your likes and dislikes.
And that way you don’t need to force yourself to eat healthy for the rest of your life — eventually it becomes something you enjoy and do naturally.
Final TouchesAs I was putting final touches on the project I came across this quote.
“This leads to the simplest and most obvious answer to the timeless question, why don’t we do things we know we should do?.Because we don’t feel like it.
Every problem of self-control is not a problem of information or discipline or reason but, rather, of emotion.
Self-control is an emotional problem; laziness is an emotional problem; procrastination is an emotional problem … [and] emotional problems can only have emotional solutions.
” — Mark MansonIn a sense, this project is an emotional solution.
It does not try to convince you to eat your vegetables because they’re good for you — but because they feel good for you, and you like that feeling.
It doesn’t tell you to stay off social media because you’re being unproductive — but because you feel unproductive, and you hate that feeling.
It asks you to acknowledge your emotions, and nurture them into an identity that you like.
ReferencesCheema & Bagchi, 2011.
https://psycnet.
apa.
org/record/2011-04914-007.