Website Copy Teardown: Draftium

I'm an AppSumo lurker.

You'll regularly find me browsing their offers and watching their snappy explainer videos. 

Also, tacos. I'm an automatic fan of anyone that can work in my beloved lunch/dinner/snack into their business model (yum!). Yes, that will be 5 tacos please!

My latest visit turned up Draftium. It's touted as the tool to speed up wireframing and hi-fi prototyping in three easy steps. 

I'm intrigued. Go on...

Saving time and yielding better looking wireframes is massively appealing.

I wandered over to the Draftium homepage. That's when things took a turn:

Draftium has plenty of opportunities for conversion optimization.

I'll start off by saying that Draftium has some good stuff happening on their homepage. There are lots of in-app screenshots to help me visualize how much easier prototyping could be. And the clean design falls inline with the core premise of their tool.

But my up-and-down of the homepage turned up a handful of areas with room for improvement:

The Embedded Video: Show the reader what's inside.

Draftium has added a video near the top of their homepage. This is a good idea (in theory), but this video isn't working as well as it could.

Homepage copy teardown - Draftium embedded video.png

For starters, this is an animated video. And, unfortunately, it doesn't really tell me anything new about the product.

I imagine that a product demo would be way more useful to a prospective user. 

Suggested action plan:

As it turns out, Draftium already has a video that would fit the bill. It's embedded in their Capterra page.

My recommendation is to swap out the animated video for the Capterra product demo video.

Bonus points:

While we're at it, swap out the thumbnail image on the Capterra video for one that goes straight for the "show." Right now the thumbnail goes for the "tell" – they're requesting a viewer to sign up for free.

Assume that if they've come across the video they're already interested in signing up. Is there a way to use this thumbnail real estate to demonstrate Draftium's positive impact on workflow instead?

Strategically selecting your video thumbnail images could help you increase your overall conversions (in some cases, as much as a 109% increase). This is worth testing.

The Social Proof: Let your customers brag on your behalf.

Draftium has some solid social proof on their homepage, but it's buried at the bottom of the page under the in-app screenshots.

Homepage copy teardown - Draftium social proof.png

Check out that big piece of social proof! It's a sliding section with a small handful of testimonials from what seems to be three key segments of their user base: copywriters, web analysts, and UX/UI designers.

Suggested action plan:

Relocate user testimonials higher up on the page. This helps the reader more quickly pre-qualify themselves by:

  • Seeing that other people like them are using your product

  • Seeing that other people like them actually like your product

Testimonials are a great way to talk about how great your product is without bragging about yourself. Just let your users brag for you!

Bonus points: 

Add additional social proof that highlights how much time Draftium saves its users. This seems to be the differentiating feature that Draftium is leaning on, so finding a way to demonstrate that speed would be a great next step.

The Calls to Action: Shake things up!

The Drafium homepage contains a number of CTAs. Seven to be exact.

Four of the CTAs are hyperlink text prompting the reader to 'Create prototype >'

Homepage copy teardown - Draftium CTA.png

Three of the CTAs are variations of 'Get started for free'

Homepage copy teardown - Draftium CTA 2.png

And all seven of these CTAs lead to the sign-up page.

Oof. After your headline, CTAs are the most important copy on the page. They're also the most overlooked!

Suggested action plan:

Revisit those CTAs and consider copy beyond the standards that everyone has seen. Variations of 'Get started' and 'Sign up' should only be used if they're clearly aligned with the language happening in the corresponding headline above the CTA in question.

(If it was me, I would want to test 'Build my first prototype now' in that blue button pictured above.)

Bonus points: 

Rethink the locations of some of these CTAs. Particularly the button in the hero shot.

Right now it's prompting the reader to sign-up. But here's the big question: is the reader really ready to take that next step after reading just the headline and subhead?

Maybe. But it's unlikely.

The most effective CTAs align with the information a reader might need in order to take their next step.

In this particular case, Draftium's reader may not be ready to sign up immediately upon landing on their homepage, but they're likely very interested in seeing a product demo. 

And while we're on the topic of the hero shot:

First impressions count. Put your best foot forward.

The hero shot is the first thing a prospect sees when they land on your page. It's your opportunity to make a fantastic first impression.

As the reader, I want to know why I shouldn't bounce. Please, please tell me what's in it for me!

Typically, this is where your value proposition should live.

Why? Because as a prospect, I need to know what's unique to your tool. What is it that sets you apart from the competitors? Why should I abandon my current tools to use yours?

In other words, what is it that you can offer me that I can't get anywhere else?

I should be able to say something along the lines of "Oh yeah, Draftium. They're the ones that {insert unique and very awesome thing that creates life-long fans here}."

