A modern data stack for Douglas
To be successful in today’s e-commerce world, a scalable business intelligence solution for product, marketing and customer analysis is essential. Recognising this, Douglas – Europe’s leading platform for premium beauty and health products – turned to DEPT® to act as a service provider, enabler and partner in the development of a central data platform.
Data rows per month from 30+ data sources
The starting position
When DEPT®’s data team first started working with Douglas two years ago, the brand had an evolved IT infrastructure with a database that was difficult to scale, slow processes and static tools. It needed an overhaul, to ensure Douglas could benefit from a modern, fast, scalable and flexible data stack.
As the performance capacity of the existing system was limited, certain analyses could not be carried out to the desired extent and depth. In addition, there was an enormous manual effort in reporting because data from different countries and companies had to be merged. In particular, analyses that required a combination of data (e.g. tracking and marketing data), from different tools took a long time before insights could be gained.
The design of a modern data stack
Together with Douglas, we were able to identify optimisation potential in three key areas:
As Douglas’ own IT resources for new integrations were limited, we recommended Fivetran. This software allows data to be extracted from various sources and loaded into data warehouses. Today, Douglas is Fivetran’s largest customer in Europe.
Data storage and transformation
Before Douglas turned to us, they had already chosen Snowflake cloud data platform, an ideal fit for Douglas’ challenges and objectives. For data transformation, we relied on our own SQL Runner.
Data activation and visualisation
We conducted a thorough comparison of visualisation tools across eleven categories and over 50 requirements, as defined by Douglas. Tableau was identified as the best solution, and is now gradually being established by Douglas as a central, self-service tool.
The data stack in action
Thanks to the use of the above tools, data management for Douglas is now significantly easier, more efficient and more effective.
The days of manually combining dozens of Excel files to produce a simple sales report are over. We have been able to make a significant contribution to ensuring that data from all Douglas subsidiaries is now available in the same format in one central location, and that metrics are standardised across the company.
In the past, a great deal of manual effort was required to produce Excel reports that were sent to the board on a weekly basis. Now, the data for the reports is processed fully automatically and made available in the visualisation tool, so that the C-level at Douglas has the latest reports every morning before they even have their first coffee.
Basis for self-service
Thanks to the newly created data platform, the teams at Douglas are for the first time able to carry out tool-supported, independent data analyses on a large scale. Standardised KPIs, Tableau training, and the connection of new data sources enable them to easily find the data they need and visualise it. As a result, reports can now be created independently by employees and the workload of Douglas’ IT department is reduced.
Planning & Forecasting
In close cooperation with Douglas, data from Snowflake is also used in forecasting tools for planning, for example with regard to inventory and pricing. But that’s not all; in order to enable automated, data-driven decisions and to further increase the degree of independence of the teams in the future, we are currently working with selected Douglas departments to prepare a business case for the use of reverse ETL solutions such as Hightouch or Census.
Ready for a data-driven, digital future
Thanks to the modern data stack, Douglas saves the time of around a full-time position, according to its own calculations. With data integration via Fivetran, data storage via Snowflake on Azure, DEPT®’s own SQL Runner for data transformation, and Tableau as a visualisation solution, Douglas has reached a first major milestone in digitalisation. We are pleased to be able to continue to accompany Douglas on the path to a data-driven, digital future.
Thanks to its high level of technological expertise, DEPT® is the ideal partner for the modernisation of our data stack. The implemented technology is not an end in itself, but optimally aligned with our business needs.
Jonas Rashedi, Director of Data Intelligence & Technologies, Douglas
Global Lead of Data Practice
A brand new design for GANT
When our design team first sat down with GANT, the fashion brand had defined a new, transitional strategy: it was time to move towards a more modern brand feel and start appealing to a younger audience. With this in mind, GANT asked DEPT® to create a new website. What started as website design steadily grew into a whole new visual identity for all of GANT’s digital touchpoints.
Capturing the brand’s core values
We started from scratch, exploring how to incorporate GANT’s four core values — creativity, community, courage and confidence — into the design. Setting GANT apart from other fashion brands with an e-commerce solution was crucial. By translating confidence and courage into a bold, no-nonsense design with prominent images and strong colours, we created a visual expression of the brand’s values. Similarly, instead of showing off the logo, we dared to be different and decided to tone it down.
In addition to the brand’s values, we needed to make sure that GANT’s unique style also came across clearly in the new design.
Preppy fashion, with its collegiate roots and characteristic neat apparel, was a key source of inspiration for GANT, and college students embracing the style would often combine classic outfits with bold details or statement pieces to stand out from the crowd. Tapping into this idea, we wanted to play with contrasts to create the combination of classic and bold inherent to the brand’s identity.
The new design
A unique branded experience on a Salesforce platform
GANT’s site had already been migrated to Salesforce Commerce Cloud (SFCC) in the summer of 2020 as phase one in the transformation project. With this migration, the brand moved beyond a simple e-commerce solution, and it was interesting to see how we could build on the large, standard platform to create a unique brand experience.
Making the most of the functionalities the Salesforce platform offers, we collaborated closely with the UX team at GANT to make informed design decisions based on data and user tests. As a result, the brand identity shines through in every phase of the customer journey; even in the image-sparse checkout flow.
The tech transformation
A new visual identity
Working within a short time frame and collaborating closely with GANT, we have delivered a brand new site for the fashion brand. And website design is just the beginning. The new design has essentially become the basis of GANT’s overall visual identity, adding an edge that appeals to a younger target audience. Together we’ve laid out the ground rules, and now it’s time to start expanding.
Experience the website
Creative Director & Head of Design
Rasmus Keller Jansen
SEO for a retail brand in 11 markets
As the leading online retailer of perfume and cosmetics in the European market, Douglas‘ goals are clear: to consolidate its top position and to be the largest marketplace for beauty and lifestyle in the online sector by 2030. From 2014 to 2019, Douglas frequently relied on the support of our SEO experts for selected projects. Since 2019, the retailer and DEPT® have been working closely together on the structural, technical, and content-related optimisation of their ecommerce shops, as well as on outreach activities in numerous countries.
Central management, international market
At Douglas, SEO activities are managed from the headquarters in Düsseldorf, Germany. That means that the in-house team is responsible for a large number of websites with different requirements, such as the technical platform, maintenance of SEO optimisations, ongoing competitor analysis and budget allocation.
In order to standardise and simplify processes while taking into account the individual market’s characteristics, Douglas was looking for a competent and trustworthy partner who also had experience in managing large, international SEO projects and could offer services in many languages.
At the beginning of the collaboration, organic search was the main concern when looking at the different traffic channels. The challenge was to identify and address the greatest SEO potential for a long-term increase in performance for each country, leading to an increase in website traffic.
In addition, cross-market synergies were to be created for the 11 markets in which Douglas operates.
At a more detailed level, our SEO team had the following targets:
- Breake down the silos between SEO, content, tech, UX/UI and data;
- Increase brand awareness to rank ahead of the biggest competitors for important keywords;
- Optimise the webshop structure as well as the crawlability and indexability of the websites;
- Increase Douglas’ presence in informational keyword search results;
- Support the upcoming relaunch of a new technical platform;
- Improve the user experience;
- Improve the composition and quality of the backlink profile.
Audits, analyses, conclusions
To achieve these ambitious goals, we started by carrying out technical SEO and content audits, logfile, page speed and competition analyses, as well as structural analyses of the brand and of the category tree. These audits and analyses helped define the status quo. They were also useful to identify technical optimisation opportunities and to expand the keyword sets for a more targeted approach to users.
Armed with this comprehensive data set, we developed a country-specific strategy, which included prioritisation of the necessary actions according to budget, competition, the platform used by each country and so on.
From quick wins to comprehensive actions
It didn’t take long for the first results to appear, as we started by optimising
on-page and off-page SEO for quick wins.
After that, we implemented comprehensive actions to improve performance sustainably and in the long term. We optimised and expanded the category tree, made strategic adjustments to internal linking, drastically improved the index hygiene and conducted active outreach – all of these actions took place across the 11 markets where Douglas is active in Europe.
To top it all off, an automated website monitoring system was set up, enabling Douglas to quickly identify and fix any potential bugs before they become a problem. Last but not least, Douglas and our SEO experts relaunched a new technical platform.
Focus on the users
In addition to the different technical measures outlined above, another focus area was, of course, the users.
Our content teams concentrated on creating and/or optimising user-centred content for category, brand and product pages in order to better exploit the ranking potential.
The overall strategy consisted of creating high-quality, informational content to expand the brand’s visibility in the respective areas and consolidate Douglas’ standing as an absolute expert in the Beauty & Lifestyle industry.
We illustrated some of the content pieces with matching infographics, always taking into account the look and feel of the brand.
Douglas’ SEO leads in each country coordinate with a project lead, which, in turn, answer to the overarching tech and strategy team. These teams focus on identifying and creating cross-market synergies in the areas of project management, content, technology, outreach and strategy.
Douglas also relies on DEPT®’s expertise in other disciplines, so there is often a knowledge exchange between the SEO, Content, Outreach, UX/UI and Data teams. The internal collaboration and intercompany projects ensure that we create the best possible experience for Douglas and its customers.
In the Copenhagen office, DEPT®’s SEO experts pitch in with content creation, copywriting and outreach for local markets. We create and optimise content for Douglas’ Portuguese and Swiss website (though only in French for the latter). Our goal in these markets is to build internal links and optimise the keyword profile, while providing useful information to the customer. On the Danish and Belgian websites, the Copenhagen team works on external link building and outreach, aiming at optimal page relevance for the customers and ultimately also for SERPs.
From silos to synergies – this was one of the success factors in pushing SEO at Douglas. DEPT® was and is a reliable partner in this respect. For optimisations in tech, on-page and off-page SEO, I can always rely on DEPT®’s expertise and high quality work.
Jakobus Müller, Head of SEO, Douglas
SEO Consulting Lead
HYPEWEAR by ABOUT YOU – the first online shop for digital fashion
ABOUT YOU is one of the fastest growing e-commerce companies and one of the leading online fashion retailers in Europe, driving innovative projects and seeing itself as an industry pioneer in digital fashion. ABOUT YOU approached DEPT® with the vision to create an online shop for digital fashion. The aim: making digital fashion items accessible to the general public. DEPT® supported end-to-end, as both consultant and implementation partner.
Virtual Fashion – unlimited possibilities
First, the HYPEWEAR brand was created and the CI designed, both in close coordination with ABOUT YOU. DEPT® then conceptualized and developed the HYPEWEAR digital fashion online shop based on the agency’s own Algomart solution. As a last step, DEPT® created a teaser video for the high-profile launch of HYPEWEAR.
In addition to the fashion e-commerce business, ABOUT YOU aims to conquer the virtual fashion space and offer customers a wide variety of outfits. Virtual fashion allows creators to design pieces that are not wearable in real life or could not exist like this such as a jacket made of virtual flowers, a dress made of dancing tulle elements, or other unusual voluminous highlight pieces. There are different collections available in the HYPEWEAR shop; some of them are rare and limited in number, others are available more often. Customers have the opportunity to express themselves in a completely new way and to present themselves digitally; this is particularly relevant for Gen Z with regard to the fluid understanding of their identity.
It’s all ABOUT YOU
With the new platform for digital fashion, there are no physical limits to the customers’ own self-expression. HYPEWEAR is a first mover to offer digital fashion and, according to its motto ‘From Tech to Human’, the items are not only affordable for digital fashion fans, but also accessible without crypto knowledge. This makes the platform one of the pioneers in the market.
Fast First Mover – fast, simple and intuitive
The aim was to bring a first MVP of the online shop live in the shortest possible time to establish HYPEWEAR as the one-stop store for digital fashion items. The user journey was to be designed as simple and intuitive as possible, even for ‘non-web3 natives’, in order not to exclude anyone and to ensure that every user can purchase digital fashion items. In addition, brands should be able to sell their 3D fashion via HYPEWEAR to provide a large selection of different fashion pieces on the platform for the target group.
The metaverse has opened up a new, exciting world for companies and the fashion industry, which we at ABOUT YOU want to shape. With HYPEWEAR, we want to become the destination for digital fashion and the mainstream wardrobe of the metaverse. For this, we can rely on DEPT® as a strong partner in Web3 & Crypto.
Tarek Müller, co-founder and co-CEO, ABOUT YOU
An online shop for digital fashion based on the Algorand Blockchain
The selection of the appropriate blockchain was a key part of the project. The main focus was on ensuring that it was ecologically sustainable, fast, and had low processing fees (i.e. fees for mining and transferring the NFTs). DEPT® and ABOUT YOU selected Algorand. This blockchain has a minimal CO2 footprint and enables fast transactions between marketplace and customers.
Through the integrated CMS in the online store, ABOUT YOU can create and upload as many digital fashion items as desired. The occurring processing fees on Algorand are minor.
Thanks to the integration of custodial wallets, the creation of the crypto wallet in which the items are stored is handled directly for the customer in the registration process. This prevents a break in the customer journey, which would be associated with the time-consuming and complicated creation of crypto wallets and the subsequent connection in the store. Even Web3-inexperienced users can receive their digital fashion pieces with ease.
In addition to the 3D model of the respective digital fashion item and the NFT, customers also receive an edited photo of themselves onto which the virtual fashion piece is mapped. This step also fits perfectly into the entire customer journey and is kept as simple as possible. Customers can easily manage their digital fashion items in their profile and use the edited photos for social media.
Within just a few months, DEPT® and ABOUT YOU have created the first online store for digital fashion. HYPEWEAR pushes the boundaries of conventional fashion with three-dimensional fashion pieces. The platform acts as a digital milestone in this field, providing the impulse for many more future-forward, virtual projects.
The metaverse will continue to gain importance in the upcoming years and we see great potential here, which we want to explore together with the experts of DEPT®: We strongly believe in a transition phase of augmented reality, where your physical self presents digital fashion on social media, breaking down the boundaries of the previous fashion world and reaching an even larger audience.
Marius Bingener, Teamlead Content Development, ABOUT YOU
Visit the HYPEWEAR online shop
Director Marketing & Business Development
A personalised Ralph Lauren gifting experience
Luxury fashion brand Ralph Lauren was founded in 1967 and is a global leader in the design, marketing, and distribution of premium lifestyle products, including apparel, accessories, home furnishings, and other licensed product categories. For over five decades, their long-standing reputation and distinctive image have been consistently developed across an expanding number of products, brands, sales channels, and international markets.
For Holiday season 2021 and beyond, Ralph Lauren challenged BYTE/DEPT® to find a way to elevate their existing gifting experience within the digital space.
The challenge: developing a strong bond
The aim was to provide users with a more immersive and personalised method of picking the perfect gift, matching their interests with compatible products available on the Ralph Lauren website. They wanted to develop a strong bond between the brand identity of Ralph Lauren, the digital assistant, and the customer, breaking any barriers of communication and supercharging the journey to finding the perfect gift.
This was coupled with a desire to be pioneers in cutting-edge communications with customers, tapping into emerging, innovative mechanics to bring the gift experience to life.
The solution: a gifting chatbot
Combining data-driven insights from previous gifting chatbots with innovative Instagram platform features, we built one of the first branded Instagram chatbots available in the industry and worldwide.
We optimised the conversation structure based on data collected from the Messenger and WhatsApp gifting bots we’ve previously run, to ensure the best experience for users throughout the Holiday season and beyond. We know how the customers behave and what they like when shopping for gifts, and have taken that to the next level on Instagram.
A personalised journey
The conversation takes you through a personalised journey towards discovering the perfect gift – just like you would in Ralph Lauren’s flagship store on London’s Bond Street.
- Tell us who you’re shopping for and their style
- Match their style with the perfect gift using bespoke Taste Profiles
- Refine your search with dynamic filters (such as price or outerwear) that remember your search history and tailor recommendations accordingly
- NLP functionality that would take you to specific product pages when certain trigger words were typed e.g. ‘jeans’
- Get bespoke product recommendations from a dynamic product feed
We made use of powerful discovery features including automated replies to story @mentions, and DMs to drive new conversations cost effectively. We also built a series of creative assets that were channelled into Ralph Lauren’s paid campaigns to drive traffic to the bot.
One of the first branded Instagram chatbots in the world
Our gifting chatbot saw excellent results in its first few months.
Average of 12k monthly users over Dec 21 – Mar 22
We’ve seen very healthy traffic into the bot, with 3.5x more users on Instagram compared to Messenger and WhatsApp combined.
82% organic traffic
Over 80% of users are introduced to the bot organically, making it very efficient compared to paid media campaigns. Essentially high quality traffic at zero media spend.
6 minutes average time spent on the bot
This is 3x higher than the average time spent on our other gifting bots, showing that users are engaging well with the bot experience.
2.7% click through rate to website
Almost 3% of users that land on the chatbot visit the website and show purchase intent.
0.4% users handed over to Customer Services
Only 0.4% of users required a handover to a live Customer Service agent. This is one of the lowest rates we’ve seen in the industry.
With the chatbot now successfully rolled out in 4 markets (UK, IT, DE and FR) across 4 languages, we’re looking into further expansion across more global Ralph Lauren markets for 2022 and beyond.
Lead Technology Planner at BYTE/DEPT®
Design-it-yourself with FREITAG F-Cut
The sustainable Swiss brand FREITAG, known for their bags and accessories made from used truck tarpaulins, has always stood for individualism. With the new digital tool F-Cut, FREITAG now offers its customers the opportunity to design their very own super unique items. The idea behind it was born 20 years ago – and comes from a DEPT® employee.
Desire for more uniqueness
Each of the approximately 300,000 FREITAG bags and accessories produced each year is unique. A large proportion is manufactured in Zurich, where the truck tarpaulins are dismantled and washed by FREITAG employees before the bag designers cut out the best motifs with their cutter knives and templates and these are then processed into bags.
So far, so good. But more and more often, customers inquire in the FREITAG stores whether a specific bag is also available in another color, with this or that motif. The bag makers have taken these requests for (even) more uniqueness to heart – and fell back on the diploma thesis in which DEPT® employee Severin Klaus invented, designed and programmed the first F-Cut for FREITAG 20 years ago.
Democratisation of bag design
The DEPT® team in Switzerland has been working with FREITAG since 2020 and has, among other things, implemented a bag swapping campaign on Tinder for the brand. Now FREITAG approached us to awaken the online cutting table F-Cut from its slumber together with bag and UX designers, logisticians and many other experts.
The following positioning and visions were defined in a preliminary project:
Democratisation of bag design
Every interested customer should have the opportunity to design their own unique bag according to their own taste, beyond all design guidelines.
Bringing FREITAG’s values to life
Sustainability and individualism come first. The FREITAG Sweat-Yourself-Shops are to be transported from the physical to the digital world by means of F-Cut.
Revival of a classic
The new F-Cut is to be as good as the multiple award-winning 20-year-old original, but even more user-friendly and contemporary.
Linking the offline world with the online world
F-Cut offers a unique combination of rough & real materials with digital perfection and a smooth product configuration – no matter on which device, including 3D preview in real time. In this way, the offline world of FREITAG is linked to the online world thanks to a unique experience.
For F-Cut, DEPT® not only implemented the UX, UI and the 3D preview, but also the back- and frontend. The visual identity and the texts were created by FREITAG.
From a technical perspective, F-Cut is a web application that combines various systems. On the one hand, there is of course the F-Cut app – the GUI – in which FREITAG customers configure their bags. Then there is the F-Cut backend with a headless CMS, which primarily provides a database and communicates via API with the checkout (FREITAG online store) and of course the F-Cut app. In addition, there are further admin interfaces with everyday tarpaulin management functions (configuration, orders, etc.) and tarpaulin upload, editor and export (DXF) for production.
Bag dreams come true
For the first release, the focus was on the KISS principle (Keep It Simple, Stupid): we limited ourselves to one bag type, the Messenger Bag F712 DRAGNET, which can be designed using four virtual templates from a selection of 20-50 different truck tarps. The designable bag types could be expanded in the future or the bag type could change at fixed intervals.
In order to ensure fairness and equality, new tarpaulins are silently added to the system to exclude disputes about the “good” tarpaulin pieces. Another important aspect for FREITAG was the balance between maximum design freedom and sustainability: leftover tarpaulins are used for accessory products.
Already before the go-live, F-Cut triggered enthusiasm both among the DEPT® and FREITAG teams. Several further development projects are already planned: more products and features are to follow. 20 years after the birth of the idea, F-Cut has finally awoken from its slumber and will continue to grow steadily.
Over 20 years ago, I got to implement F-Cut as a student one-man show – to rethink this project now, with the support of a fantastic team, both on the DEPT® side and on the customer side, while exploiting the possibilities of today’s technology, is a great privilege.
Severin Klaus, Tech Director, DEPT®
Building a modern shopping experience for C&A
C&A is one of the leading fashion companies in Europe, with over 1,300 stores and 25,000 employees across 18 countries. Every day, over 2 million customers flock to its physical stores, or visit its online site looking for high-quality fashion at low prices. C&A turned to DEPT® to review and refresh its technical architecture in line with its extensive rebrand.
Flexibility and scalability – key factors in a digital world
The collaboration between C&A and DEPT® began in mid-2020. Initially, we were tasked with maintaining and further developing the front-end of the previous online store. However, the monolithic e-commerce platform it was built upon was unfortunately restricting the retailer’s digital growth. In today’s digital world where user expectations, trends, technology, and broader market factors change so quickly, a flexible and scalable system is key for companies who want to act instead of react.
From a monolithic platform to a headless microservice architecture
C&A needed a customer experience platform to act as its central digital touchpoint and support omnichannel consumer journeys to ensure a seamless shopping experience. The retailer had already developed an innovative architecture concept, and planned to replace its legacy platform with an edge-based, headless microservice architecture with SPA front end. Together with C&A’s in house teams, DEPT®:
- developed an agile product strategy and roadmap;
- set up a cross-product design system;
- developed new front- and backend components;
- implemented a new, modern technical architecture.
Product strategy and roadmap
To effectively pursue the goals of C&A’s digital strategy, as well as the overarching business and brand strategy, DEPT® worked with C&A’s Product and UX team to develop a medium-term, agile product strategy for the new online store.
We first developed data-based customer value propositions for the target groups of the online store. We mapped out an ambitious Webshop Vision Statement 2024 as a landmark for the product team. Together with C&A, we set strategic milestones and defined associated key results, to ensure the online store’s success is continuously measured and can be made visible to key stakeholders at any time.
To bring the online store strategy to life, we set up an agile workflow that leads directly to a dynamic, strategic product discovery and roadmap. Since expectations and impulses around digital products change at lightning speed, the online store will be strategically reviewed in regular alignments in the future.
Collaboration and process
From the very beginning, DEPT® established a broad collaboration with various stakeholders at C&A – from brand and marketing teams to IT and research units. This was an important basis for the success of the project, as it enabled a common understanding of how brand purpose and brand value propositions could be translated into the digital realm. Possible solutions based on consumer insights were developed with the help of collaborative ideation and co-creation sessions, and the results were tested using interactive prototypes. In order to routinely generate ideas for new functions and services in the future, the collaboration between the C&A user research team and the product managers was integrated and intensified – a new power force that will not only further develop the online store in a user-centric manner but also make it more innovative.
Architecture and technology
The technical solution conceived by C&A was further elaborated and implemented together with DEPT® to create a microservice approach. This scalable and flexible infrastructure enables optimal time-to-market performance, and enables personalised offers, content, and services to be delivered to the users. At the same time, the solution can grow seamlessly with future requirements.
Due to the complexity of the project and the associated complete renewal of the architecture, the development of the new online store was divided into several stages. Stage 1 included the redevelopment of the store frontend for the customer journey up to the shopping cart, as well as the introduction of a new backend. Both components are hosted “on the edge” on a high-performance and scalable serverless infrastructure from Cloudflare. The generation and delivery of content to users is done via a worldwide CDN (Content Delivery Network), with thousands of nodes.
A new, modern headless CMS became the central tool for content maintenance across multiple channels such as the online store and the C&A app. Because the backend and commerce engine remained unchanged in Stage 1, interfaces to the legacy system based on GraphQL were developed in collaboration with software company novomind. This enables the parallel operation of old and new technology, and conducts ongoing A/B tests for 10% of the users. The connection of these APIs and all other third party systems like Reco-Engine, PIM, etc, takes place via a newly developed gateway, which provides the data in a consolidated form to the frontend; a modern and server-side rendered single page application based on React.
Product design, user experience and content
The entire user journey through to checkout was redesigned. A comprehensive set of content modules provides space for engaging, inspiring content that embodies freshness and modernity. Large-scale images and strong portraits combined with close-ups create an emotional connection, while striking typography succinctly brings user-relevant content to the point.
The header is now cleaner and clearer; there is a new navigation concept for the mobile and the desktop versions. New and more balanced product listings provide a better overview and support the user to make an informed buying decision.
Easy-to-understand labels and a focus on sustainability communicate the brand promise and good value for money. A user-friendly filter gives customers the most important options directly at their fingertips. The products on the details page now have a new arrangement, with a clearer buy box and integrated size advice, helping to underline the modern look and feel of the new platform.
The design system as the single source of truth
Built from scratch, the new C&A design system is a living digital ecosystem that grows and changes in symbiosis with the e-com products. It enables teams to develop a consistent experience for users as the new single source of truth for a common digital language. This increases efficiency and strengthens cross-functional collaboration, even for external partners. In a collaborative approach, our product design team worked closely with the client to develop and define the overarching guidelines such as digital branding basics and content principles. Shop-specific foundations, components and UX patterns are provided with guidelines and numerous best practices to offer the best possible orientation and guidance for a consistent experience.
Together with DEPT®, the strong partner at our side, we have built a state-of-the-art webshop. The new platform fulfils the wishes of our customers, reflects the modernity of our brand and forms the basis for our ambitious growth targets.
Ulrike Otto, Head of Digital Experience, C&A
A branded commerce experience
Patagonia is a family-owned apparel and outdoor sporting goods outfitter, rooted in sustainability. As a leader in eco-friendly business models, they’ve paved the way for others to reimagine their practices with sustainability in mind. For Patagonia’s flagship experience, we were tasked with crafting a design solution that brought its massive product and content library to life in a simple yet insightful way. For a brand that truly lives its values, it was vital that the user experience echo that—meaning that our challenge was to create a digital shopping experience that tells a brand story at every touchpoint.
Being no stranger to storytelling, Patagonia has always maintained a strong voice. Our approach was to elevate this voice and bring it to life in a clear, simple execution while striking a balance between culture, business, and the environment. One that begs consumers to consider the impact of their choices—right down to the clothes they wear. The reimagined eCommerce platform serves as a brand hub for both activism and content, through a cohesive digital style guide, UX principles, and a consistent narrative. The experience invokes human emotion and rational understanding and is entirely driven by the brand’s mission. Most importantly, it serves both function and storytelling by not only selling clothes but transforming value systems.
This project called for a deeply collaborative process—one that demanded a unique agency-client partnership. We quickly embedded the Patagonia design team into our San Diego HQ and worked in tandem from concept to completion. This set the foundation for a longstanding, successful relationship that extends beyond the traditional boundaries of agency-client servicing.
Our team spearheaded the broader user experience while closely consulting with the in-house team at Patagonia on art direction, design systems, user testing and scripting. As the project progressed, we were given an additional opportunity to own the visual and strategic redesign of Patagonia’s brand initiative, The Footprint Chronicles. In doing so, we achieved a simple, cohesive design system that complemented the larger site.
Navigation & information architecture
A new navigation system considers the full scope of the consumer journey—from initial interaction to finding exactly what they’re looking for. We transformed the experience by organizing content in a clear, logical way, and integrating relevant stories when appropriate. This gives products more context while seamlessly injecting the brand voice throughout the entire journey.
The new navigation prioritizes the overall design’s larger goal for product and purpose-led storytelling through a simple curation strategy. An extensive library of cultural initiatives like Patagonia Action Works, The Footprint Chronicles, and more are properly showcased for easy discovery.
To maintain the simplicity of our design, we needed a powerful filtration tool that could optimize a complex product catalog. The end result was a floating, contextually aware action button that becomes the most prominent prompt on any page. This responsive UX pattern is designed for approachability and progression and successfully helps users browse.
It was essential that this experience was personalized and always relevant to the consumer. Our goal was to ultimately guide users to the best product for their needs in one simple flow. By implementing an in-line Q&A and product comparison overlay, we were able to help customers decide which product is right for them, saving them the hassle of toggling between product detail pages. As a result, users are directly routed through the sales funnel in one seamless UX flow.
The delicate balance between purpose and product truly came to life throughout our overall content strategy for this redesign. We set out to create a central system that could not only serve as a shopping platform but a brand initiative as well. In doing so, we were able to weave Patagonia’s passion and purpose right into each product story and keep consumers engaged in the brand, even if they were just looking to shop.
Since the launch of Patagonia mobile revenues have grown by over 25%
The delicate balance between product and purpose was the driving force behind our entire design system. Focus, clarity, and simplicity became our guiding UX principles, which allowed us to help Patagonia tell compelling stories—while maintaining both emotional feeling and rational understanding. We set out to strip away any excess that did not support our larger goal of one, centralized digital experience.
Constant collaboration between Patagonia’s team and ours—both designers and developers—resulted in a refined digital style guide, with a technical solution to support it. Each element of the redesigned system, from the homepage to navigation to our new product filtering system, was built into the style guide to the highest fidelity. As the project progressed, our development team was embedded into Patagonia’s tech team to offer seamless support in building out The Footprint Chronicles and Patagonia.com. From this, we built an intuitive content model within the Salesforce Commerce Cloud, while our frontend efforts produced a highly interactive site with meticulously rendered motion to tell The Footprint Chronicle story.
The Footprint Chronicles – What started as a partnership to reimagine a digital storefront soon became a collaborative consulting engagement. Our team was asked to help revive one of Patagonia’s transparency-driven brand initiatives—The Footprint Chronicles. This story of sustainability needed to be told in more than one place, so we developed a system that would surface it in the shopping experience. An informative card structure highlights key details about a product’s carbon footprint to educate the consumer and drive brand purpose, perspective, and conversion.
Give people pause
In an effort to shift the consumers’ mindset, we used product detail pages as an opportunity to invite a bigger brand purpose. By gently educating shoppers on how products are made and the impact it has on the planet, we’re able to give them a moment to pause and consider their habits. In doing so, we can convert product seekers into purpose-driven shoppers, while telling meaningful product stories.
An immersive story
Our goal with The Footprint Chronicles was to first build empathy with customers, then drive action. Our content strategy and component design allowed us to tell rich, dynamic stories through interactive content that allows users to explore and learn. The flexibility of this design lets us not only educate consumers about the brand mission but impacts real change in the cultural mindset.
A call to action
Our overall strategy and goal for The Footprint Chronicles culminates into one simple storytelling structure. We start with why each aspect of our mission is important—why these points need to be made and stories be told. Consumers are then given an honest explanation of where we stand in this journey to make and see change. Finally, the brand’s commitment to what’s next. Where does Patagonia progress from here and what can consumers and every brand do to play a role in this shift.
Experience the website
Webby Award – Fashion & Beauty 2021
Webby Award – People’s Voice Winner 2021
Head of Marketing US
Taking a retail giant into the world of TikTok
ASOS is a leading online retailer for fashion-loving 20-somethings around the world, but staying ahead of ever-increasing competition for an ever-changing and savvy demographic means a constant need to innovate. And then came Covid-19, taking away all those special occasions young shoppers would regularly hit up ASOS for new clothes anyway.
ASOS is the market leader in the UK but a challenger brand in the USA. In fact in the American market there’s debate over how to even pronounce the brand name. For the record it’s, ”Ay like in play then sauce” – which we started off by including in our TikTok bio. With “sauce” being a youth expression for great outfit this then gave the heart of our TikTok challenge, “show us your A-sauce, B-sauce, C-sauce” i.e. your three best looks. Putting our brand name right, in a non-obtrusive but clear way, at the heart of doing what young people loved, showing off their new threads. Now we just needed to enable them to do this in a creative, brand-friendly way.
TikTok is a rare “sound on” channel, known for breaking some of today’s biggest hits, so we went “sound first” – crafting a bespoke track with KARM that gave the platform’s legion of creators a beat to cut their outfit changes to. In addition, we created an interactive “branded effect” that allowed creators to transition between outfits with hand actions (peace sign and hand palm) and flair. To get people participating we launched the “hashtag challenge” by working with 28 popular U.K. and U.S. Creators, such as @abbyrartistry, @estare, @elmo, and @lorengray, to kick off the challenge and provide inspiration for users to follow while also building the credibility of ASOS’ brand presence on the platform.
Users taking part
Globally, the campaign recorded over 1.2 billion video views in just 6 days, with 488,000 videos created and 167,000 users taking part, all of which exceeded expectations. On top of that, the creative achieved an engagement rate of 15.79%, well above benchmarks. ASOS commissioned a brand lift study for the campaign, and the results were also very impressive. The campaign achieved a 25% increase in aided brand awareness and a 10% increase in brand association with being “trendy.” Ad recall also saw a 50% increase.
Head of Marketing, Europe
A unique Web3 experience for H&Mbeyond
H&Mbeyond is the innovation hub of the well-known Swedish fashion company H&M Group. Together with startups and innovators, its team drives forward future-oriented projects. After speaking at DEPT®’s 2021 Meta Festival, Head of H&Mbeyond, Oliver Lange, approached us to create the first-of-its-kind, Metaverse project for the H&M brand: the Virtual Showroom.
A central point for meaningful exchanges
In keeping with the current zeitgeist, H&Mbeyond approached us with the idea of expanding H&M’s physical showrooms with a digital showroom. Based on the former, it should reflect the brand’s identity and values, just virtually instead of physically. A space without opening hours, where a wide variety of target audiences such as influencers and stylists, customers, employees, and the press can meet and learn more about H&M and its collections. The Virtual Showroom was to serve as a central point for meaningful exchanges in an immersive environment. Targeted tours by the H&M showroom team were intended to inform the audience about current trends and topics such as sustainability and new, innovative materials.
The number of visitors, countries of origin and the average time spent in the individual areas (which can be helpful for future brand activations), were defined as KPIs for this new showroom. KPIs including click rates of downloadable materials and qualitative feedback from showroom guests and media stakeholders are to follow soon.
Bringing collections to life
How can we experience clothing when we can’t touch it or wear it? What added value does a digital experience offer visitors and customers? Together with our partner Journee – The Metaverse Company™, we explored solutions to these questions to develop a virtual, custom-fit world for H&M. In the H&M Virtual Showroom, content on H&M’s innovation topics and sustainability efforts are presented, alongside ‘information zones’, designed especially for the press or users interested in a conversation.
The look of the showroom is based on the DNA of the H&M brand, with appropriately designed areas for the most important topics such as the ‘Sustainability Garden’ (where information on the innovative material ‘AirCarbon’ is shared), or the H&M Home influencers meeting area.
The ‘Campaign Room’, accessible through a portal, is where the new H&M Innovation Stories campaign ‘Cherish Waste’ is interpreted in a fascinating new way. Here, Creative Director Ann-Sofie Johansson and Concept Designer Ella Soccorsi give insights into the design process of the collection and the campaign, as well as the materials used in the clothing. The highlight of this room are the six main pieces of the collection which dominate the room as detailed, oversized 3D graphics. The flowing movement and vivid colours of the graphics really bring the pieces to life. Special Collections, in particular, lend themselves to the creation of such individual spaces, with a wide variety of brand activation options and providing unique, added-value for the visitors and the H&M showroom team.
From vision to (virtual) realisation
We developed all of the components mentioned above together with Journee and in close cooperation with H&M. The vision of the showroom grew piece by piece; our strategists developed the concept, and the designers brainstormed, scribbled and designed creative mood boards based on the creative direction of the campaign and the H&M brand DNA.
With the help of H&M’s user insights, we designed the user flows for the influencers, stylists and journalists at an early stage, which provided the necessary guidance during the creative process. With the design ideas sharpened, we continued to optimise the concept and content until everything could be implemented (virtually) by Journee, using Unreal.
The first test tours in the Virtual Showroom, plus the positive feedback and ideas received from H&M stakeholders, helped us to round off the H&M Web3 experience. Paths were rerouted, trees moved, images swapped, and descriptions added.
An immersive user experience
The three avatar designs represent an important message: the need for more diversity and inclusion in fashion. With the avatars, users can move freely in the Virtual Showroom, so we paid special attention to user guidance, orientation and the order in the rooms. Even inexperienced users can navigate through the showroom with the help of various aids and explanations, helping them to discover everything in a playful way. Thanks to the separate rooms and different areas in the H&M Virtual Showroom, users can explore and experience the brand and the respective collections, or they can quickly find what they are looking for by simply teleporting to their desired destination.
A survey carried out with Gen Z visitors to the Virtual Showroom has resulted in very positive feedback
- 69% of the respondents said that the showroom had aroused their interest in a virtual H&M brand experience.
- In addition, 80% of the respondents are already interested in participating in a virtual H&M brand experience as an H&M Hello member.
- Finally, 85% of the visitors surveyed rated the virtual showroom experience as very positive.
Remarkable press reviews
“Previous digital press meetings were nothing compared to this experience. Amazing space and visual execution, i.e. 3D moving garments in campaign room.” GLAMOUR
“Congrats to the space. In love especially with the visuals.” VOGUE
“Super cool to experience such an entirely new and imaginary environment. Love the photo booth to share.” FASHION UNITED
Within only 12 weeks, we created a first-of-its-kind metaverse experience with the team from DEPT® and JOURNEE, which not only triggered positive feedback from the target group and a remarkable press echo. The project is also the impetus for further innovation projects within the H&M Group. I am looking forward to further collaboration with the team and am excited to see how we will shape Web3 together in the future.
Oliver Lange, Head of H&Mbeyond.
By working in true collaboration throughout an iterative process, the requirements of H&Mbeyond’s innovation approach were optimally understood and implemented. In the future, the Virtual Showroom is expected to host events such as launches, meetings, and concerts for larger audiences, all in addition to the presentation of new collections.
“H&M’s Virtual Showroom is designed as a space for brand activations such as fashion campaigns. These are brought to life in a whole new and exciting way, combining innovation, digitalisation and sustainability. It makes me very proud to see how much energy, heart and soul our colleagues across countries and departments have put into this project. We are looking forward to exploring the potential in the countries of the Central Europe region and beyond.” Thorsten Mindermann, Regional Manager, H&M Central Europe.
Director Marketing & Business Development
Personalize your experience