BlocksCAD initially approached us with a problem regarding a large percentage of their user base: the educators. The crux of the matter came down to amount of time these unregistered users spent within the BlocksCAD application. Google Analytics data showed that if an educator spends more than 10 minutes within the BlocksCAD application, the chances of that converting into a sale increases radically. The conversion rate dilemma could’ve been solved in a handful of different ways—but selecting a solution that would address multiple issues was the best course of action given the short timeframe. This was due to the general logistics, short-term goals and long-term goals. User testing and user feedback was the powerhouse of this project.
Design an engaging onboarding experience for the BlocksCAD application.
BlocksCAD is a Boston-based ed tech startup that creates tools for students of all ages to help them pursue their interests in science, technology, engineering, art, and math (STEAM). Their signature product is a cloud-based 3D modeling CAD application that encourages users to learn math, computational thinking and coding concepts through visualization and designing models to be 3D printed.
I was in a team of 4 UX Designers—primarily responsible for the user research, usability testing and prototyping.
Educators need a faster or more direct way to learn the BlocksCAD application in order to better model lessons for their students.
We believe that by creating a more engaging onboarding experience for educators we will help demonstrate the value of BlocksCAD in the classroom. We will know this to be true when educators spend more time in the BlocksCAD application.
After defining the core problem and the obvious limitations of the scope (the short timeframe and the programming language used to build the application), our first step was to inspect the landscape of the competition. There were several big players in the game already and we had to not only be clear on what BlocksCAD's secret sauce and vision was, but pick up on the salient points of the competitors.
Right away we noticed that BlocksCAD was not disrupting a space it all—it was creating one. Never before was there an intersection of CAD, 3D printing AND code. Moreover, one that was accessible to kids. The competitors chosen were not only the obvious giants like Autodesk’s TinkerCAD and Silicon Valley-based Tynker, but also ones that had a robust kid-friendly user base and evocative onboarding experiences like Bitbloq, MakersEmpire and 3D Slash. This eventually led to a deep-dive research on three major types of onboarding experiences: doing, showing and explaining where Do > Show > Explain.
User is highly motivated to learn
There are many use-cases
Ex. Adobe Photoshop
Works when the product is context-based
Should assist good UX, not put a Band-Aid over bad ones
Ex. Google Analytics
Uses a sample or demonstration
Explains & Shows to drive the user towards a successful template
Ex. Squarespace or MailChimp
Due to the limitations of the programming language used to build the application (OpenSCAD), we opted for the Show route.
BlocksCAD was instrumental in helping us round up users. A major limitation was due to COPPA (Children's Online Privacy Protection Act) restrictions—basically stating that you cannot collect information or advertise to children under the age of 13, which happened to be the majority of BlocksCAD's user base. So we went one level up—the educators. We incentivized them to participate in-person through Amazon gift cards and we even were able to swing a contextual inquiry session where we sat in on an educator teaching BlocksCAD to her class! Being able to witness and listen to the questions (especially the repetitive ones) asked by the students was invaluable as they guided what should be addressed in the onboarding process.
Affinity Mapping results
We came up with two personas that we thought were the archetypal representation of the main users of the BlocksCAD application—the educator and the technology coordinator of a school or district.
To kick off the sketching process, we knew that we wanted to stay true to the existing BlocksCAD application as much as possible. After all, BlocksCAD wanted to implement these changes within the next 30 days.
Our team held a design studio where we timeboxed ourselves to generate various ways to onboard a user. This generative process spit out a lot of great ideas and the funnel filled up quickly. Each idea was explained and defended by the creator if questions arose. The idea was then subsequently voted upon by the team to progress on to the final sketch. The scope was so well-defined that none of the ideas were completely trashed. Certain features and ideas still made it to the final cut.
The clickable paper prototype was born.
User Flow #1
User Flow for the BlocksCAD application
User Flow #2
User Flow for the BlocksCAD website
Presenting and defending designs in front of C-level executives
Managing expectations of shareholders and developers
Dealing with a real life client with actual business implications
As mentioned before, user testing was the powerhouse of this project. Us as a design team made the users paramount (it goes without saying), and made sure to iterate on the feedback that we heard more than once. It was definitely an interesting quandary because as designers, we have to recognize that you can't please everybody.
During the digitization process, we made the executive decision to use Axure over Sketch due to the attributes of the BlocksCAD application. Axure is much better at handling interactions and dropdown menus than Sketch. It made more sense to do this rather than having an overabundance of screens. Keeping in line with the theme of not changing things drastically, we kept the visual design and branding within the existing style guide. Thus, the colors and font remained.
Scenario: You are Amanda, a middle school teacher that searches for "mathematical coding software for kids" in a search engine. You stumble upon BlocksCAD and are intrigued.
Your tasks in the application are to:
Learn how to start a project
Work with blocks
Your tasks in the website are to:
Learn about the product plans and pricing
Inquire about customized plans
Try out the clickable prototype by clicking here!