As Lead Digital Designer at Gymshark, I was tasked with designing the Onyx V5 Campaign Page and the Queue System to support one of our most anticipated product drops to date. The goal was to create a high-impact digital experience that could handle massive traffic surges, build hype, and seamlessly guide users from anticipation to conversion.
This case study breaks down the strategic design decisions behind each section of the campaign page and the design of the queue system.
Countdown Timer
Objective:
Build anticipation and urgency.
Build anticipation and urgency.
Design Approach:
Positioned prominently above the fold.
Used bold typography and animated transitions to draw attention.
Synced with global time zones to reflect local launch times.
Used bold typography and animated transitions to draw attention.
Synced with global time zones to reflect local launch times.
Outcome:
Increased return visits and social sharing in the 48 hours leading up to launch.
Increased return visits and social sharing in the 48 hours leading up to launch.
Store Drop Information
Objective: Drive foot traffic to flagship stores.
Design Approach:
Interactive map and location cards for each store.
Localised launch times and early access messaging.
Mobile-first layout for users on the go.
Design Approach:
Interactive map and location cards for each store.
Localised launch times and early access messaging.
Mobile-first layout for users on the go.
Outcome: High engagement from international audiences, especially in London and New York.
Product USP Highlights
Objective: Communicate the value and uniqueness of Onyx V5.
Design Approach:
Modular grid layout showcasing each USP
Paired with lifestyle imagery and motion graphics
Design Approach:
Modular grid layout showcasing each USP
Paired with lifestyle imagery and motion graphics
Outcome: Strong conversion uplift from users who interacted with this section.
Hype history
Objective: Reinforce brand legacy and community nostalgia.
Design Approach:
Videos showing the IRL pop-up store & events
Subtle parallax effects on page load
Videos showing the IRL pop-up store & events
Subtle parallax effects on page load
Outcome: Increased time-on-page and deeper emotional engagement.
Queue system
To manage the influx of traffic during launch and prevent site crashes while maintaining a fair and transparent user experience.
Design Approach:
Branded Gymshark Design System UI
States for before, during and after queue
Onyx Imagery in the background to build atmosphere
Branded Gymshark Design System UI
States for before, during and after queue
Onyx Imagery in the background to build atmosphere
Outcome: Real-time queue position and estimated wait times & smooth transition into website.
