How I rolled my own explainer video, in a weekend, for under $100

Being totally boot strapped, and non funded, I have to market my web app HR Partner, on the smell of an oily rag, plus do all the marketing and other promotional tasks to keep the costs down.

I’ve been told many times that I basically have to have an ‘explainer video’ to introduce people to my app, because it is the quickest and most effective way to get people interested and signing up.

Well, I hunted around and spoke to several companies that specialises in making these explainer videos. I gave them my specifications, and received back quotes ranging from $2000 up to $6000 to make a 60 to 120 second video.

I debated going to 99designs.com or fiverr.com, but in the end, decided against it because every time I began a conversation on those platforms, I always felt that the price wasn’t as concrete as the other firms I spoke to. It was always along the lines of “Well, we have a starting price of $x, but if you need this, then it will be $y extra, and if you wanted that, it will be $z more…” etc.

So I thought I would throw caution to the wind and look at doing the video myself, over the past weekend. I started on Saturday morning.

The first thing I did was to go to Envato, where I have an account, and search on their VideoHive sub site for an Explainer video template. I found one there for around $40 which I quite liked. Then, I went across to theirAudioJungle sub site to find a background ambient music track to suit the video. Found one. Total time searching and evaluating on Envato was around 2 hours.

Next issue was that the explainer template required Adobe After Effects to modify, so I signed up for a one month subscription for JUST After Effects on the Adobe Creative Cloud — total cost, approx. $20.

I had never used After Effects before, so while the app was downloading, I viewed a couple of 30 minute introduction and tutorial videos on Youtube. It didn’t seem too hard. I figured that I had managed to self learn other Adobe products before, and with my development background, I felt confident I could get to grips with it.

Once installed, I spent the better part of Sunday afternoon tweaking and customising the AE template, and wrote up a short script. Well, I thought it was short, but it ended up being around 3 minutes long.

Then came time to do the voiceover. I hate the sound of my own voice, but luckily my wife has a really nice speaking voice (she has actually been asked to be a voiceover artist on a few occasions). So she did the voiceover for me. One take, 5 minutes, and we were done.

I guess the other good part is that I am a musician as well, so I have some fairly good quality studio equipment which ensured that the recording sounded decent. I did some post processing in Logic using compressor and reverb plugins to tidy up the audio, and mix in the backing music I had grabbed from Audio Jungle.

I managed to complete the post processing on Sunday night, and uploaded to Vimeo on Monday morning, ready to embed the video on my website, which I will do later today after I have a break.

I think I spent a total of around 10 hours of my own time over the weekend doing the editing and audio post processing. After Effects turned out to be fairly simple to learn and use in the end.

So, my total costs (approx) were:

• VideoHive explainer template — $40
• AudioJungle backing track — $20
• Adobe After Effects subscription — $20 (one month)
• Voiceover artist — $0 (thanks to wifey)
• Audio production — $0
• Template customisation — $0

GOOD BITS: Having a voice over artist ready to hand. This is an important part of a video, and I can appreciate it is difficult to find a voice that fits. I consider myself lucky. Also, the explainer templates on Envato were REALLY good. Better than I expected.

TEDIOUS BITS: Learning After Effects from scratch. But the hardest bit was syncing up the explainer animations to the voiceover. I came close, but had to do a fair bit of chop and checking on both the explainer template and the audio file to get things to line up.

No disrespect at all to the companies who charge the prices they do for the production of these videos. It is definitely a taxing process, and my efforts are going to be very amateurish compared to theirs. If I had the funding available, I would have definitely engaged one of them to do this for me, but in this case, I had to work within my means.

Final results on Vimeo here: https://vimeo.com/157981359

Dogfooding 101

dogfooding (computing - informal) - to use a product or service developed by that company so as to test it before it is made available to customers.

We have now got to the stage where we have launched our latest web app, HR Partner.  Though we have reached launch stage, there are still a few things about the development of it that I'd like to share with you.

One of the things that we deemed was important to have from the outset, was an API (Application Programming Interface) that our users could use to query their employee data in HR Partner and integrate it with other systems.  This was slated as a 'Phase 3' project, which was to be commenced well after initial launch and we had a solid base of customers on board already.

