Hublot
ART DIRECTION | MOTION | UI/UX
Project Info
Role: Senior UI Designer
Category: Luxury
Team: 4 people
Timeline: February 2024 – March 2024
Credits: Gary Brown, Marcus Whittle, Richard Davy
Services: Art Direction, Motion Graphics, UI/UX Design, Video Editing
Introduction
In collaboration with the team at Huge, I worked on Hublot’s 20th anniversary campaign celebrating the iconic Big Bang collection. Our objective was to create an immersive, high-end digital experience that stayed true to the brand’s bold visual identity and spirit of innovation.
The campaign’s creative concept revolved around fusion—Hublot’s hallmark philosophy of combining unconventional materials like rubber and gold, titanium and carbon fiber. This idea inspired the site’s visual direction, material interplay, and animation style.
The final deliverables included a microsite featuring a countdown page, a landing page, a homepage, and five individual product pages—each dedicated to a signature model: Titanium Ceramic, King Gold Ceramic, Full Magic Gold, All Black, and Red Magic.
The Goal
The main challenge was to deliver a fully immersive, motion-rich website within a very tight timeframe. Balancing innovation and technical feasibility required close collaboration across design and development teams.
Challenges & Solutions
Tight deadline required fast iteration and close team coordination. Frequent client feedback led to shifts in visual direction. CMS limitations forced balance between bold design and technical feasibility.
Responsibilities
• Visual exploration and art direction
• UI and interaction design
• Motion and prototyping
• Design iteration and refinement
• Close collaboration with UX and engineering teams
Process
Working alongside the other UI designer, UX designer and creative director, I worked on the visual design and crafted motion behaviors that supported Hublot’s storytelling.
Regular syncs with the development team allowed us to stay aligned with the platform’s technical constraints, as the site was built on an existing CMS framework.
Introducing new animated components demanded careful planning to ensure feasibility without jeopardizing the launch schedule.
Despite multiple client feedback rounds and several shifts in art direction, the team maintained creative cohesion and focus toward the shared goal, a premium digital experience consistent with Hublot’s brand values.
Immersive experience
A key requirement for the project was to deliver the most immersive experience possible within the constraints of the CMS and the tight schedule. My initial proposal was a highly engaging parallax 3D header scroll animation, designed to make the page header feel dynamic and layered on scroll.
Unfortunately, due to the project’s short timeframe and the technical limitations of the framework, we made the pragmatic decision to pivot to a standardized header approach, ensuring successful and timely delivery.
Results
- Successful on-time launch, as scheduled for the collection’s anniversary.
- Five new product releases showcased through dedicated pages, each emphasizing the innovative use of materials.
- Increased brand visibility, supported by a major digital campaign starring headline ambassadors and high-profile collaborations.
- Uplift in website traffic during the campaign launch period.
- Increased time-on-site and product page views after microsite launch.