Here's what I saw when I first landed on the Draftium homepage:

Homepage copy teardown - Draftium hero shot control.png

Upon arrival, I was underwhelmed and immediately less interested.

I kept thinking...turbo? Really?

As a skeptical user that has already used a small handful of wireframing softwares, this sounds like a massive false claim that probably can't be backed up.

So, what does 'turbo' really mean. And can we get more specific? 

Next up is the subhead.

Draftium hints at a handy benefit. But I'm ultimately left wondering how this differs from the other wireframe and prototype tools.

And if the goal takeaway is 'Draftium makes hi-fi prototyping quick and easy'? Well, 'ideate' doesn't feel like I'm going to find the 'easy' bit of that equation after all.

Maybe I'm hanging out with the wrong people...but we don't talk like that.

The best way to talk to your customers is to talk to your customers.

Some of the best value props come from voice-of-customer data.

At this point I'm wondering if 'turbo' and 'ideate' are bits of language that their customers are actually using to describe their tool.

Obviously I don't have access to any of Draftium's behind-the-scenes voice of customer data, but I was able to quickly scout out customer reviews on AppSumo, producthunt.com and Capterra.

I found lots of raving fans and sticky vocabulary. But 'ideate' was no where to be seen.

The 3 core themes in their glowing reviews?

  1. Draftium makes it insanely quick and easy to build a prototype.

  2. The ability to build and share your work with teams/clients within one app streamlines workflow.

  3. The final prototypes are really good looking. 

Draftium is solving a significant pain here.

Why not lean on those insights to hook visitors with a believable yet highly desirable outcome?

Here's my lightly modified headline and subhead that leans on VOC language:

Homepage copy teardown - Draftium hero shot edited.png

The Headine: Lean on the desirable qualities of your product.

Original Headline:Turbo prototyping tool for websites

New Headline: Build beautiful website prototypes ridiculously fast

During my quick look at customer reviews it became clear that users were in love with the fact that Draftium helped them save time without sacrificing the quality of their work.

The updated headline leads with something highly desirable that the target audience wants and the existing users love.

I've also swapped out 'turbo' for 'fast' – keep it simple! Only one reviewer actually used 'turbo' anyways.

Finally, I've aimed for slightly more specificity in adding 'beautiful.' You see, in reviewing the public user feedback I saw that everyone loved that they didn't sacrifice quality in their quest for a time-saving tool.

By leading with a desirable outcome, you'll hook the reader and keep them reading down the page.

And by adding that specificity, you'll help a reader overcome a possible objection that may have popped into their head. In this case, that objection would be the worry that they'll sacrifice the quality of their work.

The Subhead: Get more specific to deal with the skeptics.

Original Subhead: Ideate and collaborate on website prototypes with team and clients

New Subhead: Draft a design, then share it with your team and clients. All in a matter of minutes.

The headline leads with the desirable outcome of quickly building beautiful website prototypes. And it's only natural for the reader to think: how fast is fast?

The updated subhead works to close this loop.

User reviews got really specific in naming their times (I saw anywhere from 5 to 45 minutes), but the overarching instant user outcome was clear: Draftium helps users make short work of their wireframing and prototyping projects.

What used to take hours now takes mere minutes.

I've worked with plain, simple language used by their users. And it highlights that Draftium allows you to build and share your work in-app.

And as for that 'how fast?' question that the headline sparks?

The reader receives the answer and closes this loop: it takes minutes. 

The CTA: Is it necessary?

Original CTA: Get started for free

New CTA: None. I've removed it!

Last but certainly not least, we're tackling the hero CTA. Beloved by many and useful by...not as many.

As I mentioned above, the reader may not be ready to hop into the app and start building. They likely still have plenty of questions about how the product actually works.

We already have a 'Sign Up' button in the site header, so why not try testing the removal of this hero shot CTA all together!

Conclusion

Your homepage is prime real estate. Every line of copy and piece of media should work together to keep your reader hooked. We want to keep them reading down the page!

Things that Draftium did right:

  • The tool! Users clearly love it (my brief test-run totally backs up the claim for fast and easy)

  •  Including video media and in-app screenshots along their homepage

  • Clean & simple design that works thematically with what their product actually offers

Where there's room for improvement:

  • Rethinking their video choice, as well as the static thumbnail 

  • Highlighting testimonials and other forms of social proof earlier

  • Aligning CTAs with the anticipated needs of the reader

  • Testing CTA copy that varies (as opposed to repeating the same copy along the page)

  • Lean on VOC data to clearly identify and highlight the main value proposition of the tool

Your turn: what's your #1 biggest takeaway from this website copy teardown?