However, one of the other things that we wanted to have in HR Partner was an extremely flexible reporting system.  Basically, we wanted our users to be able to query their data and filter (and sort) the data by any database column, including custom fields that the user can create within HR Partner.

When designing the architecture of the reporting engine, we realised that it would have to be quite complex, with a ton of checks and meta programming to enable the user to specify just about any query they wanted across the main employee file, plus the related lookup files.

We realised that we would essentially be duplicating the 'engine' for the reporting side, along with the engine that would drive the API later.  So we decided, why not kill two birds with one stone here - and we temporarily shelved the reporting engine development to sit down and build version 1 of our API engine.

Version 1 was basically purely a 'read only' API engine that allowed us to query the database tables and return the results as a JSON data stream.

THEN, we went ahead and started building the front end for the reporting engine, which directly used our API engine to pull and sort the data we needed for the reports.  All transparent, and invisible to the end user.

As you can imagine, this was a major change to our development timelines, but at the end of the day, it actually saved us time later on down the track.  The bonus is that we get to see our API being used under real world stress conditions.  We still haven't released the API specs publicly, but plan to do so in the coming months once we have completed stress testing and built the read/write components.

Building the API first also allowed us to start writing other apps for integrating various legacy payroll systems to HR Partner.  One of the payroll systems we support is Attache, which is a 30 year old Windows based system that uses the old Microsoft ODBC method to extract data.  We have designed a 'gateway' Windows app which uses a combination of ODBC and JSON API to pull data from Attache and upload to HR Partner in the background.

We used the Padrino framework to build HR Partner, which is based around Ruby/Sinatra.  Padrino allows us to mount separate apps within the same server easily, so we essentially have one app for the main HR Partner app, and another separately loaded app for the API, which allows us to still host on one AWS Elastic Beanstalk instance, yet be able to separately upgrade and take apps online/offline.

I am glad we made the design decision to shift our build targets around and get the API built first.  I can appreciate now what a lot of other startups are trying to do, by building the API, then designing their app around the API.  It makes for a far more robust and solid system.

Don't hide the delete button

Welcome to part 6 of our series on designing HR Partner, our latest web app that is slated for release in 2016.

This episode, I'd like to go through a design consideration that I had with the file upload library module in our app.  In this module, the user can create 'categories' for their files, and upload an unlimited number of files to that category.

They also have the option to delete a category if it is not needed any more.  The problem is, we won't allow them to delete while they still have files allocated to that category.

The question was how do we deal with this restriction?  On our early Alpha version, we simply hid the delete button if there were still files within the category.  However, this gave the user no indication that they COULD delete the category, at least unless the category was already empty, in which case they would see the button.

We thought that this was counter intuitive.  We wanted the give the user an indication that they could delete, as long as they deleted the files first.

So in the second iteration, we put the delete button back, but disabled it when there were active files in the category.  This still wasn't optimal, because there was no explanation as to WHY the button was disabled.

So we went to the next level, and made the button active.  If the user presses it while there are still active files, they will get a popup telling them why they cannot yet delete.  If there are no active files, then they will see the usual delete confirmation dialog.

We hope that this method means we don't clutter the interface with too much extra text, yet still gives the user an idea of what they can and cannot do within a particular screen.

When your hard work becomes invisible

In my latest project, I have been working very hard on getting the UX right.  I want the interface of my web app to NOT fight the user every step of the way, and to make some semi-intelligent guesses as to what they want to do.  Wherever part of the interface looks clickable, I want the user to be able to click on it and get the result they expected.

That sort of precognition takes hard work - LOTS of hard work.  Just today I spent pretty much ALL day on one small piece of functionality, that at the end of the day, my users will probably never really notice.

Come to think of it, *I* pretty much don't notice it now that it is finished, but I know it is there, and it is making my movements through my web app a lot smoother and logical.  

Just this evening I was thinking about it, and I was a little sad that all my work was essentially invisible to the end user - after all, they only usually notice things when they DON'T work.

But I was reassured by something a wise man once told me - "Character is what you do when no one is watching".  I like to think that my app has good character.