I was the first Tinkercad designer and growth hacker post-acquisition by Autodesk, and helped to grow Tinkercad via iterative design, testing and content creation from just 50k users to well over 13 million – a 25,900% increase (in three years). This is the story of Tinkercad.
On their hands Autodesk has – what I believe to be – is THE concept of the easiest and most enjoyable browser app in the world (not to mention most useful, too!).
Tinkercad is a community wrapped around an app. While the app needed little improvement in the visual department, the website, on the other hand, had to be completely redesigned. Here's why:
Pattern is quite obvious here: move away from feature-based marketing and towards benefit-based marketing has proven (in this and every case, really) to more than double the conversion rate. Simplify the language. Get more graphical. (Marketing 101, really…)
All of the designers and marketers that came before and after me, for some reason always tried to invent creative ways to represent the app, without realizing that the app markets itself.
In this case you really do have to ‘know your audience’.
…And I'm not talking about setting up user groups to try and figure out a bunch of good-for-nothing, common-sense-type of information. The entire team should be comprised of hardcore 'makers', who [ab]use the app on daily basis… People who dream it! Not the ones with no ideas who hire other, ‘no-idea’ people.
Get out of your comfort zone, and do the world a favor – find your own niche; something you can't live without. And then go and improve that thing. But not this one.
It is the single most recognizable app in the world. THE WORLD, people! OK? It doesn't need to be degraded to other graphical means of representation outside of app's existing design!
…If only said people used the app and their creativity to create in-app presentation art.
In other words: create all the graphics in Tinkercad, and arrange them in Photoshop.
Below is what I started with. Upon initial examination, the top contains all the required conversion elements: heading, sub-heading, main CTA, video, and a visual:
Although this isn't THE first version of Tinkercad, I'm considering it as such since this was the starting point post-acquisition.
The issue with the initial design laid in specialization.
What everyone – including the current leadership – fails to understand is, as a Oscar Wilde once noted, “to define is to limit”. As soon as you start going through exercises which help you determine who your target audience is, you are doomed from the very beginning.
In this case, the banner was too specific for the “target audience” of the entire world. (Because anyone can use Tinkercad, as long as they know what a computer is; and if you are designing for one group, you are missing all the others.)
Working alongside the best Design Manager and User Experience Architect I've come across in my entire career in the Bay, Amy Phillips, we've outlined the visual direction of what would become V2 of the website:
ALPHA of Amy's proposed design.
V2. Further refinement of Amy's proposed BETA, by yours truly.
At this point we had a nice framework to experiment with, and so for the next little while this is exactly what I did:
Before I get to “what Tinkercad should have been…”, here's yet another great example of over specialization; this time in its current design:
Brand/Design direction: Hens Teeth; Scene Design + Photography: Instructables (internal design team).
Taking direction from Hens Teeth – a branding agency that seemed to have hired a junior contract graphic designer to re-imagine an online app – internal Autodesk marketing team has once more embarked on a journey of re-imagining Tinkercad brand (there have been several previously failed attempts at redesigning the website by equally incompetent agencies of preference (how do they find these guys?).
Here's where the problem is: marketing department did exactly what I told them NOT to do.
They have spent many months and many hundreds of thousands of dollars to determine that their audience are kids (duh!), so they have redesigned the website with that in mind…
Everything about this redesign screams “a toy for kids” – completely dismissing all (semi)professional users.
If the goal was to have less users, then they surely have accomplished that, as last time I checked this design was driving at least a 20% decrease in conversion.
The redesign was obviously full of good intentions. The team wanted to show users that you can take a digital design and turn it physical, however there were several crucial things wrong with this scene to begin with:
Herein lays another issue: misrepresentation.
At first glance, this looks like a very cool graphic! Let's take a closer look:
How can we better explain what Tinkercad is without saying a single word? The answer is quite simple: animation. And we're not talking about a regular screen video recording, which is how the team used to promote the app…
Sticking to Tinkercad's brand, these animations are made to mimic the scrappy maker approach – they are not supposed to look “professional”, or too refined – just the right amount of polish.
Custom-built – frame-by-frame – animation of “Fidget Spinner creation process”. I put it together using After Effects and Photoshop.
Maya Thomas was instrumental in research and compilation of all the content, as well as the overall structure and flow of the page. As a result our marketing spend decreased, and our conversion rate increased. Magic.
I was put in charge of designing out the entire experience end-to-end. In case you're a fan of Silicon Valley, you might have heard the abbreviation before… COPPA stands for Children’s Online Privacy Protection Act; and yes, it's a real thing.
It states that if you collect data from anyone under the age of 13, you MUST have their parental consent. In case you have no such consent, you can be fined at the federal level anywhere between $15,000-$45,000 for every underage user in your community…
…Even if you were to take a small chunk of Tinkercad's users, let's say 1M (it's a lot more than that), then you begin to see the bigger picture:
This will mean that in the best case scenario, you'd be paying 15 Billion (yes, that's a capital B), in the worst, about 315B… And these guys are not kidding around – Google (YouTube) already got fined $170M for its violations.
Knowledge is power, and thankfully Autodesk always has great insights [ahead of time], given you know where to look. As a result, even before COPPA was a “thing” online, our team already had all the t's crossed, and i's dotted in this department.
…To reinstate the complexity of this workflow one more time, and because you wouldn't believe that I had “thought through/designed” this otherwise (welcome to Bay area), I'll include another set of super complex scribbles that you will not understand. After seeing this, surely you will believe me…
Serving as Autodesk's ambassador for this project, I had a real pleasure of working with Christy Canida (wife/partner in-crime of Instructables founder, Eric Wilhelm). She was the link between Autodesk's legal and product teams and CARU (Children's Advertising Review Unit) ensuring compliance along every step of the way. Together we've brainstormed majority of the work before making all the findings available to the rest of the team. Any more “cooks in the kitchen”, and the process would have been extended greatly…
Working with a preexisting convoluted flow that didn't meet COPPA's requirements, we set out to simplify the work not only for the end-user, but also for internal teams who were involved in approvals of parental consent applications. …And not that we needed to see where users were struggling – it wasn't that difficult to tell – but a lot of effort was put into finding out exactly that.
Checklist: scoping the affected by COPPA features of the community.
A huge chunk of time was spent on moderation workflows with Education Lead, John Helfen. Together we brainstormed all the possible ways things can go wrong…, and as you can see, combinations were plentiful.
Eventually all of that complexity, as it always does, boiled down to a very simplistic user interface. Question arises – why not design backwards?
One of the main touchpoints in this workflow was the Parental Consent form – a PDF document that required parent's or legal guardian's signature. This document was to be kept on-file, in case it ever needed to be presented to the inquiring party (like federal government, for example). Here's what it looked like:
V1 of Tinkercad's Parental Consent form – my starting point.
Here are just a few things that are wrong with “this picture”:
V2 vs V3. “Safest company in the world” award goes to... Autodesk! After all, legal department wanted to make things even safer by adding a second page that mostly repeats the first one (again).
Majority of designers would have simply redesigned the form fields on the second page to "clean things up", and improved consistency in text styling – and for a good reason! But I'm not part of the "majority", and my design process goes quite a bit deeper…
You see, the only way to reverse the order of the form and the legal language, so that the form would be on the first page, was to completely re-write the copy to include the most important points on the same page that the form would be found on. This is exactly what I did. While I'm not an attorney, I have common sense. And it is my belief that the common sense always prevails.
First of all, I found out from the legal department what parts were required – they obviously said "everything"… I dug deeper. I sat down and re-wrote the entire thing by myself – with [un]common sense in mind, eliminating unnecessary repetitions, while turning 'legal speak' into human language.
As you can tell, it ended up being so that even the legal department can be incorrect in saying that we need "everything". At the end, unnecessary information such as the phone number and relationship to child ended up being dropped after all…
Parental child forms (COPPA) re-designed and re-written from legal perspective to be more concise and more user-friendly + official Tinkercad keyboard shortcuts. I did all the form design and majority of re-writing. Internal corporate lawyers confirmed compliance. Seen here is the Keyboard Shortcuts PDF download I have designed.
Tinkercad couldn't exist without content. And it certainly wouldn’t be able to grow as fast as it did, had it used mediocre content developed by marketers who are not makers themselves. Needless to say, a lot of promotion involved creation of highest quality content the world of 3D design and 3D printing has ever seen.
Click on any one of the projects for more information…
The main problem laid in that Tinkercad was perceived as an amateur tool, or an app for kids – at best. While that might be the case, it was important to explain to professional users that this happened to be the essential tool in everyones toolbox – including theirs.
With that in mind, I've spun off numerous projects showcasing much more intricate and purposeful designs. Something that would – at its core – be simplistic and easy to understand, yet at the same time hint at the fact that things can get a lot more detailed, for more complex, real-life applications.
While developing all this content, I've come to realization that the best way to market this particular product was through the direct use of all of these physical creations.
This is why I recommended to establish #MadeWithTinkercad, as it established an important parallel to EXACTLY what the user can walk out with, should they choose to sign up (for free). Expectations were set from the minute a potential user set their foot through the door – something that previous designers and marketers would always try to portray via other graphical styles – most of the time vector illustrations.
Fidget Spinners in collaboration with Maya Thomas
DIY section in collaboration with Dina Bseiso
Animals in collaboration with Maya Thomas
Jumping on the PokemonGo bandwagon: collaboration with Maya Thomas
Planters in collaboration with Andrew Taylor
Brinks in collaboration with Wayne Losey
Just to give you an idea, here's what the sitemap ended up looking like for all of the templates that I have recoded.
70+ responsive templates; 20K lines of code
Coming to this style was no accident. After jumping on this project, I've collected all the benchmarks from top landing pages and, working alongside the amazing Amy Phillips, put out the initial revision - iteration B. The redesign was so well received by the public that it DOUBLED an already insanely high conversion rate. this was the beginning of Tinkercad's climb from thousands and hundreds of thousands of users, to MILLIONS in a matter of two years. Recently website surpassed 13 million registered users mark!
Redesigns were purposeful and always backed by real data. V2.1 design took into account things like organic SEO, main CTA's above the fold, confidence reinforces such as the reassurance of the product being free (which was closely positioned to the main CTA on purpose), clever use of GIF animations to show the simplicity and the ease of use of the app, and nominal amount of cleverly written copy.
In my 15+ years in this business, I haven't come across a higher converting website. Truly incredible.
While growing the initial consumer offering for Autodesk (123D apps) I've suggested we – as a team – standardize on the front-end framework. For this reason I've selected Bootstrap as a starting point for everything we put out.
Reasons for using Bootstrap vs something homegrown are quite obvious, but the biggest ones were documentation and community. The same reason why I always rooted for move to Drupal (that never really ended up happening unfortunately…)
I'd love to hear your feedback in the comments!