We went and built an image duotoner

This is the first in our “We Went and Built a…” series where we describe a micro-product the AWeber design team built, why we built it, how we got it done and what we learned from the project. We’ve got a ton of digital tools and toys out in the wild, so expect more of these profiles.

Our email designer Kimberly Robbins recently created an email template that featured duotone placeholder images (and looked totally 🏄 💌 💯). In a fit of empathy for the people who use AWeber, Kim recognized that the vast majority of them wouldn’t have the ability to make similar images. She suggested we make a tool to help them do just that.

Then we did it.

How did we build it?

With Kim’s idea in hand, the two of us invaded in a conference room, fired up Codepen (bless you, Chris Coyier) and time-boxed ourselves to an hour to accomplish 2 things: Designing the UI and building the thing.

Designing the UI.

Our design philosophy for the tool was drop-dead simplicity, so we boiled down the process to 3 steps.

  1. Selecting an image.
  2. Choosing a color.
  3. Download the filtered image.

We quickly wire-framed a UI on a whiteboard that gave us a good idea of what the MVP would look like and started working on building the interactions.

Figure out how to make it work.

For anyone who took the time to look at the js panel in the pen above, it’ll be obvious that I’m not a developer. When I start a new project my mind is essentially a javascript tabula rasa, but this time around I somehow recollected that I could use canvas to do everything I needed to here. With the help of a couple really great libraries (Spectrum for the color-picker and FileSaver to handle the download) I had the core MVP functioning by the time we left the room.

The basic gist of the way the app works is as follows:

  1. A user adds an image via the drag and drop or file input.
  2. The canvas element is cleared to make sure we have a fresh canvas for our image.
  3. Dimensions of the canvas are set based on the selected image.
  4. The canvas is filled with the color a user selected.
  5. Grayscale and contrast filters are applied to the canvas.
  6. The canvas’s blend mode is set to multiply using globalCompositeOperation.
  7. The new image is drawn to the canvas, with the filters and blend-mode applied.

A True MVP

At the point in we had a MVP in our hands. It did cool things, but it had some pretty substantial bugs like:

  • You had to completely start over if you wanted to tweak or change the color you picked.
  • You couldn’t adjust any aspects of the filter (contrast, blend-mode, etc.).
  • The color picker was seriously limited.
  • And, oh yeah, the filters only half work in Safari or Edge.

Like I said, it had bugs, but it also did generally what it was supposed to do for the people who we would initially be sharing it with. And it felt pretty good to do it.

It had bugs, but it also did generally what it was supposed to do… and it felt pretty good to do it.

Most important to our confidence in rolling out the MVP was a commitment we made to each other to actually listen for feedback, and quickly add features and address bugs.

So, How’d the rollout go?

Our specific rollout plan? Kim kind of just tweeted it.

Given our laissez faire approach to release, the response was really uplifting, with all sorts of #emailgeeks we respect the heck out of checking out the tool, liking and retweeting.

Kevin Mandeville and Jason Rodriguez gave us a shout out on their radical email design podcast.

In what was probably the most exciting part of the project so far, the fine folks at Really Good Emails gave us our first feature request.

They asked for the addition of the ability to select color by hex code. This was a super easy add thanks to Spectrum and in about 5 minutes of work (and only took me that long because I was eating an ice pop at the time, so my attention divided) we had our first user requested feature in the app!

“Heck yes!” we can add a custom hex code

After that initial feature implementation the Really Good Emails crew had more great ideas, like asking to have more control over the blend mode applied to the image since applying multiply across the board lead to some lame looking images. In about a half our, we had our second user requested feature in the app.

What did we learn?

We learned a bunch of technical lessons from this project around using canvas and working with neat libraries, but the most impactful learning for me was perspective on the idea of what makes a successful MVP.

Often times, I let scope creep get way out of control in an effort to release a perfect product that completely solves every possible user’s problem. Although this probably comes from a noble place, it has some pretty nasty effects.

First, it keeps me from releasing things. I can’t tell you how many timelines have been blown out (and how many personal projects I haven’t ever released) because I was trying to get to a perfect solution instead of focusing on solving the initial problem I sought to solve as simply as possible.

Second, it keeps me from iterating on things. I generally stop working on a project after release because either I’m so burnt out on it from a blown out timeline (see point above) or because I’ve made something so complex that it’s difficult to iterate. In this project, we kept the scope so tight and focused that it was incredibly easy to listen to user feedback and not only fix bugs, but also add new features.

One last thing this project reinforced for us was that we could actually build things. Even though my code is terrible and Kim had never built anything close to this in the past, we managed to get it done. If you find a problem you care to solve, a solution that is tight and focused, and other people who care to collaborate with, you really can make a difference.

If you find a problem you care to solve, a solution that is tight and focused, and other people who care to collaborate with, you really can make a difference.

If you end up playing with the duotoner and have any feature requests, send them our way. If you’re looking for the best email marketing tool ever, check the heck out of AWeber. And if you liked this article or resonated with it, comment or share whydoncha?

Made by Kim and Chris from AWeber