01 / 05

Motion Assembly Case Study

The Brief

The Brief

I worked with Mike from Motion Assembly earlier this year to create a simple landing page for his new architecture company, with the idea that we would build out a fully functional site later in the year. While the initial site served its purpose as an online presence, we spoke at length about how we could really nail down the value proposition of Motion Assembly.

Motion Assembly offers architectural services with a strong focus on immersive visualisation and surveying. Traditionally, architects would create architectural drawings, which, for those not in the field, provide little value when it comes to understanding how a project will actually look. Motion Assembly tackles this by surveying your property with a full 3D scan and then creating detailed 3D models of your project, so you can truly see what the finished product will look like.

02 / 05

The Challenge

Turning a process into an experience

The Challenge

With the Motion Assembly site, we wanted users to fully understand the value of having 3D models as part of their architecture project. We wanted to showcase the process in a way that makes it clear to users what it means and how this value translates when making design and architectural decisions on their project.

Rather than just listing the process with text and images, we created an interactive process section on the website. As the user scrolls, a video in the background moves through the different stages of the process, showing how your ideas and plans will come to life. We found this to be an intuitive and exciting way to show how Motion Assembly differentiates itself from other companies.

03 / 05

The Design

Balancing service and showcase

The Design

The utility of this site falls somewhere between a service website and a portfolio, so we wanted to find a good balance between showing information about the process and services and showing off the 3D models that Motion Assembly produces. With this in mind, the home page serves as an experience, outlining what the company offers, its value proposition, and the immersive process experience.

The rest of the site follows a more traditional route, with the about page showcasing the company's history and the blog pages following a more standard pattern to help with SEO and make sure they're easy to read and navigate. While sticking closely to these principles, the blog page has a unique design: it is set out as a book that users can navigate by clicking through the pages. The site's HTML reads well for SEO, but from the user's perspective, the book design is more immersive and easier to read and navigate, as it's broken down into short, readable sections.

04 / 05

The Infrastructure

A flexible foundation that performs everywhere

The Infrastructure

For the site architecture, we used Sanity as the backend with a Next.js frontend. Sanity gave us the flexibility needed to update the different pages, and its presentation view makes it easy for the client to update content without having to trawl through lots of different menus.

One big infrastructure challenge was how to show the process run-through video. We played with the idea of a scrubbing video that plays as the user scrolls; however, this became quite resource-intensive and wouldn't work on lower-end laptops or with weaker internet connections. With this in mind, we decided on a scrollable video: each scroll takes you to the next part of the video, pauses, and outlines that part of the process. If users are struggling to get through because of internet or hardware limitations, they can switch the process video to a slideshow instead, which runs more smoothly.


05 / 05

The Testimonial

A good build ends with a client you'd want to work with again

The Testimonial

When I first got in touch with Dylan, I was struggling to find the time to build a website that properly communicated the vision for my business. I had tried building it myself in WordPress, but every small change seemed to break something else. At one point, the entire website had somehow become about the width of a pencil and took around 15 minutes to scroll to the bottom of.

Dylan quickly took control of the design process and showed me what was possible. We worked closely together to coordinate the content and functionality, and he made the whole process incredibly easy. He would clearly explain the constraints of what I needed to produce, then suggest alterations and ideas that could elevate the content and make the website work harder.

What really stood out was how focused he remained on the bigger picture: what my company was trying to communicate, and how to make the experience as clear and straightforward as possible for potential clients.

Once we had settled on a design, Dylan built a system that allows me to adapt the website and add new content without disrupting the overall flow or design. He supported me throughout the entire process and has continued to stay involved afterwards, even getting in touch with suggestions for new content based on current search trends.

I would highly recommend Dylan and Tailroad Labs to anyone looking for someone who can combine strong design thinking with a genuine understanding of how a business needs to communicate online.

Selected Projects

Case study coming soon
Localisation
David Morris Japan

David Morris Japan

Jewellery

Web DesignWeb Development
Motion Assembly

Motion Assembly

Architecture