Hexagon Robotics: AEON Launch
- Type: Branding, Marketing Site, UX/UI, Web Design
- Role: Lead Designer
- Tools: Cinema4D, Elementor, Figma, WordPress
Project Overview
Hexagon Robotics was launching AEON, a flagship autonomous humanoid robot, as part of a newly formed Robotics division. The launch required a high-impact digital presence that could make a strong first impression while also serving as a long-term foundation for future Robotics marketing.
At the same time, Hexagon’s broader brand refresh was still in progress. While the core brand direction was largely defined, the web system and components were not yet complete. This created a unique challenge. I needed to design and build a production-ready site that introduced the new brand early, while adapting it specifically for Robotics.
The result needed to feel intelligent, confident, and technical. It had to align with Hexagon’s identity while clearly standing on its own as Robotics.
Design Approach
Robotics was intentionally designed as a dark-mode-first experience, using cool tones and restrained contrast to create a technical and industrial feel. This direction emphasized intelligence and confidence, while visually aligning with AEON itself by drawing inspiration from the robot’s materials, lighting, and environments.
The Robotics adaptation maintains Hexagon’s recognizable structure through consistent typography, signature linework, and familiar layout patterns. These elements were reinterpreted using darker backgrounds, cooler color usage, and simplified line treatments that better support technical storytelling and dense content.
To support long-term use, I created a Robotics-specific brand adaptation guide that documented how to apply the Hexagon system within this context. This ensured future assets and pages could remain cohesive and on brand.
A look at the sub-brand guidelines I created in Figma
Some renditions of the design in Figma prior to development
Closeup of a section that utilizes the Robotics-specific brand adaptation
Design System and Page Architecture
A major focus of this project was creating a scalable layout framework that could support growth well beyond launch.
Each page is built using a consistent nested container structure consisting of an outerGridContainer, innerGridContainer, and contentContainer. This funnel-style architecture defines spacing, alignment, and visual hierarchy at every level, allowing rows to stack cleanly and predictably across all breakpoints.
Pre-made variations handle common column layouts and content patterns, giving the site flexibility without sacrificing consistency. Compared to earlier Elementor projects, this site functions as a true system rather than a collection of visually similar pages. Structure, spacing, and behavior are all tied together under a shared framework instead of being solved page by page.
Figma board planning the containers and nested structure and different templates that use them.
Technical Constraints and Problem Solving
Because the site was built in Elementor rather than a fully custom development environment, certain aspects of the Hexagon design system required creative technical solutions.
Thick accent lines, angled breaks, and image framing were recreated using layered elements, custom CSS, and carefully positioned overlays. An important discovery during development was that all angled breaks needed to sit at the vertical center of a section in order to scale correctly across responsive breakpoints. Establishing this rule early prevented future layout breakage and became a foundational constraint reused throughout the site.
Responsiveness was treated as a primary consideration from the start, allowing structural decisions to support scaling instead of relying on fixes later.
Full view of the Homepage
Key Visuals and 3D Rendering
In addition to the web design and system work, I created a series of 3D renders of AEON in Cinema4D to support key moments throughout the site.
These renders were used as key visuals to help communicate the robot’s form, capabilities, and versatility in a controlled and consistent visual language. Examples of these visuals can be found on the product page, including the Versatility section, where the renders are used to reinforce use cases and storytelling without relying solely on photography.
This allowed the site to maintain a polished and cohesive look while highlighting AEON in a way that aligned with the Robotics visual direction.
Custom Interactive Components
To avoid placing dense content into static multi-column layouts, I designed and built a custom four-column expandable module. This component allows sections to expand and collapse based on interaction, supporting both content discovery and page-to-page flow depending on how it is used.
The concept and interaction design were my own. GPT assisted with portions of the JavaScript logic, while I finalized the CSS, layout behavior, and responsive implementation to ensure the component remained visually consistent and reusable across the site.
Stakeholders responded very positively to this interaction, and it became a reusable pattern rather than a one-off feature.
Closeup of expanding four-column module
Handoff and Enablement
This site was designed for long-term ownership by a Robotics marketing team that I would not be part of.
To support that transition, I created a comprehensive template demos page documenting every layout, component, and best practice. All pages were built using reusable templates that enforce brand consistency and responsiveness by default. I also recorded two detailed handoff webinars covering WordPress usage, page creation, template behavior, and site structure.
The result is a system that allows future contributors to confidently build new content without breaking layout, responsiveness, or branding.
Closeup of the news section's cards, where the new team has been adding new content.
Outcome
The site was live the morning of Hexagon LIVE 2025 and served as the public launch platform for both AEON and the Robotics division.
Internal stakeholders responded extremely positively, particularly to the clarity of the design system, the flexibility of the templates, and the overall cohesion and scalability of the site.
This project marked a turning point in how I approach scalable design systems in WordPress.
It was the first Elementor build where structure, layout, and behavior were fully unified, allowing the site to scale cleanly without relying on page-specific customization.
Explore the Site
More of my Figma-mess from this project planning the system.
Visual Highlights
A few highlights from the site — but I recommend checking it out live to experience the full interactions and motion.
