13 Dec 2011
We've been working on Decal for a while and it's up to the point now where we're able to deploy websites quickly and cost effectively for our clients.
The goal is that it should eventually become a hosted content management platform for designers. Although it's a way off completion to that standard, we do have a functional prototype of the deployment model and we'd like to share that with you and get your early opinions.
NB: Whilst the signup process works in any browser, the editor interface requires Firefox. Click here to see why
Step 1: Download the sample file (it's just one HTML file)
Step 2: If you're closest to the US, create an account here, if you're closest to Australia, create an account here
Step 3: Click on "Add Site" and type the name "4 minutes" then choose to upload the ZIP file you downloaded in Step 1
Step 4: While the site is "preparing" take a look in the ZIP - notice the attributes "area", "component", "tags" and "editable" - these control how the interface works. Also note that some components have an id attribute and are "fixed" (you'll see what this means shortly)
Step 5: Once the site is finished preparing, click the "Launch" button to try the editor out. If you'd like more info on how to use the interface, there are instructional videos available here.
We'd love to hear your feedback. Please email email@example.com to let us know what you think!
7 Sep 2011
In this post we discuss several useful online tools for performing tests on your website copy before starting the design process. We use Decal Mockups to create "content first" wireframes. If you'd like to know more please enter your email at the bottom of this post.
Prelude to a test
I've also been doing a lot of reading of blogs and listening to interviews on Mixergy and it seems that the one thing that distinguishes successful marketers and business people is testing (In particular, check out the interviews with Chad Mureta, Zack Linford and Juan Martitegui).
We are relaunching this website so we'd gone through the process of creating our "content first" wireframe using Decal Mockups.
It was around this time that I came across this blog post discussing how, when choosing a web designer you should look for words on their website like "Business Objectives" and "Return on Investment". This paragraph in particular left me a little crestfallen:
Put a cross in the Bad column every time you see a term like "branding", "beautiful", "passion", "making a difference", "modern", "clean", or any other puff word that doesn't convey a clear benefit to you.
D Bnonn Tennant
Guess what? All the copy in the mockup I'd just spent the last couple of weeks creating looked almost exactly like that.
But rather than just take his word as gospel, it occurred to me I should somehow test to see which style of copy writing was more effective.
All the testing I've seen discussed in these blog articles refers to A/B testing using services like Optimizely on a website that's already deployed, through Pay Per Click campaigns.
We simply don't have the resources to do an entire redesign of both our copy and our visual/graphic design and layout for each test like 37 signals does.
We somehow needed to be able to test our website copy before we even started our visual design process.
Deciding what to test
Whilst the structure and exact content is something that we'll test once we've deployed, establishing our "voice" prior to engaging in the design process seems appropriate as that's the component of the copy that will have the biggest effect on which overall design direction we take.
I came up with the following 3 voices that I wanted to test and produced different versions of my original mockup for each:
UPDATE: So that search engines don't go on indexing these forever I've replaced the links below with screen shots and added a 301 redirect into the original sites. Incidentally check out http://www.paulhammond.org/webkit2png/ for doing full length screenshots.
- The hard hitting business voice http://voice1.mockups.decalcms.com/
- The fun and quirky voice http://voice2.mockups.decalcms.com/
- The marketing and branding voice (the one I had written initially) http://voice3.mockups.decalcms.com/
Deciding how to test
I then went and looked for services that allow you to get feedback on your website without having launched something, and without using traditional advertising.
I settled on the following 4 services, each of which will be reviewed in detail below:
- Pick Fu: this service is based on Mechanical Turk but provides a framework for getting feedback on any question in an "A/B" fashion (ie. which logo do you like best?), and the promise of "$5.00 for 50 opinions" up the top of the page was just too good to pass up!
- Domain Polish: a website created by Dan Shipper which provides a framework for getting feedback on your website based on Amazon's Mechanical Turk
- Feedback Army: the value proposition here was pretty similar to Domain Polish but "higher volume"
- Feedback Roulette: this site uses a really interesting and heavily "gamified" model to drive a community of reviewers
What follows is a detailed account of how I used each of these services to try and "A/B test" my web copy.
PickFu: A/B test anything
Pick Fu is brilliant. Although I realise that it's not "technically" A/B testing because you're not randomising who sees what, you're not measuring "engagement" so much as just asking a question and there's no statistics or mathematical principles underlying the calculation of the results (like confidence intervals and what have you), this site is absolutely fantastic for just getting feedback from a very diverse range of people on absolutely any question.
There was one little limitation, though: since I'm actually trying to test the effectiveness of three different variations of my copy writing, I couldn't cram it all into one test.
I decided to run three separate tests:
You can view those links to see the real results and how each voice stacked up.
Fortunately, the cost is really low, especially if you go for one of the higher plans. I paid just $17 for 200 responses on each combination, so $54 for a total of 600 responses.
The signup process is very simple - you don't need to "create an account", just enter your email and pay via PayPal, too easy. I was setup in a matter of minutes.
As for the structure of the tests, I simply linked to each of the "voice websites" and posed the following question:
Which of these two websites has the most compelling copywriting? (ignoring the design)
Pick Fu tallies the results for you, as well as providing a breakdown of responses by age, income, level of education, gender and race of the respondents.
The best thing about using Pick Fu was getting some conclusive and useful results! Not only could I see that the "business voice" (Voice 1) won in each case but each respondent also gives a quick reason for their response and reading through them has actually yielded actionable, valuable insights for improving the copy and the information architecture of the site.
Really I have absolutely nothing bad to say about Pick Fu and I highly recommend you start testing everything with it from your hair style to your blog headlines (hint: I tested the headline for this article too!).
Domain Polish uses Mechanical Turk for reviews, but the idea is that these have been heavily vetted and preened for quality (mostly focused on better English skills as far as I can see).
The majority of respondents were from the USA and even those that weren't had good English.
When you sign up there are some sample questions to get you started and these were useful - I actually ended up basing my questions for Feedback Roulette and Feedback Army on the initial sample questions provided by Domain Polish.
I settled on the following questions for Domain Polish:
- What is your age?
- What is your gender?
- If you wanted to get a website online for your business does the copy on this site make you feel comfortable that we'd be able to deliver?
- Does the copy on this site make you want to do business with us? (ignoring the design)
- Do you think that the information on this site is organised such that you are able to find out what you need in order to make a purchasing decision?
- Once you have made a purchasing decision is it clear how to act and what will happen when you do?
- What country are you from?
- Have you ever built a website before yourself?
- Have you ever paid someone else to build a website on your behalf?
I think I made the mistake of not emphasising the "ignore the design and focus on the copy" angle enough, because I got some decidedly negative sentiments in return.
It almost seemed to me that some of the Domain Polish reviewers were used to a higher calibre of site and felt a bit offended by my shitty design.
All in all, the downfall of Domain Polish for this purpose was the cost per review. The cost at the time of writing is $20 for 7 reviews, and because I have 3 URLs that I want to have reviewed that means I paid $60 for 21 reviews total.
Given the fact that the volumes are so low, this is less like "A/B testing" and not particularly well suited to the task of getting a feel for what type of voice to use on the site.
I got about 50% positive and negative reviews and couldn't really conclude anything useful from the results.
As the name suggests, I think that Domain Polish will be useful at the finishing stages of our design process when we have settled on a design - in particular helping us to improve things like information architecture and the "sales funnel" of the site.
Aside from a couple of minor bugs in the review management interface, the experience with Domain Polish was a positive one and Dan Shipper was very helpful and attentive. I'll be heading back to give this site another try at a different stage of our design process.
Feedback Army is basically the same premise as Domain Polish but without the "vetting" of respondents, so you get a higher volume of reviews for less money.
I submitted each "voice" as a separate survey with the same questions, and paid $55 for 50 reviews of each.
I basically asked the same set of questions on Feedback Army as I did on Domain Polish although I left out the gender, age and location:
Whilst this is far more expensive than Pick Fu, it's considerably cheaper "per review" than either Domain Polish or Feedback Roulette. I wasn't really expecting quality to go with my quantity, but I was pleasantely surprised!
The first few responses I got on each survey were quite thoughtful and although when all was said and done there were plenty of crappy responses, there were also some real gems.
There was one obvious challenge here: the results were so unstructured that there was no clear way to gain "immediate insight" into them. Whilst I could read through every comment and note down any usable insights in a spreadsheet, I couldn't get a "50,000 foot view" of how people had reacted to each of the different voices.
Fortunately, I'm a programmer so I was able to write some code which allowed me to copy and paste all the response and then analyse them.
I wanted to analyse the following things:
- Yes or no answers to each question
- Positive, negative or neutral sentiment in the responses (ie. did they say "no" or did they say "no I was really confused and frustrated")
- Whether they got the point of the exercise (ie. that they were supposed to be reviewing the copy and not the design)
I first created a database structure to hold the information and then a script to loop through the raw data and attempt to split the responses up into individual questions.
I then created a web interface that allows me to do the following:
- Correct poorly formatted responses
- Set the sentiments for each response (ie. id they just say "Yes" or did they say "Yes! A thousand times yes!!"
- Set whether each question response was "yes" or "no"
- Set whether or not each respondent "got the point" (ie. that they were supposed to be focusing on content and not design)
Whilst this sounds like an overwhelmingly laborious task it only took a few hours to do and it gave me a chance to read each and every response carefully, copying and pasting anything useful into a spreadsheet I was using to take notes.
After feeding all this information into the Feedback-O-Matic and watching all the lights blink and the tapes whirr around, here are the results!
As you can see, the "business voice" not only produced more responses in the affirmative to each of the questions, but also produced fewer negative sentiments and more positive sentiments than either of the other two voices by a clear margin.
Since the code to analyse Feedback Army responses might well be useful to others treading the content review path (or using Feedback Army for just about anything else) I've put it on Git Hub for everyone to share and enjoy.
Feedback Roulette Feedback Roulette has a really interesting, heavily gamified model for driving a community of reviewers. The premise is quite simple: it's Chat Roulette for getting feedback on your website.
However the system of incentives and monetisation they've come up with is really interesting. Here's how it works:
- In order to get your website reviewed, you need to have Feedback Points
- You can earn Feedback Points by reviewing other people's websites
- In order to make sure you write good reviews, your reviews are rated by the reviewee from 1 to 5 stars. You receive a maximum of 1 point per review, but if your review is rated fewer than 5 stars you only receive a fraction of a point.
- If you don't have time to go and write a bunch of reviews, you can buy Premium Feedback Points, BUT ...
- Since the site would be utterly worthless if everyone just bought feedback points, they've designed it so that you build up your "reputation" and "trust level" by writing good reviews and helping resolve public disputes. If you have a high reputation, then when you submit a website for review, your reviewers will have high reputations, ensuring that those who put in the effort are rewarded.
In order to conduct my test, I submitted each of my "voices" as a separate website, and enabled "throttling" in the FBR preferences, ensuring that each would only get a maximum of 5 reviews. I then included these notes for reviewers indicating the purpose of the exercise and asking some specific questions.
It's a really solid model, and Feedback Roulette is a great product, but for this particular purpose it fell down in some key ways.
First of all, reviewing sites so that you get 5 star ratings takes a really long time. You have to spend about 45 minutes to write a really good review, and then you feel pretty annoyed if the reviewee only gives you 4 stars and you don't get your full feedback point afterwards!
Secondly, if you want to buy your Premium Feedback Points they're really expensive compared with the higher volume feedback options based on Mechanical Turk. The price for Premium FPs fluctuates according to market demand but when I was testing they were running about USD$8.00 per point.
If you're looking for "quick and easy" testing for some copy ideas on your website, this is not it.
I think I spent between 10 and 15 hours all told reviewing websites and public disputes to build up 17 review points (although my reputation and trust level were also very high at that point).
Thirdly, the volume of reviewers on the site is still really low (this could be due to the fact that my reputation was high so I was only exposed to those with high reputations).
At the time of writing this, I've had my 3 "voices" on there for about a week now, and I've only received 4 reviews total.
I think that Feedback Roulette will be better suited for getting more detailed feedback on the site once it's nearer to completion.
They've got a pretty serious chicken and egg issue over there, but it's a great system and the higher the site's usage the better the experience will be for everyone (like Yum Cha!).
So what are you waiting for?! Go and give some Feedback!
Having copy written before starting your design process is one thing, but having multiple versions of your copy written and tested by a large indiscriminate audience is just fantastic.
Even in our very early stage visual mockups I can see just how this exercise has given us new direction in design and I think you can expect to see great things in Part II of the post when we launch our new site!
The reason I'm undertaking this exercise to begin with is because we're redesigning and re-launching our site. Subscribe via email using the form below, via RSS, follow Working Software on Twitter, or become a fan of Working Software on Facebook, to get notified when I follow up with Part II once the design process is finalised and our new site is launched!
Lastly, please fill in the form below if you'd be interested in using Decal Mockups to create multiple versions of your web copy to help with pre-launch A/B testing as described in this post:
If you've read this far, you should definitely follow Working Software on Twitter, become a fan of Working Software on Facebook, subscribe via email using the form above, subscribe via RSS and share the love using the social icons above.
If you subscribe via Email you'll also be informed when I follow up with a post once we actually launch the new site.
If you liked this post, you'd probably also like to read What I've learned about making product videos (that don't totally suck).
This entry was posted on Wednesday, September 7th, 2011 at 11:08 am and is filed under design, marketing, doing business outside the bubble, testing, multi-variate testing, split testing, testing your website, testing website copy before launch, ab testing website, ab testing content, content precedes design, author iain dooley, ab testing, pre launch, designs, testings |
You can follow any responses to this entry through the RSS 2.0 feed.
25 Jul 2011
This post is syndicated at Bob Walsh's excellent startup advice blog http://47hats.com/ - thanks Bob!
Over the past year, I've done a bit of work producing videos and in my last post I discussed the importance video has played thus far in marketing, support and training people how to use Decal.
With the launch of our flagship public beta product Decal Mockups recently, I produced quite a lot of video for both marketing and training purposes and felt as though I'd really had the chance to hone my craft, especially when reflecting on my first attempt last year.
I'm by no means an expert, but I feel as though I've got a few simple strategies for producing video very inexpensively for your products that doesn't totally suck.
I'm also very keen to share my experiences, thoughts and methods in the hopes that someone out there will give me some ideas on how my methods could be improved.
My tools of choice are:
- Macbook Pro 13" (I just use the in-built microphone for recording audio - I'll discuss how I've been able to make this sound better)
- Wistia video hosting for business (gotta love the stats!)
The two primary purposes of product video
In my experience there are two primary purposes for product videos: marketing and training. My production strategies for each are slightly different.
When I talk about marketing videos I'm talking about the video that people see when they land on your home page - the one that's supposed to get them interested enough in your proposition that they follow some call to action (eg. signing up to use your product).
These are the ones that take me the longest to make and they require the most planning, ironically because they have to be the shortest.
I wouldn't personally create a product marketing video longer than 1 minute and the shorter you can get it the better (Wistia's home page intro video is only 30 seconds long).
If your video includes a piece to camera or interview I'd say that you can go (a bit) longer in some cases, however looking good on camera is really hard and screencasts are immeasurably easier and cheaper to produce.
Step 1: The message
When you are releasing a product, your natural inclination is to make a product video that demonstrates the features of the product.
This is because you're very proud of the features - you have spent a while working on them and you think they're totally ground breaking.
But features are totally boring to watch and your features are not your message (disclaimer: to a certain extent, this depends on your audience - but I'd say the cases where a feature heavy marketing video makes sense are the exception).
If you take a look at the very first video I made last year for Decal you can see what I mean about "feature focus" - it has absolutely no message whatsoever and is completely and utterly uninspiring:
I recently watched (and blogged about) a TED talk by Simon Sinek entitled "How Great Leaders Inspire Action" which says that "People don't buy what you do, they buy why you do it", but also states that people will buy your product for themselves, not for you.
So it's not enough to ask why you're making this video - you have to ask why your audience is watching it, why they'll keep watching it and why they're going to do what you want them to do at the end (ie. sign up to use your product).
At the beginning of this year I had just begun to get an idea about marketing message and produced 5 separate videos for the Decal CMS home page which were designed to appeal to different audiences.
I'd started to scratch the surface of what it meant to be talking to my audience, taking the focus off features and trying to deliver a message which would appeal to people's emotions and you can see one of those videos below - however it's still far too long and had too much of a feature focus:
I think it's interesting to look at the progression to my latest offering for our Decal Mockups launch:
Apart from some technical improvements (which I'll cover later) the single biggest difference is that I've taken the focus completely off the product features and come out with a strong message that makes a very bold statement about how this product will benefit my audience.
Your message should focus on this: how is your product going to save people time or money, or help them get laid.
Now here's a little secret: it's really hard to do!
I guarantee if you're not a seasoned sales and marketing veteran, this will feel wrong at first - because it is.
The first 2 videos I made above were pussy footing around the issue. The very first one simply presented my product and let people reach their own conclusions. The second focuses more on benefits to the viewer but the benefits are convoluted and probably only relevant to someone who's had a specific experience with another provider.
The third video says in plain English that Decal Mockups saves you money and makes your job easier - and it felt like a lie. Not an out and out lie, but a bit of a lie.
However you're trying to fit your message into a space that is so compacted, that if you don't make a bold statement people will instantly tune out and stop paying attention.
So even though what you want to say is "This product will make your life easier once you've learned how to use it, and if you use it in a particular way then you could even save money by using it!", what you have to say is "This product will make your life easier and save you money" without all the qualifying excuses.
Now I'm going to let you in on another little secret: no-one cares.
I was really nervous when I put that video out there - I emailed everyone I knew (only about 300 people) and I was an absolute wreck. I felt grimy and dirty as if I had told the world's biggest lie and everyone would soon turn up at my door with pitchforks.
You know what actually happened? People signed up to use the product.
Here is a quick breakdown of the stats:
- 81% of people who landed on the page watched the video
- Those that clicked play watched on average 63% of the video
- Of those that clicked play, 23% signed up to use the product
- 19% of all people who came to the page signed up to use the product
Even for a free product, that is a phenomenal conversion rate. You know how many people I got complaining that I was taking liberties in saying the product would save time, money and make their life easier? Zero.
There are, of course, laws governing false advertising and I'm not advocating completely falsifying information but if the choice is between your waffly line of conditional, qualified excuses leading up to a statement of what benefits someone might be able to achieve in certain use cases, or just stating up front the benefits of the product in the first 10 seconds of the video, then you should definitely choose the latter.
Step 2: The Script
Now that you've decided on your message, it's time to write your script. Start by writing your message in such a way that you can deliver it in 10 - 15 seconds.
It's a good idea to state what your product actually is before you start talking about the benefits, otherwise the experience for the viewer is disorientating - but the combination of what your product does and how it "gets people laid" shouldn't take more than 15 seconds to say.
From that starting point, you then need to reinforce your message, focusing on key points of difference and justifying your bold statement with a couple of facts about your product.
The most important thing is: don't agonise over the script too much before you've recorded it and listened to it.
Don't think of a "script iteration" as writing, or even writing then speaking - think of a complete script iteration as writing, recording and then listening back. Don't worry about the sound quality of your recording just yet, either.
Once you're at least 75% happy with the script (not 100% happy, remember that folks: don't get hung up on your "perfect script" yet), move onto the story boards.
Step 3: The Storyboard
I prefer to use index cards for my story boarding rather than a whiteboard because it's easier to re-order the "shots" and sections of your script.
I have the shot list on one side and sections of the script on the other, and I can re-order and reposition chunks of text next to "shots".
The image to the left is the "story board" I used for the 2nd in the series of videos shown above.
When deciding what "shots" to use, try using your product whilst listening to the recording of your initial script draft and see what fits well.
You can then add a visual or textual reminder for that shot to an index card and stick it next to that piece of the script.
When considering what shots you'll have, you want to have a good balance of things that move and things that don't.
If there's one thing that can really ruin your message and be totally distracting, it's having constant talking in conjunction with constant movement.
Go back and look at the Decal Mockups video above and see how little movement there is on the screen - especially where the spoken information is at it's most dense.
The most movement occurs when I'm talking about the "real browsable website" and the only movement occurring is web browsing which reinforces the voice over.
Also don't underestimate the value of just printing words to the screen that are key words in the sentences of the voice over.
Once you're 75% happy with your story board, (that's right folks, don't wait until you're 100% happy), it's time to do some actual screen capturing
Step 4: Screen capture and editing
Fire up ScreenFlow and capture each of your shots. Move the mouse slowly and deliberately. It's very easy to edit out pauses and speed video up, but very tedious to edit out unnecessary mouse movements so the smoother and more accurate your mouse movements are in your initial recordings the more time you'll save during editing.
Once you've got each of your shots, it's time to edit them to fit in with your script. If you haven't already, get a good reading of your script recorded.
The timing should be reasonably good - speak slowly and clearly (in fact you should speak so slowly that it feels a little bit weird). Edit out any obvious mistakes but don't worry about sound quality, or editing out breathing or other noises - this is not your final recording.
Now edit your video down to fit in with your script. This is truly the most mind numbingly tedious part of the process. Try as much as possible to edit out unnecessary mouse movements in the screen casts and avoid using any transitions other than cross dissolve - you'll be tempted to use one of the many other featured effects in ScreenFlow but they all suck.
I'd love to give you some ScreenFlow tips that will teach you to be a ninja at it but I'm a total hack. I just use images and text boxes to create my "graphics" - zooming to give them a bit of movement. The rest is simply screencasts.
There are a bunch of really awesome ScreenFlow tutorials around on the interwebz though so it's probably worth boning up a bit on your techniques. I didn't do this, and it took me 18 hours to produce the 60 seconds of video for the Decal Mockups - and about 70% of that time was spent editing or producing graphics.
I'm sure if you put some time into learning about some more advanced tips and techniques for using ScreenFlow you'll live a longer and more prosperous life than I.
Remember: you don't want to have things moving on the screen when you're expecting people to be listening carefully to your words. This is really important - having too much happening at once is suprisingly confusing and they'll either not listen to the words because they're trying to see your product or they'll miss your product shots altogether.
Don't move onto the next step until you're 100% happy - if necessary go back and modify your story boards and/or script and re-record it.
Step 5: The Final Voice Over and Edit
I've got a problem that you can hear in the 2nd video in the series above: my office is very big and echoey. I also live right next to a main road where lots of loud trucks, motorcycles and people with sports exhausts torment me.
This is particularly troublesome because I'm only using the in-built microphone on my laptop and I don't have any sound mastering software or skills.
However, the voiceover in the Decal Mockups video doesn't suffer from any of these problems. The secret? I record it whilst sitting in a closet. It's a very small closet and it has lots of coats in it. The result is much clearer, don't you think?
So, go and sit in your closet and record your script. You should record this speaking ever so slightly faster than the voice over you were editing your video to initially - but still slower than you would normally talk if you were having a conversation with someone (one always has a propensity to speak too quickly when recording voice over).
Do as many takes as you need to get each bit right and just leave ScreenFlow running whilst you do it. Try to do your takes in "chunks" and leave a gap when you stuff up - it can be hard to edit a good take out from 2 mistakes either side if your words or sounds are "rolling into each other".
Once you've got this done, go back to your desk, stretch your legs and edit the final voice over to suit the video. Make sure you get rid of any "lip smacking" or breathing noises. You'll find that, since you read just a little bit faster, you have some "space" now and during this final edit you may be able to cut the overall length of the video.
It's important to leave some gaps in talking though - this gives the viewer a chance to focus on what's on the screen, and also gives their brain some time to process what you're saying and what they're seeing.
Step 6: The sound track
This is kind of the fun part. You should produce a few different variations and test them on people you know. For the Decal Mockups video, I started off with this, which is me playing the Mbira:
I wanted to give an air of "magical wonder and simplicity" - reminiscent of a Hayao Miyazaki forest creature. However when I played it to a few people they found they were so distracted trying to figure out what that sound was, that they found it really hard to concentrate on the video.
I knew I had to go with something more familiar so guitar seemed like the obvious choice, but I still wanted something a bit different so I found this Gypsy Jazz version of All of Me played by Adrian Holovaty (co-incidentally, the author of the Django web framework!) on YouTube:
This was a dramatic improvement, however a few people I played it to said they found the melody line a bit distracting - also we obviously didn't have the right to actually use it!
Luckily for me, Campbell McGuiness (one of the Working Software team) is a musician so he recorded a version of one of his songs minus any melody lines and I re-edited it to fit in with the video and that's the final cut that we ended up publishing.
That about does it for marketing videos!
Training videos are kind of easier. Firstly, the constraints aren't quite so strong - if someone is watching your training video, chances are they're already using and therefore at least a little bit invested in your product.
You can see examples of the training videos I've made for Decal here:
When I want to do a training video I write a few index cards of what I want to teach, then I record each of those in turn and edit them together, getting rid of unnecessary mouse movements, loading times and using cross fades for transitions between points.
I then simply watch the video, and type a "narration" of what I'm seeing on the screen. I do a rough recording of this "script" and edit it down to the video.
I iterate like that as required until I'm happy then I go and sit in the closet to do my voice over and come back and edit the real V.O down to the video.
The other big difference in a training video is that obviously you're basically just showing the product the whole time so there probably won't be any "graphics". I also find it's more acceptable to have a bit more movement on the screen whilst you're talking (not too much) so long as what the viewer is seeing is being reinforced directly by what they're hearing.
There are 2 guidelines I use to make the videos more watchable:
- Use zooming and panning sparingly - it can make people nauseous but is also a really effective tool for focusing people's attention on one part of the screen (sort of like a "pointer") - especially if you want to show a lot of detail in a smaller video resolution
- State the length of the video and it's purpose at the very beginning of the video and put the key words on the screen as you say them. This orientates the viewer and prepares them mentally for what they're about to see
That's about it for training videos. They're far less involved, in my experience thus far, than marketing videos.
Remember: video converts!
Creating video is hard and tedious. It takes a really really long time, but hopefully some of these tips can help you make a better product video in less time than the year it's taken me to get to something I find acceptable.
However just remember: video converts! It's really worthwhile taking the time to do videos and improve your skills because you'll get more customers.
So stay motivated - I know it's really hard (and I'm totally guilty of cutting corners here and there) but keep slogging it out.
The other piece of parting advice I'll give you to is to avoid being a perfectionist. You can look at all my marketing and instruction videos I bet and find not only obvious flaws but flaws I've advised against specifically in this article.
There are only so many hours in the day and in the final analysis you're going to be far more aware of the flaws in your video than anyone else ever will be, so try not to get trapped in some vortex of perfection.
If you've read this far, you should definitely Subscribe to the Decal CMS blog via email below, or via RSS by clicking here, follow Working Software on Twitter and become a fan of Working Software on Facebook
31 Mar 2011
TL;DR: Decal is still in private beta. If you want to know when we have a live demo available, you can add your email address here. You can also follow @workingsoftware on Twitter and become a fan of the Working Software page on Facebook.
A little while ago I did a post on the Working Software blog about doing business without "doing a startup" and this post on swombat.com claimed the story lacked context. Hopefully this post will provide some context and practical advice for anyone trying to navigate the hectic world of software product development and release.
Working Software has been around since early 2005 providing primarily web application development services.
In December of 2009, Having just spent 2 years working on a very well funded and technically fantastic project that went nowhere because of a lacklustre sales strategy, I was very keen to see if we could manage to take the internal CMS we used to deploy websites, and turn it into a Real Product(TM) under our own steam.
I had around $20,000 in the bank and some client work lined up that would allow us to focus primarily on creating the most exceptional product we could without having to take on any "non-Decal" client work.
The goal was to launch a product which designers and developers could use to deploy sophisticated database driven websites by simply applying a couple of attributes to their HTML files and uploading them via FTP (this is still our goal, by the way, it's just going to take us a little while to get there!).
The Working Software team consists of 3 people and the business was (and still is) the primary source of income for all 3 of us (including my pregnant partner, so that's more like 5.5 people :), so we had to make sure that we were only taking on work that would actually advance the cause of Decal whilst still giving us enough money to live on.
Having pulled out all the stops, put in all available resources and money and backup funds, maxed out the credit card and taken out an "informal loan" from the Australian Tax Office (read: I was really really behind in my BAS payments), by June, 2010 we were just about stone cold broke.
The work we were doing was nowhere near as profitable as the normal "consulting" type of work we do since the market we're really targeting with Decal is at the lower end of the "website" spectrum dominated by folks slinging wordpress themes for a couple of hundred bucks.
Despite our most valiant efforts and some very promising progress, Decal still wasn't the product we wanted it to be. What I want to share with you here are the strategies and philosophies that have kept us afloat and allowed us to continue building (and shipping!) Decal to this day.
What can I sell today?
We've been selling and shipping Decal constantly for years. In fact I deployed the very first (and very embarrassing) version of my "Richie Rich: the poor little rich text editor" DOM editor way back in 2006. Since then we'd been shipping Decal in some form, but more particularly we'd been shipping Decal to real clients solidly for the first half of 2010 because we had no choice - that's how we were making enough money to survive.
When we ran out of money BIG TIME, though, I needed a way to "package" the product up even though we didn't really have something finished yet that people could sign up and use. I quickly threw together a screencast over the weekend and put up a Decal page with a "special pre-release offer" to deploy a website for $999 (more details on this below). If we could just sell enough to pay Campbell to do the HTML for the websites, then David and I could focus on working higher paying consulting work 3 days per week and spend 2 says per week working on helping Cam with the deployments and improving the stability of the Decal user interface.
It was clear that we were not going to be able to get to our "end goal" very quickly spending only 2 days per week, so I decided that Release One would be a product that we could use to deploy sites for people with simple pricing and packages, rather than a product where designers/developers would be able to deploy sites themselves.
This put the "viable" in Minimum Viable Product, because we abandoned development on all features not related to just creating an amazing user experience and focused purely on stabilising the key features required to start selling our services as a Decal Company.
At this stage, we're really selling something that's based on the product we eventually want to release. The important thing was to try and figure out a way of doing that which would be in-line with our overall product plan.
We thought it would be far better to release more often to a very small number of paying clients than to try and publicly release a Minimum (un)Viable Product which was free or very low cost and might not give people the "shock and awe" experience that the Decal user interface can deliver.
It can be hard to go into "sales mode" but sometimes that's just what you have to do. As Tom Rossi, founder of Molehill Software said in his interview with Andrew Warner on Mixergy.com, you shouldn't be afraid to pick up the phone.
Even if your industry is flooded with competitors who are giving away a similar product for free, there's nothing that says you can't produce a product that's worth selling. The guys at Wistia sell video hosting for business in a market dominated by free service providers. Pinboard have been selling social bookmarking for years even when Delicious was the biggest player in the space and giving it away for free.
Of course, I also tried to secure funding. I emailed everyone I knew, pitched all over the place and applied to Y-Combinator (and was, obviously, rejected). One thing that I found, though, was that doing all that work trying to find funding actually really detracted from the time I had to spend on making money and building Decal - all for naught!
So since we couldn't get funding, did that make me think the product was worthless? Hell no! A product is only worthless if you can't sell it, regardless of whether you get funding or not. Since we had already been selling Decal I was convinced the product was worthwhile, and we could make it work.
Why video has been so important
Shameless plug: we use and recommend Wistia: video hosting for business - they rock
The very first thing I did was put together a screencast and create a web page which had a fixed "package price" for deploying a website. You can see the original website and video here:
As hastily put together and ugly as that is, we actually sold 4 packages using that website. It took me one solid weekend's work to put that online, and although those 4 sites only generated $4,000 in revenue they provided invaluable opportunities to test out the deployment of Decal and get some real world feedback on the product from our customers.
We could not have done the same if we had just had a couple of screenshots up on a website. The video gave us a way to "launch" without actually launching. It gave us something to talk about, something to tweet about, and something to send to prospective customers.
Decal is fundamentally different from every other CMS out there, but there are very few people who have never heard of or used a CMS before so it's very difficult to break through those pre-conceived notions to explain your point of difference without a live demo that people can try out for themselves. A screencast provides a sense of what it's like to use Decal and what differentiates it from other systems.
We've continued to use video as a primary selling tool for Decal, although we relaunched at the beginning of this year with a range of "package plans", each with their own video targeted at a particular audience. The results from this latest "launch without launching" has been even better, with revenues so far this year totalling roughly $18,000. This time around we went for a much shorter, less "feature focused" format with a greater emphasis on benefits to the customer.
As well as the marketing, "big audience" side of things, we use video all the time for providing instructional content targeted for particular users, and also re-use certain content over and over such as to introduce new users to the product.
Patience and Longevity
These are two words you seldom hear when discussing "internet startups", but here we are: it's more than a year since we began our "big push" to launch a product under our own steam and we still haven't launched. We've recently re-arranged things yet again to take the focus off client work and try for a publicly accessible live demo system within the next few weeks but we're still a long way off from the product that Decal will ultimately be.
The most important thing is, though, that we're still here, because the only way that this product can really fail is if we never release it at all and right now we have so much momentum and we're so close that I can't imagine how that won't happen.
If you'd told me at the beginning of 2010 that we'd still be inching our way towards a public beta in late March 2011, my head would have exploded. In hindsight, though, there's obviously no problem. Do we really need a first mover advantage? We're no less likely to succeed than we were one year ago. If we launch next month or at the end of this year, do you think that people won't need websites anymore?
There are actually a few competing products popping up around the place using similar techniques to us in the way they've built their HTML editors (ie. not using a TinyMCE or FCKEditor variant), but the market for this stuff is absolutely huge. It's not as if you can expect to go through life without any competitors, so compete!
I recently read this fantastic article from Chris Savage at Wistia which writes about his experiences prior to actually starting the company:
There are tons of viable startup ideas that get stopped before they get a chance to start. These ideas get left un-executed for a multitude of reasons including fear, money, and time. But, the most common roadblock I see is overestimation of the competition. The process goes like this: come up with an idea, google to see if it's been done, find someone doing something similar, and give up. As it turns out, this is the exact process we went through when trying to start Wistia. We'd think we were onto something exciting because our idea was so unique, then we'd find a company doing something similar and we'd give up on that particular approach. We continued this vicious cycle for 4 months until we realized that absolutely no one else had heard of the 'competition' we'd found. It turns out that it's actually really, really hard to get people to pay attention or use anything. After this epiphany it was easy to forge ahead.
Chris goes on to give some startlingly honest numbers about customer acquisition at Wistia that would probably scare the pants of most startups:
Brendan and I started Wistia in June of 2006. We quit our jobs and went in fulltime. It took us almost one year to the day to get our first customer. It took us another year to get to 6 customers. It took us another year to reach 60 customers. This past summer, 1460 days after starting Wistia we crossed 350 customers
As David Heinemeier Hansson says, you usually don't have to do things as fast as you think you do. If you haven't already, you should watch this interview with DHH (David Heinemeier Hansson) vs. Jason Calcanis on "This week in startups".
On the Freshbooks blog, the number one way Mike McDerment says he nearly killed Freshbooks was thinking that they had to move faster than they really did.
Although I originally sought to find funding, perhaps it's fortunate that, in the end, I was unable to.
In his video presentation "Unlearn your MBA" on the front page of his website, David Heinemeier Hansson describes VC as a time bomb. Once you light the fuse, you have to make your business work within a short period of time. VC funds aren't interested in whether or not you might be able to build a business with $3 million a year in turnover - they need exits 10 or 15 times what they invest in order to make it worthwhile.
Once you light that VC fuse, you can no longer slow down development and work on other projects while you slowly build up your product/business. You can no longer wait 3 years without making a profit in order to see if your business' time comes. You're taking an all or nothing bet, so you better be right.
In this interview with Phil Campbell, Adam Zais (head of marketing at Wistia) discusses the "future of Wistia" and he says that they're only just starting to scratch the surface of what we can achieve with web video.
Really that's true of the entire web. Some day, the web will be a 100 year old industry. It's easy to fall into the trap of thinking that, because technology moves so fast, everything will have changed before your business has the chance to become relevant, but when you think about it, technology moves slow as hell (question: where is my goddamn hover car?).
Sure it gets faster and smaller, but fundamental technological shifts that change the entire way people do business take decades. You can make a lot of money from a business in a decade if you play your cards right.
We will be releasing live demos of the product within the next few of weeks that will allow people to signup and try the system using templates we've created (the ability to upload your own templates is still a little way off). If you want to know when we have a live demo available, you can add your email address here. You can also follow @workingsoftware on Twitter and become a fan of the Working Software page on Facebook.
Would you like to receive updates when we publish new blog posts?
1 Feb 2011
You should have received your API key when you signed up. If you did not receive your API key, please contact us.
Step 1: Making a request
The Decal API accepts POST requests. The below code snippet shows how to formulate a request in PHP using this CurlRequest class which you can download freely. You should be able to translate the concepts into the language of your choice without too much hassle.
We're going to use the API to extract information from http://www.decalcms.com/, but obviously you can use this with your own install.
A full list of API parameters has been published here in a Google Spreadsheet
NB: Parameter values must be URL encoded
Step 2: Working with the returned data
The Decal API returns all information in XML format. We may potentially enable other formats in future - if you'd like to suggest an alternative format please make your voice heard on our support forum.
The reason we use XML rather than, say, JSON is because a) XPath is awesome and b) HTML data is basically XML and everything you work with in a website will be rendered as HTML.
You can easily look at the structure of the returned XML for yourself and see how to use it, however I'll include a couple of examples here.
Example 1: Printing a list of pages and URLs
Example 2: Creating a price list from the components on the Decal home page
Step 3: Search using the API
As well as the parameters listed above, you can use Decal's search API:
You can also use the "search more" query which is more liberal (in cases where the above returns no results):
Step 4: Embedding API results in your mockups
Decal's entire plugin system works with this service orientated architecture. Indeed, the snippet of code that renders the plan stacks on our home page can be viewed directly here.
When we launch the ability for you to upload your own templates to Decal, you will be able to embed these snippet URLs in your templates directly, hosted anywhere and written in any language you like.
Until that time, though, you can still embed your API results in your mockup pages by simply embedding an iframe using the object embed tool.
As an example I have installed the following code snippet at http://www.workingsoftware.com.au/decalapi/news.php
I then created a simple iframe and used the object embed tool to put this list of results on the home page of my Decal Interactive Mockups install.
Would you like to receive updates when we publish new information?
1 Jan 2011
List of support contact details | back to the top of the page
- Call 1300 612 335
- Follow @workingsoftware on Twitter to get status updates
- Become a fan on Facebook to provide us with comments or feedback
- Check out the Working Software status blog on Tumblr for any service disruptions (syndicated to our Twitter and Facebook feeds)
- Join us in #decal on irc.freenode net
- Email firstname.lastname@example.org
- Skype iaindooley
You can also:
- Visit our support forum on UserVoice
- Follow @workingsoftware on Twitter for product news, information and other relevant stuff
- Become a fan of Working Software on Facebook
Instructional videos | back to the top of the page
Click the links below to view each video in a popover window
Frequently Asked Questions (FAQs) | back to the top of the page
- Why why why why do you only support Firefox?
- What is the difference between the Content Manager tab and the Site Manager tab?
- Why can't I change things like font size, colour and line spacing?
- Why do I have to choose from set image sizes?
- Why can't I drop an image into just the right spot on the page?
- How does the File Manager work?
Why why why why do you only support Firefox?
NB: websites created using Decal can be viewed in any browser. It is only the actual CMS editing interface that requires Firefox.
We've actually been building the editing interface for Decal for a long time - since before Webkit browsers became popular and since Firefox was the only browser with reasonable debugging tools and back in the days when prototype.js was all the rage and jQuery didn't even exist yet.
At the end of 2009 and after a 2 year hiatus, we resurrected the project in earnest and rather than Rewrite Everything From Scratch we decided to do the best with what we had in the shortest time possible and this meant only supporting one browser, and this meant only supporting Firefox.
After a lot of refining of the interface and the deployment model, we're now up to the point where we want to ensure that we are, actually, solving the right problem in the right way before we commence porting the existing code to work with all modern browsers.
Our first release which allows designers/developers to experience the complete deployment process we have dubbed the "4 minute challenge"! We'd love to hear your thoughts - feel free to email email@example.com
What is the difference between the Content Manager tab and the Site Manager tab?
The Content Manager tab is where you edit the content of your pages that will be most visible to your website viewers. This is where you add images and text to your pages, embed videos and create links. You can navigate your website as you normally would using the menu or other links on your pages in order to get to the page you wish to edit and then simply unlock the page to begin making changes.
The Site Manager tab is where you add and remove pages and manage the properties of your pages that will be most visible to search engines such as page titles, meta tags and descriptions and parent/child relationships between pages (for example to control the breadcrumb menu on your website). You can also search for pages in the site manager, and see a list of all pages in a site map so you can browse through and choose a page to edit.
Why can't I change things like font size, colour and line spacing?
Whilst editing a Decal site, you have access to basic bold, italic and underline styles, as well as the ability to choose from one of several available headings in the heading menu. You also have a "custom styles" menu which gives you various styling options. These may differ depending on what type of text you're editing, and in which area of the site.
When a website is created, the way it looks should be controlled by something called a "stylesheet". The stylesheet of a website is a like a style guide - it dictates how everything should appear on the page from font style and size, to text foreground and background colours, decorative imagery, borders, letter and line spacing ... everything!
Traditionally, content management systems allow people editing the website content a great degree of freedom in the types of styling options they have available to them, but this presents a some significant problems:
- The content manager needs to know how to make the styles look exactly like they should according to the stylesheet
- The content manager needs to remember which styles to use in various parts of the site
- The content manager can make design decisions that aren't in line with the original design of the site
- You now have a whole lot of content that has been created which includes it's own display instructions
This means that, over time (especially if more than one person uses the CMS), your site will lose it's design consistency and start to look more "broken" as the people managing the content attempt to try and make each part of the site look the same as the original stylesheet intended.
After a time, if you wish to update the design of the site, having all the "display instructions" embedded in your content (such as content which specifies that it should be aligned right at 16pt font using the colour red) you will find that you have to actually re-enter all of your content in order to make it consistent with the updated design.
By ensuring that content managers make no design decisions, and by using the stylesheet provided with the website's initial design as an "embedded style guide", Decal not only ensures that your website is effortlessly kept consistent over time, no matter how many people are editing the content, but also makes your content more valuable in the long term by keep it's semantic function completely separated from it's display instructions.
Let's get technical ...
For the web designers in the audience, adding "custom styles" to your Decal site is easy! Just include a special comment in your CSS that will enable this style as a menu option. In the following code snippet, any time the content manager clicks on a paragraph node inside a div of class someComponent on the template with the wrapper that has the id somePageId, they will see the option "Some custom style" in their custom styles menu. If they select that menu option, the class customStyle will be applied to the paragraph they had selected.
Custom styles can be applied to any block level element (except list items) and will only be available in the menu when the element the content manager has clicked on is capable of receiving that style, according to the stylesheet rules/css selectors. You can also apply custom styles to anchor tags (links) which will show up as style options in the link editor dialog.
Why do I have to choose from set image sizes?
It's a fact that, for any website design, the website will look better if images of a certain size are used. Using images that are too large or too small may break the layout of the page.
Also, in most cases using the same sized images consistently throughout the site will dramatically improve the look and feel of your site and subtly improve your viewers' experiences.
To this end, when a Decal website is deployed, the designer who builds the site decides what image sizes should be allowed in each area, and gives them each a name that is easy for you to identify when adding them to the site. These sizes are provided to you as options in the image insert dialog.
The designer can also choose to provide the content manager with the option to drop images in at their original size, or to have an image size "fixed" so that the content manager has no option at all.
Why can't I drop an image into just the right spot on the page?
All web content is designed to be displayed in a range of situations and by a range of different browsers and devices. Positioning of elements on a web page is not the same as positioning of elements on, say, a poster. Once you have printed your poster, that's it - there will be no changes to the way in which that poster is displayed. You can't "resize" or change the font size of a piece of paper.
This is what makes the web so powerful as a communications medium, but it's the disconnection between the way traditional design tools work (such as illustrator and photoshop) and the way that web page displays work that causes many of our greatest problems.
When you drag and drop an image on a Decal page, you're telling Decal where you'd like the image to be positioned - however Decal needs to "translate" your desired position into the actual code that will make it work, and this is a difficult job. There is a big trade off between "breaking the rules" of good web page structure principles, and allowing the content manager to do just "do whatever the hell they want". Decal always errs on the side of the rules.
The designer building a Decal site is able to provide "structured templates" which simplify the process of adding complex image layouts to the page - for "every day situations", the content manager is able to choose alignment and vertical positioning on the page, and nudge the image around to try and get it into the right place - however the options are limited by what is possible within the confines of a standard web page.
We're constantly working to improve this aspect of the user experience but we are dedicated to maintaining our strict adherence to "best practices" when it comes to separation of design and content within the context of editable web content.
How does the File Manager work?
The File Manager in Decal is very simple. You upload files and they are then listed alphabetically according to the file name. You can also select to view all files in descending date order according to how recently they were uploaded.
The primary purpose of the file manager is for you to drop images or link to documents from your web pages. As such, you should generally be able to find the file you're looking for, by browsing to that part of your web page.
That being said, the absence of more sophisticated "folder grouping" functionality in the File Manager necessitates that the content manager be thoughtful when naming their files if they wish to find them easily in future, and we also recommend that you do not use Decal as your primary storage mechanism for organising your files.
The File Manager is one of the features in Decal we are most interested in improving as it is currently quite rudimentary - however our primary focus has been on building the world's best web page editor and revolutionary website deployment model, so we've been a little busy ;)
Would you like to receive updates when we publish new articles?
Profitable Websites - The Decal CMS Blog
This is the Decal CMS product blog, Profitable Websites. We write about how to design and build websites that are profitable, profitably.