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 (besides whoever created the BETA index page), 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. Case closed!
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). Key concept "flat is boring" (with flat cardboard buildings in the back – was this an intentional pun?) was born as the involved parties figured that all the promotional graphics that I created using Tinkercad itself, were "flat". Up until then I did not know that you can have a "flat" 3D design… And "boring" is what you see above.
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 was: marketing department did exactly what I told them NOT to do. They have gone ahead and spent many months and many hundreds of thousands of dollars to "determine" that their audience mostly consists of kids (duuuh!), 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 have certainly accomplished that, as last time I checked this design was driving at least a 15-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.
There is a very specific trend you will notice in the evolution of Tinkercad's main graphic design. With each iteration, design got more and more graphic-heavy…
My intention with this initial graphic was to “sell the user on-the-spot” – first of all without them having to do any more discovery via scrolling, and second of all, certainly without having to go off the page to "seek more answers". As a result, the graphic had to not only appeal to everyone, it had to, at the same time, sell the app itself, as well as its capabilities – 3-in-1 so to speak.
User-generated content showcase section was meant to serve as a "safety net" for anyone who would "fall further through the page". It was meant to tell users a bigger story and at the same time allow for their mind to run wild with ideas – so they could imagine themselves creating something of their own for that is the deciding factor in successful conversion.
Addition of this section alone was responsible for a big spike in conversion rate as none of the previous tinkercad websites sold the app via its creations – which is just a no-brainer!
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 20M userbase, 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 a bit deeper than that…
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 do exercise 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". In 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 which I have also 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 create #MadeWithTinkercad, as it established an important connection to EXACTLY what the user can walk out with, should they choose to sign up (for free). Expectations were set 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.
Growing Tinkercad via targeted [and popular] keywords and landing pages was just common sense. …Up to this day I still can't quite figure out why on earth the internal marketing department chose to "sit" on majority of these landing pages that I have build out with the help of Dina and Maya instead of releasing them so the product could grow exponentially. Strange decisions all-around…
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 a partial sitemap ended up looking like for all the responsive templates that I have personally coded from the ground up.
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 a year. Recently website surpassed 20 million registered users!
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.
If it was up to me, I wouldn't have done any drastic UI changes to the app itself, as it was already pretty perfect. Perhaps I would fix a few small UX annoyances, but for the most part, the app "just worked". And when something isn't broken, don't "fix it" – instead put in extra effort into perfecting and growing community, which, in Tinkercad's case could use A LOT…
…As community grew, so did the app. It all started with small, incremental changes. Seen here is one of such UI changes. Right hand side panel used a tabbing mechanism to uncover tools and sections; to get to these you could either click on the row of icons at the top, or expand each one of the section titles by clicking on them – both accomplished the same task, which I always found to be redundant.
My biggest gripe with this panel, however, wasn't in how it was interacted with, but the type of content it contained, overwhelming majority of which were shapes, not features or tools. So the reason as to why previous product owners/designers decided to wedge in a concept of "Helpers" into this panel is frankly speaking beyond me.
Helpers, at least to me, are just tools. Like the group/ungroup, delete, duplicate, etc. Why on earth mix them up with shapes??? As a result these two orphans never got much love since not many browsed through these categories outside of the basic shapes. So it was decided to make this section expanded by default. This obviously shifted down the entire basic shapes section, giving it even less viewing area – great!
…There was a time when Autodesk was in the "alignment" stage, as in they wanted to align all of their products to look and function the same; we're talking a HUGE company-wide adoption. In charge of this initiative from the consumer side two people from the Circuits team were selected to reenvision the interface:
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…)
Enjoyed what you saw? Stay updated by following me.