Mighty Buildings — sustainable 3D printed houses of the future

{{problem}}

{{services-provided}}

{{tech}}

Client’s challenges

1. 01 Creating an interactive web application — a configurator for the customers to design and customize their homes.
2. 02 Developing the configurator in a way as to make it understandable to the user, encouraging them to purchase houses built by Mighty Buildings.
3. 03 Creating a web product that will help market an entirely new kind of offering.
4. 04 Introducing a simple checkout process that would walk the user through all the steps, ensuring high user-to-customer conversion.

Product scope

• Creating a modern and responsive design to capture the product’s features.
• Launching the site in a limited access mode for testing and receiving the first orders.
• Integrating a payment system, thus allowing users to make deposits towards the construction of their houses.
• Creating a detailed and clear digital representation of the real product for further testing with real customers.
• Developing a visual brand guide, making it restrained but recognizable.
• Delivering a fast and easily maintained web application while considering all the design requirements.

Since 2017, Mighty Buildings has grown to over 100 employees and has raised $100 million from leading investors.

PROJECT DETAILS

Business side research

We started our work on the project by studying the client’s requirements and market research data. In-depth analysis was necessary because aside from being innovative, the product carried a specific social message — to offer equitable and comfortable living conditions for everyone at an affordable price.

Based on that research, we have built the configurator’s information architecture and identified the optimal order and number of features that will allow users to create and appreciate the design of their future Accessory Dwelling Units, or ADU for short. Only after that did we start working on the details and separate pages.

{{slider}}

PROJECT DETAILS

3D house from a sketch

Our main task was to create an interactive web application that would enable users to browse and customize the line of Mighty Buildings’ houses. This functionality allows users to choose such options as the color of the walls and wood finishing, additional solar panels on the roof, various interior alternatives (with a minimum set of kitchen + bathroom), and extra furniture. Furthermore, users could order a complete turnkey solution, with the company covering the paperwork, installation, assembly, and other services.

The interface of this configurator includes various functions: selecting a unit, its 2D plan, and 3D tours. You can find more information about this functionality on the client’s website.

Oakland-based Mighty Buildings, which is on a quest to build homes using 3D printing, robotics and automation, has raised a $22 million extension to its Series B round of funding.

PROJECT DETAILS

Creating MVP

At the very outset of the project, we undertook to create a detailed and clear digital representation of the actual product for further testing on real customers. Before the public launch, the website could only be accessed by the strictly defined target audience via a link from Instagram and Facebook — and to access the configurator, the users had to register.

This relatively small target group could provide vital information on which ADU designs they like best, what specifications they are interested in, and whether users have any additional questions that should be addressed on the site.

PROJECT DETAILS

Landing page for clients

The promotional landing page, linked in social media, had to attract customers and convert them into leads. Naturally, it was important to get users interested and give them enough information, encouraging them to move on to the reservation stage. We used photos, videos, and icons with clean lines and clear visuals in mind, to better present information and familiarize the customers with the product.

We also worked hard with fonts and colors to convey the business's specifics. For example, we used the Acrobat sans serif font, as its structure and geometry imply a serious approach to business and customers, and a high quality of services. The color palette used in the design was as natural as possible. We paid attention not only to the key colors but also to the accents and dividers. To emphasize the connection with the natural elements, we used green colors.

Mighty Buildings Completes World’s First 3D-Printed Zero Net Energy Home, Announces B2B Strategy Expansion to Accelerate Growth

PROJECT DETAILS

Reservation stage

Once the user was done with arranging their house in the configurator, they could choose the appropriate time for its construction. With this idea in mind, we have developed a calendar where users can see and reserve their free slots.

When we created the necessary interface for this step and handed it to the development, the question of incorporating the payment system arose. We chose the Stripe platform for its main advantages: safety and ease of integration.

All that would enable clients to not only assemble their houses in the configurator but also to reserve a date and make a deposit for construction.

{{testing}}

PROJECT DETAILS

Laravel and Vue.js

Since this interactive configurator was evolving, we needed technology that would give users quick results and be flexible enough so that the product could be continuously updated based on market research. This is why we chose two modern frameworks — Laravel and Vue.js.

Laravel was ideal for the project because it allowed us to quickly put together the small details and implement the necessary changes to the finished product. Meanwhile, Vue.js helped take the load off the server by providing faster loading speeds.

The company is currently producing around 300 units a year out of its Oakland facility and is working to expand to 1,000 units a year by 2023.

PROJECT DETAILS

Pre-launch optimization

Before launching the project, we performed software testing and optimization while also looking at the website’s SEO by writing basic meta tags and creating a sitemap. Since one of the client's requirements was to make the product optimized for mobile devices, we tested and tweaked the loading speeds for mobile customers. You can find more detailed information about all the website pre-launch stages in our article concerning the pre-release checklist.

PROJECT DETAILS

New life for the project

We’ve come a really long way to create an innovative and functional product from scratch. And collecting information from the field and testing hypotheses was an important part of the project. This helped optimize the site and web application and make it more user-friendly for the customers.

With our modern design and sophisticated configurator, the startup has managed to reach an entirely new level, becoming Mighty not only in name but also in reality.

{{GO TO WEBSITE}}

Results in numbers

Once we had developed the configurator and Mighty Buildings concluded the lengthy closed beta testing, they launched their product publicly, raising $40 Million in Series B Funding. And they haven’t stopped there — during the subsequent funding campaigns, they’ve raised more than $100M from leading investors, including Khosla Ventures and Arctern Ventures.

<div class="case__rich-result">
<ul>
<li>$40M Raised in series B Funding</li>
<li>$100M+ Total raised from leading investors</li>
</ul>
</div>

What’s a Rich Text element?

What’s a Rich Text element? sdffgdfgfghfgh

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

• Sdfdfg
• Dfgdfgfdg
• dfgdfgfd
• Dfgdfg

dfgdf gdfg dfgdfgidfgiudf gdf ugidfugidf ugid

• dfgfdg
• dfgdfg
  dghjghj
• dfgdfg
• dfgdfg

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

1. 01 dfgdfgd
2. 01 dfgfdg
3. 01 dfgdfg
4. 01 dfgdfg

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.