Dr Martens – Redesign
Project goal:
Dr Martens is shifting towards a more premium market position, leading with boots, anchored in icons and innovation and centring its storytelling around the product.
Background:
*
The website hasn’t undergone a major redesign since launch
*
The upcoming front-end transformation offers an opportunity to make large-scale design changes and address inconsistencies
*
Though smaller changes have been efficient at increasing conversion, it's been a challenge to establish a working hierarchy with pre-existing elements
*
Bounce rate has remained consistently high and has been very challenging to improve despite the A/B tests we ran
*
Conversion-focused decisions have discouraged browsing behaviours and attracting more discount-only shoppers
*
The brand is aiming to escape this cycle through a more polished image and highlighting product craftsmanship
Project plan:
*
First draft created for PDP and PLP, user test against current design and refine using Baymard Institute best practices
*
Present to stakeholders and create components for a new design system
*
Expand designs to core pages with ongoing user testing
*
Build as part of the new front-end framework and use as basis of a new iterative cycle for the CRO workstream
General design approach:
*
Created after significant benchmark research
*
Checked through past AB testing and kept the biggest winners to aid conversion
*
Used feedback from the past 3 years of user research, where users often found the website "loud", "jarring" and "too dark"
PDP design:
*
Header
*
Kept open nav design that saw 5.4% increase in conversion in testing
*
Changed to white to keep the header from competing with the page content
*
Swapped the bouncing ball logo to the logotype to increase legibility and to fit the horizontal space better
*
Image carousel
*
Reduced height to allow for more content in the first viewport
*
Encouraging users to scroll through the carousel by having more images peeking out
*
Simplified carousel UI, removed visual progress indicator (relying on the number alone) and the arrows
*
Moved the add to wishlist icon to a more conventional placement, on the image
*
Changed the order so there's a video in second position, further encouraging engagement with the carousel
*
Product name and reviews
*
Split product names (into brand title and descriptive subtitle) have been tested and saw a 3.9% increase in revenue / session sitewide
*
Kept review stars as it's shown to have a positive impact on add to bag rate
*
Size selection
*
Kept the size tiles, size dropdown saw a 2% drop in add to bag rate, requires an extra tap and availability isn't immediately obvious to the user
*
Removed cross-through from out of stock sizes and added a message to encourage users to check availability in-store or sign up for back in stock notifications
*
Add to bag: changed to full-width by moving wishlist onto the image and added the price here to allow users to consider it at the right stage of their journey
*
Details: changed to an accordion-based layout more in-line with benchmark and surfacing product information that was hidden before (materials, care instructions)
*
Content
*
Moved AR and 3D view to cards in this section to support browsing
*
Added cards that can be self-contained or opened for more information where the business can add product stories
*
Created interactive scroll behaviour with stacking to save space and reveal content as the user shows intent
*
Video: swapped to a vertical layout for optimised viewing on mobile
*
Upsell / cross-sell: preferred section for onwards navigation, high revenue and conversion / tap
*
Reviews: though kept it as part of the PDP to give credibility to company claims, reduced importance more in-line with premium positioning
*
Footer
*
Increased visibility of email sign-up
*
Added store finder to support omni-channel journeys
*
Updated UI to a more premium feel and lighter colour
PLP design:
*
Hero section: added image for a more premium feel, added preview to copy on mobile and kept the highly engaging sub-category navigation
*
Item count & filters: filters re-positioned in high visibility area
*
Product tile
*
Kept recently tested, tidier swatch display
*
Removed social proofing and amended add to bag button to aid brand image
*
Drastically reduced the number of product flags to help them actually stand out
*
Kept review stars which have proven to increase click-through to PDP
*
Content block: updated UI
*
Product highlight: added opportunity for a highlighted product to break-up the grid and encourage sell-through with merchandising
*
Pagination and upsell / cross-sell: kept both, for UX and SEO, number of products on a page recently tested