MakerBrane designed a web platform to complement its physical products. Built around the 3D MakerSpace, a digital 3D builder for anyone to build, play, and learn with toys - digitally - and share their creations with the community. Others can download the files for 3D printing or step by step instructions to rebuild in real life.
The Goal
MakerBrane created an innovative construction block, the “Branes”, that can snap to many existing toy brands, and craft items. The business model involved opening up the toy creation to the community where anyone could design, share, or sell their creations for others to build using toys they already have, all they needed was to get Branes to mix everything together in new ways.
The online platform needed also to be the main vector of brand discovery and engagement.
To do that we needed an online design tool that could be accessible to builders of all ages. One of the challenges was to take a play experience that’s very tactile and not just replicate it digitally, but also augment it so the digital version can stand on its own and have its own unique value proposition.
Outcome
The 3D MakerSpace: an engaging and easy-to-use online 3D building experience combining several construction toy brands into one platform with export capabilities. The MakerBrane platform website: a catalog of curated digital toys and user-generated designs complete with virtual reality views, building competitions, and its own currency system. Unexpectedly now used in over 1,000 schools to teach design, 3D, and story telling.
Creating a 3D Builder from scratch
The Competition Landscape
We started by researching other 3D interfaces and a competitive analysis of their strengths, weaknesses, similarities, and differences:
- The majority of the existing builders are 3D modeling tools. MakerBrane is different from other 3D tools on the market by being an "Assembler" instead of Modeler". Instead of having to sculpt models by scaling and deforming shapes, the MakerBrane builder contains a series of pre-defined parts that snap together - mostly parts from familiar construction toys, craft, and everyday objects.
- A lot of the existing interfaces were highly technical, professional CAD-like and complex. Since the goal of MakerBrane is to create a 3D builder accessible to different age groups, the interface has to be clear and to disguise the technical features with super friendly elements.
- Most 3D tools used a small library of basic shapes, or are specific to one toy brand (for example the Lego Digital Designer). MakerBrane’s 3D builder needed to combine dozens of toy brands in one space, which means the interface needed to allow the user to see and find their need in thousands of parts, without being overwhelmed or confused.
A look into competitors: 3D interfaces
Team Workshops
To kickstart the design process, we held ideation workshops where each participant shared their idea of the features that would make the product playful, accessible, and innovative.
User Personas and User Journeys
We then took a step back and shifted perspectives, developing user personas and trying to imagine their journeys and needs. Some features were common: a list of all the construction parts that’s easy to sort through, an intuitive drag-and-drop mechanic to place the parts, and a way for the parts to snap to each other in a satisfying way, providing positive reinforcement. With internal and external UX designers, we focused on 3 personas with their different user journeys.
Each persona had its own priorities for feature development.
Playtests
After defining the user personas, we created Playtest events where we tested the MakerSpace with different representatives of these personas, to validate our assumptions:
The Playtests were extremely useful in sometimes completely blowing our assumptions out of the water. Among the list of recurring issues:
- Users would only use the same 3-4 parts instead of the entire library
- Users would have trouble understanding how to rotate and move parts around
- Users had trouble deciding what to build and froze on the builder screen
Some of the fixes:
- The first interface was designed to be a complete “open space” with only 3 parts showing at a time, and a button that triggers an overlay with a list of all the other parts. The problem was that the users never actually clicked on that button, thinking that they only have 3 parts to build with, and kept asking if there are more. The reason behind that design was to simplify the builder by avoiding a large library of parts taking space and overwhelming users with options. After the test, we decided to display the full library of parts on a left-side panel in the builder, split by toy brand. The brand sections are expanded by default in order for users to see the wide breadth of options at their disposal while giving them the option to collapse it whenever they want. This adjustment worked very well: users became aware of the MakerSpace’s added value (the thousands of parts) and could adjust their view based on their preference. We found that users preferred having a fixed list of parts visible while building instead of having to open more menus, like looking at a collection of boxes or trays.
- Commonly found in 3D building tools is the Gizmo, a standard guide for rotating and moving shapes inside the program. Users with a 3D software background were familiar with the Gizmo, but most MakerBrane users had trouble understanding it. The MakerSpace is intended towards users with no technical knowledge, and therefore, we needed to redesign the Gizmo to be less technical. As a solution, we made the gizmo’s interface chunkier and more playful, driving the user’s curiosity and understanding that a big fat arrow means “drag me to move”.
- First-time users were struggling to figure out what to build and how to build it. Our initial tutorials teaching all the 3D MakerSpace controls as users constructed a complete 3D model, took too long to complete (over 30 minutes), and we saw a significant drop off during them. In response to this, we designed a bitesize tutorial series for each action the user can perform. The entire series does not take more than 5 minutes to complete, and re-directs users to the first model they can try and build with the tools they learned.
The 3D MakerSpace
The final version of our online builder, now officially named the 3D MakerSpace, was launched. First-time visitors to the MakerSpace would be greeted with an overlay that clearly highlights our tutorial series, followed by example projects. The MakerSpace itself is laid out in a way that makes its individual aspects a lot more clear. You have your parts on the left, clearly labeled, color-coded, and split into folders, which saw a large increase in the variety of designs being created on the platform. To differentiate from technical 3D tools typical grey and black backgrounds, the MakerSpace background is is in MakerBrane’s brand yellow. It made our advertising, screengrabs, social media, and playtesting photos immediately recognisable. In addition, MakerBrane was an accessible tool that had to attract a younger audience, so the brighter colors was a better fit for our target audience than what was on the market today. We eventually added the setting option to change to a dark mode for those who -understandably perhaps - couldn’t stand the yellow all the time 😄
Retention
MakerBrane’s audience quickly grew. It was an exciting time, but there were still massive hurdles that we needed to overcome, and a lot more design and development to be done. We had a large number of registrations every day, but retention numbers were below expectations. We needed to make the experience attractive enough for them to become long term prospects for MakerBrane, designing toys and interacting with the community on a daily basis. The MakerSpace needed to work closely with the other major product of the company, the MakerBrane platform, to ensure there is an engaging loop that keeps users excited, rewarded, and challenged every step of the way.
Our website had some major issues with regards to identifying the value proposition of the company. It assumed too much, and appeared more demanding than it actually was. We had to deconstruct it to analyze why users weren’t using it the way we wanted to and come up with improvements, easing them into the MakerBrane experience. Here are of the problems we noticed:
There was a clear onboarding problem. A large amount of users were registering to MakerBrane, which shows an initial interest in the platform and its value proposition. However, there was a massive drop-off in day-one retention, probably meaning those early expectations were either not met, or too hard or too tedious to meet. In addition, the website was overloaded with features that weren't well-explained, if at all, and navigation wasn't particularly intuitive. It wasn't clear what the user should be doing after they registered to the platform. Finally, the Explore page displaying the design catalog was filled with low-quality, incomplete designs; hardly inspiring for young aspiring toy creators.
We recorded a How to use the interface video explaining the MakerSpace and adding it to the banner of the website’s home page. This augmented first week engagement by 20%.
The second solution was to curate and select the best user-generated designs from every week and highlighted them in a separate Explore page, which served as the new default. This is to ensure that any new user will be able to see that anybody can create high quality designs on MakerBrane.
In order to encourage and inspire the community, we launched a blog of our best designs every week.
Finally, we needed a way for users who went straight to the MakerSpace to know when new features and challenges were introduced.
We designed a “What’s New” pop-up panel informing users of notable events and additions to their experience. This allowed users to expect something exciting every time they visited the MakerSpace, increasing the chance of their return to the platform.
Building Engagement: Monetization and Gamification
We added two currency systems: Coins and XP. You could buy Coins or earn them in return of engagement (daily login, sharing, commenting…). With Coins, they could buy other toy creators’ designs, which they can rebuild in the MakerSpace to earn Experience Points (XP). The XP system allowed users to level up and earn public ranks that would feature on their profile, offering bragging rights and increased status.
To drive the gamified and social aspect of MakerBrane even further, we designed a leaderboard that creates a sense of competition and excitement around building, which helps keeping users engaged with the experience.
Part Sets and Play Sets
We added Part Sets to indicate one of the company’s main value propositions: MakerBrane’s slogan was Build with Everything, but it was never indicated what Everything actually means. We decided to hit two birds with one stone and list all of our Part Sets in a banner, while also monetizing them by having people unlock them using Coins and/or XP. The additional attractiveness of the Part Set lists and descriptions allowed us to present them in ways that would prove worth paying for, and it worked! Coins spent on Part Sets exceeded Coins spent on Designs by over 100%. Play Sets were introduced to give users who aren’t necessarily creative or into creative play a way to engage with the product. These sets, a collection of designs for users to rebuild like a 3D puzzle, had to look welcoming, simple, and rewarding. Play Sets proved to be a very popular (and profitable) activity on the platform.
Feedback
“The digital interface is just mindblowing!”
- Sucharita Jyothula UX Design and Innovation Parsons School of Design
“A reinvention of building sets like Lego with a more creative and sustainable mindset”
- The New York Times
"It is kids friendly AND parents friendly!"
- Kelly Ann Howes, mom of little makers