BlocksCAD in action

Overview

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.

The Challenge

Design an engaging onboarding experience for the BlocksCAD application.

Project Duration

3 weeks​

BlocksCAD

Discover

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.

BlocksCAD logo

My Role

I was in a team of 4 UX Designers—primarily responsible for the user research, usability testing and prototyping.

Tools

  • InVision

  • Axure

BlocksCAD Design Team ideating

Problem

Educators need a faster or more direct way to learn the BlocksCAD application in order to better model lessons for their students.

Solution

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.

Research

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.

Explain

Works when:

  • User is highly motivated to learn

  • There are many use-cases

  • Ex. Adobe Photoshop

Show

  • Works when the product is context-based

  • Should assist good UX, not put a Band-Aid over bad ones

  • Ex. Google Analytics

Do

  • 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.

Define

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

Storyboard

Affinity Mapping results

Storyboard

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.

Amanda Wilson (User Persona #1)
Jacob Peterson (User Persona #2)

Develop

Initial sketches

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 #1

User Flow #2

User Flow for the BlocksCAD website

BlocksCAD Application Design Decisions

Deliver

Lessons Learned

  • 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. 

 

Task:

  1. Your tasks in the application are to:

    • Learn how to start a project​

    • Work with blocks

    • Watch tutorials​​

  2. 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!