Our approach at MetaLab is to design products that people can use today.
While it’s easy to get caught up in the excitement of “10 years from now,” we know things have to work in the present day with the tech currently available. We think innovation is about pushing the boundaries of the here and now to make useful, wonderful products people love.
When we had the opportunity to reimagine a construction development app this year, it was the perfect opportunity to push some boundaries.
At first glance, the app is a great and simple tool that helps engineering professionals get accurate building specs and reports on the go. Behind the scenes, it’s all about turning tons of raw data into useful, interactive features for construction professionals to do their job better.
Here’s how we designed in three dimensions for the first time.
In the beginning, our development team had a clear vision for a 3D feature that would make measurements more understandable than they were on the existing 2D reports—but it had never been done before so we had to figure it out from scratch.
**We believed that an interactive, tactile experience was right for our audience and that it was technically possible. All we had to do was figure it out.**
The idea was to give home builders and construction professionals a 3D visualization of a building. This “visualizer” would help them explain and sell real estate development concepts to their clients, and collaborate better with colleagues during construction planning.
The challenge is that we didn’t have any working experience with 3D product rendering or augmented reality (AR) design. Not the dynamic duo you might expect to build this feature. But as seasoned iOS developers, we knew we had great resources available to us like Apple’s SceneKit, and a supportive internal team at MetaLab for help along the way.
We believed that an interactive, tactile experience was right for our audience and that it was technically possible. All we had to do was figure it out.
Trivially easy, right?
We began with a flurry of research, learning as much as we could about 3D product rendering and AR design. The challenge was to invest our research time wisely, without getting pulled into the weeds of a broad and complex subject. We also found that not all information was relevant, credible, or actionable—and that this build might not be as easy as we thought.
The good news was that we had a great starting point from a data perspective.
Through stakeholder interviews during our research phase, we found that they had a ton of measurement data on the back end that could be used to render a building in 3D.
By translating that information into a practical feature, we could help users access this rich, detailed information in a simple way. These first versions looked more like a blueprint than 3D buildings but it was a great starting point.
As we moved forward, our team had exciting new additions. Will, an iOS developer, with 3D rendering experience, joined the team. We also brought in a 3D design consultant, who brought expertise in 3D product rendering and helped us fully realize the visualizer.
With their expertise combined, our blueprints started to actually look like houses. Light and shadow became much more realistic, and we even added interchangeable roof and wall textures.
The feature was now a usable, 3D experience that contractors could use to preview building materials on a realistic model of their client’s actual house. This would be valuable for them internally, but also a great way to help their clients visualize a concept early on.
At MetaLab, continuing education is always in play. It’s actually baked into our schedules— developers have a few hours each week set aside just for learning and development.
One day, during this education time, we got to thinking: what if we could use augmented reality to give users an even more interactive, useful visualization?
AR Mode—presented on a coffee table at our Vancouver HQ
We used Apple’s ARkit to test it out. And it worked! With AR, contractors can not only show a building in 3D—they can move around it as if it’s in front of them. These initial tests showed us that AR was possible and that it could be immensely valuable to the end customer.
At MetaLab, continuing education is always in play. It’s actually baked into our schedules.
Beyond the surprise and delight that comes with presenting a 3D house on a conference room table, AR Mode provides a more granular way to examine a building with complex geometry. A contractor can blow up the image to show unique features and discuss the best way to approach it from, quite literally, any angle.
Through a little curiosity and excitement to support our users, we built a feature that took the app from competitive to completely cutting-edge.
Throughout the project, we were reminded often that it pays to be honest: with each other and with our client.
Honesty is central to how we work at MetaLab, but it felt especially important on this project. From day one, we were transparent about our learning curve. We made extra effort to keep our client in the loop on what was working, what was not, and how we were overcoming any obstacles.
Our commitment to communication is what made each challenge a collaborative learning process. This also applied to design.
Collaborating with designers at MetaLab is essential but even more so on this project. On a typical project, our development team would be working with thoughtful design templates and room for healthy iteration. But this project was new for everyone.
It all came back to communication.
We changed the way we worked together on this project by talking things through at an even more frequent level than normal. We were sharing sketches, ideas, and roadblocks between designers and developers each day. By keeping everyone in the loop, design and development worked in tandem to great success.
The project got big momentum when we added expert talent to our team. Although we may have been able to figure it out on our own (eventually), it made much more sense to ask for help.
It was one of the smartest moves we made on this project. No matter how ambitious or driven you are, remember that you don’t have to do it all alone. With expertise from outside consultants, we were finally able to move past blueprints into our fully realized 3D visualizer.
When we first started, a fully rebuilt app and an augmented reality experience wasn’t part of our client’s initial ask. They had come to us to add on a few new features but were open to advice. After meaningful research into the client’s resources and the needs of their market, we delivered the best solution for their customers and turned their hidden 3D data into a stand-out feature.
After the project, our client partners called the visualizer one of the most important things they are working on. We couldn’t be more proud.
Some tips on how we've made remote work, work for over a decade.
Forget budgets and milestones. It was just us, the Pitch team, and a whole bunch of unconventional ideas. Read on to find out what happened next.
How “human” is human-centered design? We open up about vulnerability, mental health, and how embracing the messiness is critical to human-centered design.
In this edition of Ask MetaLab Anything, we chat about culture, how we make it work remotely, and why we take our "no assholes" policy so seriously.
We make interfaces for some of the world’s top companies. But we don’t all do it from the same office. Here’s how our distributed teams work together, apart.
For our first edition of Ask MetaLab Anything we connect the dots between research and design.
We helped Pitch give presentation tools a modern makeover. Here's what we learned about Figma in the process.
Think remote work is less than ideal? Here’s why you’re right (and so, so wrong).
In the second edition of our Ask MetaLab Anything, we share how our design and development teams work together.
What we learned from designing in three dimensions for the first time.
We're pulling back the curtain and answering all your questions about product design. Read on to learn how to send us your burning questions.
Life is way too short to miss out on the moments that matter. Here's how our MetaParents (I know, I know) make it all work.
Our highlight reel from 2019 is a little more...real than the rest. Read about what we learned about ourselves, our business, and doing better for our team.
We combined simple UX with sophisticated development to build the world’s first notarization platform—from scratch. Our Director of Engineering reveals the lessons learned along the way.
We recently gathered our entire team from around the globe in Whistler for our company summit. Here’s how Freya brought a remote team together to make Summit ’18 our best one yet.
Our CEO, Rich, works remotely from wherever in the world he may be. Here's why it works for us.
Research is our not-so-secret sauce to shipping great products. Here's everything you want to know about our research process.
If you're looking for a career in the wonderful world of product design, we have 5 tips for you. Let's get started!
We built a blog, our blog— from scratch. Here's why we did it and what we learned along the way.