Consultancy Services
Specialisms
Most engaging & Best-Designed DTC eCommerce brand websites
By Paul Rogers - 31 December, 2020
In this article, we look at the DTC eCommerce sites that are leading the way in design and innovation.
Direct-to-consumer eCommerce websites are on the rise. Whether adopting a multi-channel strategy or completely bypassing third party retailers and marketplaces, there has been a recent shift to find digital solutions due to global events. This is likely to continue to increase, with more well-backed, digital-savvy start-ups entering the space.
The benefits of a direct-to-consumer approach are numerous but crucially, they include a deeper understanding of your customers and their buying behaviour, greater control over product lifecycle and marketing, and most importantly the opportunity to create an experience that reflects your brand ethos, allowing brands to foster long-term relationships with their customers.
With many eCommerce platforms to choose from, infinite apps available, and the continuous advancement of technologies, brands have the opportunity to create an agile and innovative approach to their DTC website.
Below we have provided examples of engaging and well-designed eCommerce sites that have caught our attention.
Recess
Platform: Shopify
Why we love it:
Recess claims their beverages ‘help people feel calm, focused, and creative despite the world around them’, and their website has clearly been built to reflect this. With tranquil colours, large eye-catching product shots and hypnotising movement throughout all areas of the site, this website is a true reflection of the brand.
Their unique product carousel on the homepage features cutout imagery and a background colour change upon rollover. Each interaction has been well considered, from fruit appearing as you scroll through the navigation, to the can-for-a-cart icon which triggers a fizzing effect upon rollover.
Collection pages are taken to the next level with a clean design, a moving USP bar and hero imagery, and again more movement and effects as you scroll through the page.
The subscription option has multiple frequency options with a clear description on how to edit/amend the selected options. There is also an extended product range of ‘on brand’ accessories that complement the drinks, and no doubt increase the basket value considerably.
Their irreverent tone is captured perfectly not only in their direct language but in their decisions to develop their own rules when it comes to eCommerce design.
2. Mansur Gavriel
https://www.mansurgavriel.com/
Platform: Shopify
Why we love it:
Every design decision on Mansur Gavriel’s eCommerce site has been made to showcase their luxury leather goods to maximum effect. More simplistic in structure, the site allows for the brands’ stunning product photography to shine, with the homepage category cards, a great example of the imagery and subtle movement included.
The collection landing pages have a full-width layout, using every bit of space to create a cohesive look with minimal disruption to the product. Content blocks are utilised within product grids to add definition to their collections, and the ability to select a colourway upon rollover adds another useful effect, especially as the product card image updates accordingly.
The extensive monogram shop is a great upsell opportunity, with a clear and simple 4 stage personalisation process. A user can select from multiple font styles and colours to personalise their chosen bag and will see a preview of exactly what the end product will look like.
3. CDLP
Platform: Shopify
Why we love it:
A limited product range, combined with a predominantly monochrome colour palette, allows for a simple, elegant site structure highlighting CDLP’s product perfectly. As you progress through the site the simplicity of the design is complemented by the carefully curated inclusion of moving images and video in key content blocks.
Their minimalistic collection pages are interspersed with key feature blocks, demonstrating the key product USP’s without disrupting the user journey. Hover interactions, including stylized imagery and video, highlight their product in situ, enhancing CDLP's onsite brand experience.
The site is complemented by sleek dropdown navigation, in a contrasting yellow, reflecting the brand packaging on desktop, and amplified with a unique content slider.
4. Tylko
Platform: WordPress
Why we love it:
Tylko’s clean and organised brand values are clear throughout their site. Their innovative approach is present throughout the customer journey, providing clear informative content and available selections, to assist buyers in creating customised shelving for their homes.
Clean, structured landing pages use video-enabled content blocks to showcase product features. Clear product card designs also feature in the level 2 navigation on collection pages, which remain static as the product grid loads upon selection. Careful curation of the UGC throughout the site, from social posts to customer reviews, enhances the brand experience.
Innovative product pages feature a panel for product customisation, simplifying a complex process in just one PDP. To add to the experience, the images will update according to custom variations. Additionally, customers can download Tylko’s app and see the shelf in their space. This not only complements the user journey but should also reduce return levels.
5. Pangaia
Platform: Shopify
Why we love it:
As soon as you hit the homepage, Pangaia’s focus on environmental sustainability is clear. The navigation is simple and clean, yet still allows for customers to shop by size, colour and even ‘science’. The implementation of the content imagery is made especially effective by changing as a user hovers over different navigation options.
On the collection pages, the product grid features a full width, clean, minimalistic approach, with additional detail appearing upon hover, including a stock indicator, to minimise buyer frustration prior to landing on the product page.
The product pages are where this site truly shines, with a clearly designed hierarchy, including a sticky call to action bar, and an intriguing scroll through image experience on desktop. Moving elements, such as the impact/sustainability icons, are particularly engaging, as users scroll down through the PDP.
6. Stojo
Platform: Shopify
Why we love it:
Another beverage focused website with a clear focus on sustainability is Stojo. A clever design featuring motion, bold colours and attractive imagery, is used to communicate their brand message. As you follow the cup down through the homepage the scroll initiates visual demonstrations of the products key features.
The limited product range allows for a single product carousel/slider on the homepage that has a unique button design for scrolling through the available options. For a small product offering, their image-led navigation hits the mark.
Engaging product pages include unique scroll icons and bold background colour which change upon product selection. Moving elements such as a footprint message and full-width video demonstrating the cup's collapsible qualities, further enhance the page.
7. By Humankind
Platform: Shopify
Why we love it:
Through divine design, up-to-the-minute media and a considered UX, this eco-friendly personal care brand delivers their message flawlessly. Their homepage hero featuring a full-screen video sets the scene, and the minimal, navigation overlay continues the experience.
Particularly notable is the unique product page/collection page combination, allowing users to make their refinement decisions without back and forth navigation. Their mini bag adds another unique perspective to the shopping experience, especially the product imagery and recommendations.
By Humankind allow customers the option to subscribe to popular products and save, or they can choose to make a one-off purchase. Additionally, eco-conscious consumers can subscribe to plastic offsets, contributing to the removal of single use plastics.
8. Takecareof
Platform: Unknown
Why we love it:
Supplements provider Care/of, provide a very clear design and simplified path to purchase, including a considered product recommendation quiz design.
The homepage demonstrates what a well considered UX can achieve, providing information in an easily-read and engaging format; with icons, motion and relevant imagery supporting the story. The unique slides highlighting different stories are a particularly useful tool for telling the brands story.
The collection landing pages feature carefully designed product cards, and integrate category copy within the grid, creating a clean and focused experience. A myriad of alternative paths to purchase are available depending on a customer's health goals.
9. Plenaire
Platform: Shopify (headless)
Why we love it:
Skincare brand Plenaire, has paid particular attention to their scroll strategy across the site, to impress their users. As you move through collection landing pages , key selling points appear to cross the screen at just the right moment, and the moving elements, and images appear to expand and contract as you pass by.
The asymmetric layout of the collection pages looks as if designed for natural eye-tracking, and their use of large attractive imagery, further captures attention. The product page layout features an asymmetric design and key elements that are informative and engaging, including innovative image sliders to show product uses.
The mobile design echoes the ‘image first’ heavy design, but with reduced movement in the background for usability, the product page images are more active.
10. Haerfest
Platform: Shopify
Why we love it:
Eye-catching photography, a simple colour palette and a minimalistic design approach makes Haerfest’s online store a true representation of their products. As you travel through the site, the attention to detail on unique page transitions and loading screens is clear.
The collection landing pages feature a sleek, uncluttered design, with perfectly placed content blocks within the grid, using demonstrative videos to highlight their products' practical and premium features. Product pages also utilise clear video and images to showcase key information and highlight the quality of their product. The size guide on key products like the mask strap is also clear and informative and uniquely inline on the page.
The unique right hand navigation is simplistic and clean, and allows the page content to be clearly visible behind it on desktop.
11. Ever & Ever
Platform: Shopify
Why we love it:
Offering just two products, a still and sparkling water, Ever and Ever have beautifully crafted a site to clearly demonstrate their sustainability message. Clean, bold designs and animated elements highlight key selling points.
Their simple, yet bold navigation has visual options that move on hover over, alongside large font text options.
Particularly unique, their no scroll, product page features messaging in motion and cool CTA effects. A user can drag their cursor over the current selection of sparkling water, and replace it with the still water. Another added touch that will delight customers.
There is also a subscribe option on each product, with multiple delivery options that encourages the increased basket value and return purchase.
12. Parachute Home
https://www.parachutehome.com/
Platform: Shopify (headless)
Why we love it:
Premium homewares retailer Parachute, have created a seamless onsite shopping experience with an organised and minimalistic approach to design. An uncluttered homepage features a clean navigational hierarchy and recommendations, and the homepage hero video adds personality and drives connection with consumers.
Not always an easy category to merchandise, with various weights, sizes, seasons and colours; bedding is also likely to have different bundle options and various add-ons. Parachutes achieve a great experience by using clean attributes, recommendations and complete look technology, featuring sophisticated colour selection on product pages.
13. Brooklinen
Platform: Shopify (headless)
Why we love it:
Another homewares retailer who keeps their shopping experience simple with product pages that provides all the customisation in a clean, easy-to-navigate panel is Brooklinen. Their homepage content blocks use video and animation to shop their homewares in real spaces, a great way to create excitement for new home renovators.
Their product pages feature a combined colour and pattern selector that allows you to build your own bundle. Clean landing pages are complemented with inline, presented video content and curated UGC, showing the products in decorated interiors.
14. Go-To Skincare
Platform: Shopify
Why we love it:
Go-To Skincare is another retailer using colour and styling to enhance their eCommerce site. Their brand identity and values clearly communicated across all areas of the site. From bespoke product badging, premium imagery and animated brand value icons, Go-To Skincare doesn’t miss an opportunity to engage with their customers.
Their playful personality is also present through videos across the site, and content blocks. Their scrolling instagram story block, reflects their attention to the little details. Their dynamic, text scrolling banner on the blog page is a great example of simple design done well.
On the product page their split payment options are clearly demonstrated to encourage the sale, and remove any potential barriers to the CTA.
15. Everlane
Platform: Unknown
Why we love it:
Everlane, a retailer with a focus on ethical sourcing strategies and quality long-lasting fabrics, have created a website that engages the customer with their brand and products. Transparency on pricing and their sourcing is communicated across the site with well-designed infographics.
Their mobile first approach to navigation, with a bestsellers carousel, and mens and womens buttons that will change the navigation accordingly are particularly useful for the user journey.
Collection landing pages feature clear sub-navigation with circular imagery as well as text. Clean product page designs feature scrollable colour swatches, and size attributes, and a detailed dropdown on mobile.
Categories