How To Build an Add-on Step 3: Write Code

Normally we start our designs in Balsalmiq but sometimes it makes more sense just to scribble on some sticky notes and start building. This is one of those times. The big effort here was figuring out the workflows and deciding what not to do.

With some knowledge of Harvest’s API and some stickies, we were able to determine that it was likely possible to “attach a contract to an estimate” as our focus group had suggested. This would involve:

  • Pulling an estimate from Harvest into Inkdit
  • Formatting the estimate for use in Inkdit
  • Inserting the estimate into a boilerplate in Inkdit AND/OR creating the estimate as it’s own document in Inkdit
  • Updating the Harvest estimate once it is accepted or rejected

We could also streamline the process a little by pulling client contact information into Inkdit after the user had authorized us to access their Harvest account.

Knowing these were possible didn’t make it very easy to understand the actual flow. The easiest way to do that was simply to take a stab at it. In doing that, we quickly found out that one key piece – accessing an estimate through Harvest’s API – was missing. The obvious alternative was lame. Users would have to create an estimate in Harvest, and then have to remember to leave Harvest and log in to Inkdit. Nobody would do that. We had to make it so that the Inkdit Add-on showed up when people needed it …on the Harvest estimate page.

We were deflated.

Then we had an idea.

A few weeks before, we had created a Chrome extension on a whim because Will Critchlow made it sound easy.

“You know how Buffer adds their button to all the pages where you Tweet? Could we do that, and put our button on the Harvest estimate page?”

This slideshow requires JavaScript.

The Chrome extension that we had already written would be a perfect way to make that happen. We were elated!

The next hurdle that arose was whether to bring the estimates into Inkdit as standalone documents or as part of a boilerplate (i.e. a Schedule of a Master Services Agreement). While it is technically possible to do the latter, it was apparent that it will be a significant amount more work to build, explain, and support it. The old 80/20 rule kicked in. We decided to put a hold on that piece and wait for customers to demand it (so if that is a feature you really want, let us know!!). In the meantime we’ve put together a pretty slick integration.

Now all we had to do is create a nice landing page for our traffic from Harvest’s Add-ons page. From our discussion with users, the motivating factor seemed to be fear (elaborate) and the sexy call to action appeared to be the ability to attach a contract to an estimate. We wrote up some copy for the landing page.

Here was our first draft.

initial draft of our Harvest Add-on Landing page

 

After reading up on how to do copywriting on CopyHackers’s blog, we made some changes to make the value proposition clearer. You can see the finished landing page here and from our our fancy new Add-ons page.

Up next, How To Build an Add-on Step 4: Measure