We were briefed by Speedo to create two campaign landing pages for two brand new products. Creating a self contained experience, using the existing brand guidelines and with clear calls to action. Time was of the essence. We had just under a month to design, build and launch both pages.
Each landing page promoted very different products. V-Class is a top of the line unisex set of goggles for professionals and the h2o active swimwear range is for young women.
After initially doodling the layout with the client on a whiteboard we quickly moved onto wireframes back at the office. For this project we decided to use Adobe XD. This was the first time using Adobe XD on a client project.
We knew from meetings with the client that we wanted to include interactivity with the product online as much as possible.
In these early stages we spoke about creating a parralax scroll video and overlays. As a user scrolled through the page, certain elements would animate into the users view.
With tight time scales a photoshoot could not be arranged quick enough to get the shots we needed to achieve complex animations or video.
With the general page hierarchy and structure approved, we swiftly moved onto the design of the V-Class landing page. With the photos we could get, the theme of the page would have to be black with fluorescent accents to match the goggles.
After several versions we also decided to include the "shop now" buttons after every section. We found from testing and run throughs with the client that a single "shop now" button following you down the screen was not significant and obvious enough.
The h2o range required a little bit of a different approach. We needed to introduce and show case the products and their ambassadors but we now also had multiple products in multiple colour ways.
A user needed to be able to mix and match the swimwear they wanted to see but also have the ability to see all items at once. We quickly came to the idea of multiple carousels with a "view all" button being available.
During the same client session we again quickly sketched UI elements and general UX on the whiteboard as a team.
Very simple element drawing for the Speedo h2o landing page.
We launched both pages simultaneously within a very short timeframe and the pages were a success with users. Data proved traffic was flowing smoothly to the correct pages.
Unfortunately with no benchmarking it's hard to give a definitive. The pages were launched in mid 2016 and are still available now even since a rebrand by the digital arm of Speedo.
You can find both landing pages using the links below.V-Class Landing PageH2o Landing Page