An interactive web experience telling the story of the best Harley Davidson ever built. The site combines themes of raw industry, M.C culture and hotrod styles while featuring engaging interactions that take the user from the very beginning of the FXR development all the way to using the built in customiser to give the bike their own touch.
Figma, Html, CSS, Javascript, Lottie Files, GSAP
5 Weeks
UI Design
How can the story of the Harley Davidson FXR be bought to life and made into a interactive experience? The aim was to engage the user into exploring while also learning, with the challenge being the ability to convey information in a way that is not only visually appealing, but interactive while still serving a core purpose.
A browser based desktop experience, packed full of fun interactions and informative history allowing the user not only to learn the story but to feel part of it. The experience is built on a standard HTML, CSS & Javascript workflow with GSAP and custom motion animation with Lottie files all working to tell the story of the bike and those involved and give the user the chance to build an FXR of their own.
The part of this project that I feel represents my skill, style and attention to detail is the Interactive Web Experience, but you will also find all the other deliverables and all project files down there too. Jump straight to it with the button below, or take it slow and scroll through my breakdown of the features.
With a gateway entrance to the site, the user is prompted to enter full screen. This also confirms permission for sound within the browser, allowing for an immersive audio-visual experience. Fast-paced video and sequenced GSAP animation sets the scene and encourages the user to scroll and interact.
The cards feature the main people behind the design and production of the FXR, with small design details paying homage to Willie G. Davidson through the use of the Willie G skull and skeleton hands as navigation buttons. These guide the carousel and bring each card forward for clear reading.
Through the implementation of Lottie files, an accurate depiction of the original frame design is drawn right before the user's eyes. Using Adobe Illustrator to draw the design and Adobe After Effects trim path techniques to time the animation, the paths are drawn from beginning to end point, creating a dynamic visual narrative.
The engine cards were designed to give a 3D effect by positioning the engine in front of their parent card absolutely, allowing both the foreground and background to animate perfectly. Hand indicators pan in, giving an affordance to the user that a hover effect interaction is available. Whilst hovering, the card and engine rumble whilst playing the sound of that engine, replicating the signature V-twin engine vibrations and adding another layer of immersion.
The models carousel followed the same buttons as the previous cards, further paying homage to Willie G. Davidson and maintaining the design direction. Using multi-layered smoke and smooth fades to bring each model in, at this point the designers, frame and engine had all been explored. It was time for the user to enjoy the models as they changed throughout just short of 20 years of production.
The history had been explained and the generations explored. All that was left was to represent the current usage of the FXR in a digital way through customisation. The FXR is now the custom bike of choice in the Harley Davidson world. Using the customiser, users can take all the knowledge they've learnt and put their own individuality on the bike, choosing from paint jobs, custom upholstery and tank badges—all with interactive sounds and smooth animations.
Explore the iframe below, use the filters panel below to choose from the design file, prototype, research board or presentation
I'd love to hear from you! Whether it be a question, a project idea, or just want to say hello, feel free to reach out using the form.