Landing Page Iterations
Mobile preview of the landing page
Client:
Bramwell Brown, British clockmaker and e-commerce retailer
My role:
To take the initial designs that had been done by a UX Design agency, and iterate certain elements to better suit the user needs, as well as being more achievable for the developer. I can’t take any credit for the base design of the page.
Outputs:
The page is in its final preparations before launching, but the design is has now been iterated in a number of ways:
Desktop scroll animation was simplified to overcome issues found during developer implementation, and also translated into a mobile version (mobile accounts for 75% of traffic to site)
Call to actions were revised to be more in line with where the user is likely to be in the customer buying cycle when visiting the page
Product carousel was redesigned to better display the unique product artwork and be more attractive overall.
Iteration #1 - Hero Scroll Animation
Original Design
The original design was for the artwork scene to slowly recede and morph into the full product, with the animation linked to the scroll.
Unfortunately there were two issues with the design:
The developer was unable to implement the animation into a smooth experience
The design was for desktop only, with the mobile design remaining static. As mobile accounts for 75% of traffic, the client wanted the design across both devices.
Updated Design
Desktop
The redesign simplified the animation, but shifted its aim to generate intrigue and delight in the user by linking the main movement (the tide) to the scroll. Smaller elements also move just slightly to help bring the scene to life.
Video demonstration of desktop scroll animation prototype.
Mobile
The simplified animation for desktop had the advantage of easily being tweaked for mobile.
The artwork is still linked to the user’s scroll (swiping upward) but is focused on a smaller part of the imagery. The USPs below also come into view toward the end of the animation, so that the user has the feedback of scrolling down the page.
Video demonstration of mobile scroll animation prototype.
Iteration #2 - Calls To Action
Original Design
Directly below the scroll animation is the “Meet Our Original Tide Clock” section.
Within this section, the original design featured a frame colour selector and a Buy Now button.
Problem #1: The primary CTA doesn’t align with where the user is in their purchase decision journey.
The intention of the Buy Now button was to fast-track the purchase journey for the user. However, the page is designed for customers that are just discovering the product from a range of online sources such as Google. Based on the client’s analytics, Hotjar, and interview data, we know that the time-to-purchase is significantly longer than this aims to be. If the customer wants to learn more about this specific clock, they have met a dead end.
Problem #2: The secondary CTA, which is “View More Styles Below” (seen below the main clock image), is too small and not immediately recognisable as a text link.
Showing customers the range of other designs is an important goal of the page, and therefore this CTA needs to be improved upon.
Updated Design
Solution:
Simplify primary CTA to encourage users to visit the Product Page to continue their research.
Redesign secondary CTA to be more prominent in the user’s line of sight, as well as more recognisable as a text link.
These changes reduce the cognitive load being imparted on the user by simplifying their options. As the users have just landed on the site, our strategy is to provide a top-level view of the products and the brand, while making it easy for the user to delve deeper if interested.
Iteration #3 - Carousel Redesign
Original Design
Problem #1: The carousel does not display the location artwork well enough.
Users need to be able to see the detail and recognise their local scene. This carousel makes that difficult as the clock view is too zoomed out.
Problem #2: The carousel needs a feature for those who do not see a location they recognise.
A goal of the page is to encourage users to participate in a vote to suggest new locations for future clocks. This carousel misses an opportunity to make users aware of the vote further down the page.
Problem #3: Misaligned Calls To Action
As with the Primary CTA at the top of the page, these CTAs do not align with the user journey. The customer is extremely unlikely to add a £495 product to cart based on a single image.
Updated Design
To view the working prototypes of the carousel, please click the links below:
In this updated design, I have addressed the issues in the original design with the following changes:
The main image is now a close-up of the artwork, but taking advantage of hover states on desktop to provide a whole clock view.
A card has been added at the end of the carousel to link users to the vote section.
The design is card-based, as this is responsive-friendly. With 75% of traffic coming through mobile, it was important to have a design that works well on all devices.
Added a progress bar to give feedback to users. This will be more important as new products are added and the carousel becomes longer.
Final Result
The page is just going through some final rounds of refining copy before it will be launched at the same time as a new product. When it has launched I will be able to analyse the impact the landing page has on Bramwell Brown’s engagement, as well as providing a link to the page for those interested!