Oomph & Adomatic

7 minute read

racv-home-square.jpg
 
 

Oomph is both a technology company as well as a creative agency. It specializes in digital publishing, and helps creators make use of the platform by having a team of in-house designers to product high-quality digital experiences.

Adomatic is an ad-tech product developed and offered by Oomph. It converts an existing ad (be in JPEG, PNG, PSD, or even PDF format) into an animated HTML5, and Google Adwords-ready bundle.

 

Quick Overview of My Roles

  • Bridged the communication gap between developers and designers by being able to explain concepts from both perspectives.

  • Responsible for creating and measuring responsive landing pages and EDMs to maximize CRO.

  • Wrote and managed HTML/CSS/Javascript on landing pages and web-based features.

  • Reduced developers’ workload by updating backend codes using Ruby and Python. 

  • Held training sessions and webinars to train new users on how to use Oomph products.

  • Wrote and managed online Oomph documentation for new and existing users.

 

The Challenge

After working with so many clients on many different projects, I had discovered patterns in our workflow that were repetitive by nature. Certain tasks within either the platform or the tools we used had a sequence that designers had to repeat every single time they performed said task.

For example, here are the steps to creating a slideshow widget:

  • Select the rectangle tool.
  • Draw a rectangle over a specific element to create a hotspot (this acts as a button to activate the widget when the user interacts with it).
  • Open up InDesign Interactive/Hyperlinks panel.
  • Click 'New Hyperlink'.
  • Type in specific code/widget identifier.
  • Check and/or uncheck extra options.
  • Click Enter.
  • Create a new blank page (or template page).
  • Open the import dialog.
  • Navigate to your image folders and select the images you want in your slideshow.
  • Click Enter.
  • Duplicate your template place.
  • Paste image into the template.
  • Rinse and repeat for every image.

When we need to get things done (especially if there's a deadline to be met), we don't usually think about the tasks we perform as long as we can get it done. But after doing the same old sequences over and over again, I wanted to find a way to reduce the amount of time spent on unnecessary tasks, so we can use that extra time for more creative and critical thinking.

I examined each of the sequences that me and the design team perform on a daily basis, and found that even a seemingly small task like the slideshow widget above can contain over 15 smaller steps. Now imagine if each of those steps took half a second to perform, over 15 steps, that becomes 7.5 seconds to create a slideshow. If we could get rid of the unnecessary steps and only keep the part where we select our relevant slideshow images, we could potentially cut the task down to just 3.5 seconds. 

Now 3.5 seconds sounds like nothing, but we don't just make one slideshow a day, we make potentially hundreds. Let's say we make an average of 50 slideshows a day, that's a saving of 200 seconds, or 3 minutes and 20 seconds. We also don't just make slideshows, there are hundreds of different tasks and widgets. Let's be conservative and say we use maybe widgets or sequences: 50 x 200 seconds = 10,000 seconds, or a saving of 2 hours 46 minutes and 40secs, PER DESIGNER.

We had a team of 7 designers, working 5 days a week. 7 x 5 x 10,000 = ~97 hours of time saved per week. How much would you have to pay a freelancer to perform 97 hours of work? Let's use a very low average of $24/hour, that's $2328 saved per week, but let's be honest, designers are getting paid much more than that.

 

The Result

Over the years I spent at Oomph, whenever I had the spare time at work or at home, I'd study how to code in order to write better scripts. I've written over hundreds of small and big scripts (albeit not all were distributed), and I think I've impacted our design team in allowing them to spent more of their time on the tasks that matter, it allowed them to do things creatively rather than being tied down too much by technology. These scripts were originally distributed internally, but my teammates found them so helpful that they began distributing to clients and other designers who use the same technology.

As a designer, I'm happy that I was able to not only design experiences that would help my users, but to also extend 'users' to my teammates and help them as well.

When we began developing Adomatic, a major news publisher came to us and requested 400 demo ads (to test whether we were able to handle the volume without dropping the quality). This initially was a nightmare, as Adomatic was still in its early stages of alpha, and required each designer to calculate and input certain parameters for every single ad. These involved finding the x and y coordinates of each element, height and width, parameters like name, ID, functionality and so on.

In the test runs, even the fastest designer took about 45 minutes to create a single ad. Over 400 ads, that's 300 man hours for a demo pitch, not to mention the stress it would've placed on the designers to meet the deadline of mere days.

Having already wrote many different scripts prior to this event, I began working on my next one. It may sound like i'm doing more coding than I am designing, but these scripting sessions only come when I finished my usual design tasks, and I do it to reduce the stress and workload on my teammates' shoulders.

The first version of the script took me maybe a day or two's work, but it was definitely worth it. It ended up saving approximately 15 minutes to half an hour on each ad. 15 minutes saved per ad, over 400 ads would equate to about a saving of 100 man hours, you do the calculations.

The team successfully created all 400 demo ads in the short deadline given, and these demos eventually lead to opportunities valued at over $950,000. The script I wrote for Adomatic were eventually given to developers, who would then use it as a base and rewrite it into an InDesign plug-in.

 

My Roles

  • Bridged the communication gap between developers and designers by being able to explain concepts from both perspectives.

  • Responsible for creating and measuring responsive landing pages and EDMs to maximize CRO.

  • Wrote and managed HTML/CSS/Javascript on landing pages and web-based features.

  • Reduced developers’ workload by updating backend codes using Ruby and Python. 

  • Held training sessions and webinars to train new users on how to use Oomph products.

  • Wrote and managed online Oomph documentation for new and existing users.