Paul Smith - The digital experience of a flagship store

• Headquarters: Nottingham, United Kingdom
• Technology Stack: Centra, Storyblok, Vue.js, Laravel, Cloudinary, Klevu

Established in 1970, Paul Smith has emerged as a globally renowned symbol of fashion, celebrated for its unique craftsmanship. After 50 successful years, operating in over 60 countries, they applied their progressive and creative thinking to change the way they approach and communicate with their customers, re-establish their brand, and rebuild their website to emulate the unique customer experience one would receive in one of their physical flagship stores. In partnership with Limesharp and a series of tech partners, they created the new Paul Smith website, reaching a 50% increase in page performance post-launch, a 0.8 s First Contentful Paint, and a 92 SEO Lighthouse score.

Challenges leading to migrating to headless

Previously, Paul Smith had their own CMS platform, custom built, which had its drawbacks. It was not offering them the right support in reaching their goal of recreating the experience from their physical stores and all that it entailed.

• Performance issues: Monolithic CMS setups, custom built or off-the-shelf, often face performance challenges due to their tightly coupled nature and inability to support a Jamstack architecture. In the previous architecture, the content management system and the presentation layer were interconnected, resulting in slower page load times and performance bottlenecks. 
• Lack of composable architecture: Unlike a headless CMS, the monolithic CMS lacks a composable architecture. The predefined templates and structures limit the flexibility to customize or adapt to changing business requirements. The tightly coupled nature of the architecture hinders the ability to easily add or replace components, integrate new technologies, or leverage specialized services. This lack of composability brought on restrictions in scalability and using best-of-breed technologies.
• Limited integrations: The limited support for APIs made it hard to connect the CMS with third-party applications, marketing automation tools, e-commerce platforms, or analytics solutions. The lack of flexible integration capabilities hampered the ability to create seamless, connected experiences across different channels and touchpoints.
• Inflexibility and Customization Constraints: Content creators and developers were bound by predefined templates, structures, and technologies dictated by the CMS. This rigid framework restricted the ability to tailor the content management process and the frontend experiences according to the specific organizational needs. Any modifications or customizations required significant effort.

Storyblok solutions

A lengthy process took place when Paul Smith decided to switch to a headless CMS. They thoroughly analyzed market leaders, like Contentful, Prismic, Hygraph (GraphCMS), trying to find the right mix of composable architecture, easy integrations, ease of use, and flexibility. They came to the conclusion that Storyblok was the most established one and here is why:

• Good developer support: Storyblok offers extensive documentation, tutorials, and a developer community to assist users in leveraging the platform effectively. This ensures that developers have the necessary resources and guidance to create and manage content seamlessly.
• Visual editor: With the visual editor, content creators can see changes in real-time, preview content across various devices, and ensure the consistency and quality of their digital experiences without relying on complex coding processes.
• Scheduling capabilities: With the ability to set specific dates and times for content to go live or expire, users can effortlessly manage time-sensitive campaigns or time-bound content releases. This feature enhances workflow efficiency and ensures a seamless user experience by automating content updates according to predetermined schedules.
• Bulk updates: Through its API and import/export functionalities, users can easily perform bulk operations, such as updating multiple pieces of content simultaneously. This saves significant time and effort, especially when managing large amounts of content or making global changes across the website.
• Set-up for improved performance: By leveraging a headless architecture, the platform decouples content from the presentation layer, allowing for greater flexibility and scalability. Developers can optimize performance by delivering content via APIs, which reduces page load times and provides a faster, more responsive user experience.

Browsing Paul Smith’s website feels like a unique experience. It keeps the users in a familiar environment with standard UX and UI, but at the same time it enhances their customer journey with significant elements, replicating the experience a client has in one of their physical flagship stores. The live chat function, the design that echoes Paul Smith’s brand voice of artful independence, the quirky Golden Rabbit emblem, the list of varied services, and the out-of-the-box shopping categories create an immersive journey, reflective of Paul Smith’s legacy. Behind it is a powerful tech stack, an external agency and, of course, the Paul Smith team. Keep reading for the full story behind this incredible collaboration.

The agency and the relationship with Paul Smith

Limesharp is a fully remote agency with offices in the UK, New Zealand, and Auckland. In its 15 years of operation, it focused on eCommerce for fashion, luxury, and premium brands. Its strengths lie in crafting simple, refined customer experiences that reflect the customers’ brand DNA. As such, Limesharp has had a fruitful collaboration with Paul Smith for the last three years.

