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.

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.

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.

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.

Dylan made the whole process of building my website simple and stress free. He took my initial concept and developed it into a clean, interactive site with intuitive navigation, and even produced a design style guide to support the early stages of my brand.

Communication was excellent throughout. The first draft was ready within days and any changes were quick and easy to implement. I am proud to share the final result with clients.