Inertia’s Website Redesign: Emphasizing Visual Brilliance and Clarity

Request / Problem

‍Inertia, a London-based creative studio specializing in 3D visualization, approached Digital Butlers to redesign their website. Inertia’s employers include global brands such as Asics, Amazon, Playstation, and Porsche. Despite their impressive portfolio, the previous website had significant usability issues. Visitors struggled to distinguish between the core studio work and the "Labs" section dedicated to R&D projects, resulting in confusion and difficulty navigating the content. Inertia required a redesign that would not only resolve these navigation issues but also place their impressive body of work front and center.

Solution

Our team began by aligning the design expectations with Inertia’s vision. We collected their existing brand elements—logo, gray color scheme, and the distinctive elongated "E" symbol representing inertia—and discussed ways to enhance and refine these assets. We curated a mood board filled with typography, color schemes, and stylistic references, forming a cohesive design direction. After processing the feedback, we presented several homepage concepts, ranging from classical to bold designs. Once the preferred concept was selected, we proceeded to design the UI for all the necessary pages.

Here’s a breakdown of the design and functionality of each key page:

Homepage

‍The homepage was crafted to immediately engage visitors by showcasing Inertia’s portfolio. The hero section featured a dynamic showreel, which rapidly cycled through short clips of their most notable projects, giving users a taste of their creativity from the moment they land on the site. We ensured users could easily navigate from the homepage to other important areas like the full portfolio, individual project case studies, the “About” page, and the "Labs" section.

Additionally, the homepage included a featured works section, where select projects were highlighted alongside a full catalog link. This layout served to entice visitors into exploring further while providing quick access to Inertia’s most compelling work. A client list was integrated into the homepage, where each employer's logo linked directly to their specific case study.

Portfolio Page

The portfolio page was organized into distinct categories: Products, Brands, Outdoor Companies, and Mixed Reality. Users could explore these categories either through a dynamic chessboard layout or a list view. The chessboard layout displayed project covers that users could hover over to quickly preview the work and open the desired project. The list view provided more detailed information, such as the project’s year of completion, a brief description, and the scope of work. This flexible navigation empowered users to browse through the portfolio according to their preferences, enhancing the overall user experience.

Project Detail Pages

‍Each project detail page began with either a static cover or a 5-second video clip of the project. Below this, key details such as the project’s objectives, services provided, and performance metrics were displayed, along with descriptions of the project’s journey from concept to completion. The layout maintained the clean, modern design established on the homepage, with a dynamic chessboard feature allowing for smooth transitions between sections and keeping the user’s focus on the content.

About Page

‍The "About" page provided an introduction to Inertia’s core values and philosophy, displayed in a manifesto section. This page was designed to communicate the team’s vision while including photographs, names, and roles of key team members. This personal touch allowed visitors to connect with the people behind the projects and added a layer of transparency to Inertia’s work.

Labs / R&D Page

‍The "Labs" page functioned as a playground for Inertia’s experimental, non-commercial projects. We designed this section to evoke a sense of creativity and innovation, incorporating visual elements that highlighted Inertia’s research-driven approach. Users could browse through various experiments, discover unique design solutions, and gain deeper insights into the studio’s capabilities beyond commercial work.

Contact Page

‍The contact page was designed to be simple yet visually appealing. It featured a large team photo, showcasing Inertia’s working environment, and provided clear options for users to reach out via email, phone, or social media. The layout was clean and functional, ensuring that potential employers or collaborators could easily get in touch.

Design Features and Functionality

‍Throughout the website, we made extensive use of white space to keep the focus on the visual content. Typography was kept clean and modern with a sans-serif font, ensuring readability and clarity across all devices. Another notable feature was the dynamic background transitions, which shifted between light and dark themes as users navigated from page to page. This not only maintained user engagement but also helped to differentiate between different sections of the site.

All elements of the design were optimized for mobile responsiveness, ensuring a smooth user experience on both desktop and mobile devices.

Technology

The project was fully designed in Figma, which enabled seamless collaboration between our team and Inertia’s stakeholders. This tool allowed us to prototype and iterate on the designs efficiently, ensuring that the final result aligned with Inertia’s brand and functionality requirements.