From Limesharp’s perspective, the Paul Smith team is the dream client — kind, creatively driven, in short, a lovely team with amazing products. Their collaboration is so close that Limesharp is essentially part of the Paul Smith team. That’s exactly what Paul Smith stands for as Britain’s leading independent design company. They champion positivity, curiosity, and creativity, and these qualities underpin their designs, shops, and collaborations.

The brief

Paul Smith has always been about looking forward. When celebrating their 50th anniversary in business, they asked themselves, “How do we stay relevant for the next fifty?”. As progressive and creative thinkers, the team sought Limesharp’s technical expertise and previous experience with the eCommerce brand to support Paul Smith’s development team.

The project timeline

From the very start Paul Smith was set on building their website on a headless CMS with composable architecture. After deciding on the tech stack, Limesharp, together with Paul Smith collaborated on a discovery phase, identifying the objectives in terms of customers and brand. The main objective, as mentioned, was to recreate the customer experience from the physical stores. Secondly, they set their targets on improving assets, adding more information through multimedia files, adding editorials and all the significant parts that make Paul Smith special.

The eight-month development process took place in a hybrid mode, where the back-end was developed by Paul Smith and Limesharp implemented the front-end. The go-live went according to the release planning and, currently, both teams are in the pixel-perfecting stage, adding new functionalities based on the existing structure.

The tech stack

Both teams did a deep dive into the world of composable stack and MACH Alliance, learning what worked best for the project.

The Limesharp team is well-versed in Vue.js, so naturally this was their framework of choice. Additionally, they used Larevel for middleware, Centra for eCommerce, Cloudinary for digital asset management (DAM), Klevu for search recommendations and visual merchandising, and Storyblok as the CMS to handle all of the content.

Leveraging a combination of AWS services like EC2, S3, and Cloudfront, this project highlights the importance of e-tailers building innovative, immersive digital experiences. The composable architecture approach is key to achieving such advanced, customizable experiences.

Specifically, Klevu helps connect people to products they want to buy. Their services include eCommerce personalization, AI and NLP-powered on-site Smart Search, Smart Category Merchandising, and Smart Recommendations powered by real-time buyer intent. Their Smart Search with advanced natural language processing is quick to generate search results even with misspellings, typos, and long specific queries.   

The category merchandising tool allows retailers to fine-tune product results using easy-to-apply strategic rules, product pinning and exclusion, and simple drag-and-drop interfaces allowing full control over what customers see or they can let AI do that magic.

Klevu’s Smart Recommendations allow retailers to optimize product recommendations with data from their own shoppers, creating a custom shopping experience. Since Paul Smith was already using Klevu on their previous, monolithic, platform, it leaned on Klevu’s AI to maximize conversion and revenue during the transformation and migration to Storyblok.Klevu also enabled Paul Smith to reach their desired customer journey through optimized product discovery. As a brand, Paul Smith has learned to trust the AI to deliver the right product and content results to shoppers, manually merchandising as lightly as possible.

In terms of asset management, Paul Smith relies on Cloudinary for automating and optimizing new and efficient approaches to the way Paul Smith handles its vast library of high-quality fashion imagery, and sells online. Cloudinary is the central element of Paul Smith's digital image workflow, linking various members of the creative team, including photographers and marketers. The team leverages Cloudinary to effortlessly handle images by implementing a naming match feature that automatically assigns a SKU in Adobe Commerce.

Consequently, Paul Smith has achieved a minimum of a 40% reduction in time spent on image management. Another recent advantage is the utilization of Cloudinary to incorporate a greater amount of video content into their sales strategy.

Results after migration

As part of the website rebuild, Limesharp created a suite of components, supported the content team and designers in using those components, and encouraged them out of their comfort zone. Currently, the content team is very familiar with Storyblok and its functionalities, coming up with ideas and feature requests. Overall, life has become easier for the content team, benefiting from more flexibility, being able to update designs and layouts by themselves, being able to schedule their content and having more freedom overall.

On top of that, developers love the out-of-the-box Cloudinary integration and they are happy with Storyblok’s support team, always quick to help when the developers are stuck on an issue.

In terms of measurable results, the hard work and good decisions paid off. Post-launch, Limesharp registered a page load time reduced by approximately 50%! Limesharp optimized the website by stripping out third parties and unused libraries, making the code leaner, and using pre-loading. The Limesharp team is still in the process of improving the largest contentful paint. Overall, this successful collaboration between Paul Smith and Limesharp resulted in higher conversion and revenue rates.

Key Takeaway

Such a beautiful story of collaboration, built on a powerful tech stack, can only have a happy end. The objectives were achieved, the new web presence was launched on time, and, as a regular user, we can attest it feels as close as possible to a signature Paul Smith store and everything they stand for.