Mighty Buildings — sustainable 3D printed houses of the future

time icon
2024
2018-2021
Manufacturing
Real estate
Other industries
scroll
No items found.

{{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.
GreenBiz

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

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
Business Wire

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.
Sustainable Brands

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.
GreenBiz
get in touch
get in touch

Problem

Mighty Buildings is one of the first companies to start 3D-printing homes commercially. The company’s technology makes it possible to create residential modules of complex shapes, which are often impossible to produce in the traditional way.

Solution

Our main goal was to create a responsive web application and a website, allowing users to select and customize their new modular homes with just a few clicks. One could see it as a constructor for grown

dfgdfgdfg

The main goal of our client was to build a patient-friendly platform with a positive and stress-free approach. As not every person is a tech guru, it was also crucial to simplify the website’s functionality, creating an intuitive interface with different languages available. Besides, the client put a strong emphasis on data security, as sensitive information about patients’ health must always remain confidential.

sdfsdfsdfsdfdg

The main goal of our client was to build a patient-friendly platform with a positive and stress-free approach. As not every person is a tech guru, it was also crucial to simplify the website’s functionality, creating an intuitive interface with different languages available. Besides, the client put a strong emphasis on data security, as sensitive information about patients’ health must always remain confidential.

Services we provided

UX/UI design
UX/UI design
Product development
Product development
Web development
Web development
TIME FRAME:
1 month
No items found.
No items found.
No items found.
No items found.

PROJECT DETAILS

A/B and hypothesis testing

To verify various hypotheses and to better understand what users wanted, the client conducted A/B testing and, based on this analysis, generated various tasks for us to implement. Some users were directed to the unaltered version of the site, and some would see the new one. One of the intriguing cases involved the testing of website registration methods:

  • 01
    Through the simple page with a brief registration form and an image of a unit’s exterior.
  • 02
    Through the landing page with detailed information, pictures, and videos about the technology and materials used.

The idea behind this was to check not only the number of users (how many people went through the full funnel) but also their "quality" (as in how many users in both test versions would actually make a deposit). We expected that there would be fewer users coming through the landing page but that they would be more deliberate about registering and purchasing a unit.

In fact, the number of users ready to register from the landing page was much-much lower, and the number of orders decreased almost proportionally. As it turned out, having received some of the information and satisfied their curiosity, users were less willing to leave their contact information as opposed to coming in hot from social media.

To verify various hypotheses and to better understand what users wanted, the client conducted A/B testing and, based on this analysis, generated various tasks for us to implement. Some users were directed to the unaltered version of the site, and some would see the new one. One of the intriguing cases involved the testing of website registration methods:

  • 01Through the simple page with a brief registration form and an image of a unit’s exterior.
  • 01Through the simple page with a brief registration form and an image of a unit’s exterior.

To verify various hypotheses and to better understand what users wanted, the client conducted A/B testing and, based on this analysis, generated various tasks for us to implement. Some users were directed to the unaltered version of the site, and some would see the new one. One of the intriguing cases involved the testing of website registration methods:

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.

  • $40M
    Raised in series B Funding
  • $40M
    Raised in series B Funding
  • $40M
    Raised in series B Funding

Redux and Redux-saga

To handle data management, we employed Redux and Redux-saga. The Redux library helps us manage the state of the application in a centralized and predictable manner, while Redux-saga enables us to manage and test side-effects such as data fetching and backend communication.

The combination of these libraries has allowed us to create a robust and maintainable front-end that is capable of handling large amounts of data and state changes.Redux and Redux-saga

Redux and Redux-saga

To handle data management, we employed Redux and Redux-saga. The Redux library helps us manage the state of the application in a centralized and predictable manner, while Redux-saga enables us to manage and test side-effects such as data fetching and backend communication.

The combination of these libraries has allowed us to create a robust and maintainable front-end that is capable of handling large amounts of data and state changes.Redux and Redux-saga

Client’s feedback

ings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Alex
Coo

Halo Lab took on the task of developing an accessory dwelling unit web configurator for a construction startup. They also delivered brand guidelines to establish a design precedent for collateral.

Alexey Dubov
COO & Co-Founder, Mighty Buildings

Have a similar project or idea? Let's discuss the details.

Ready to discuss
your project with us?
Contact us
Contact us
4.9 AVG. SCORE
Based on 80+ reviews
TOP RATED COMPANY
with 100% Job Success
FEATURED Web Design
AgencY IN UAE
TOP DESIGN AGENCY
WORLDWIDE