Selfridges Design System
This project was focused on migrating the Selfridges website to a new CMS.
The current CMS system was slow and outdated, lacking dynamic technical capabilities and effecting efficiency. The new CMS would allow for less manual FE/BE building work, an opportunity to improve the website structure and taxonomy, as well as save money for the business.
The problem
The biggest problem was working out how to migrate over 1,000 pages which all used components that wouldn’t be compatible on the new CMS platform.
We were limited to implementing 40 components into the new CMS system.
So the question became; what components are needed for Selfridges’ varying web pages and how do we ensure they work for internal teams and users?
The project required evaluation on how components were being used and how users interact with them. Thinking about what teams use and need from components as well as how they’re built.
Steps taken
No project or design process is linear but to execute the project…
I learnt more about the new CMS platform, understanding how it worked and it’s functionality. Figuring out how components would be built and implemented into the platform.
I conducted deep analysis of selfridges.com and it’s web pages, noting what components are used where and why.
Using analytical tools, I assessed how the current components were performing and how users were interacting with them.
I discovered various teams and colleague needs, gaining stakeholder requirements and goals.
Researched competitors to inspire design changes to components.
Collaborated closely with PMs, engineers and UX to align on technical build of components.
Frequently presented and tested design ideas, making any necessary iterations from feedback.
Challenges
Managing teams expectations of migration changes. A lot of teams thought this was an opportunity to re-design lots of areas of the website which wasn’t the case.
Migrating the website/work of moving platforms was most important for teams. This dominated a lot of conversations and reinforcing the necessity of UX and design of the project was constant.
Balancing stakeholder goals and requirements. Selfridges has a Hub of inspirational content that required more bespoke, editorial components. This was challenged by PMs and engineers as these pages had low analytics but were important for Brand launches and collaborations.
Designing and building a set of highly flexible components suitable for various use cases was challenging. The components needed to meet user, business and stakeholder needs which was not an easy task.
Final outcomes
This project is an ongoing piece of work as there are hundreds of pages to migrate. With that being said, below are some of the outcomes we were able to achieve.
Designed 12 brand new components with high flexibility. Able to remove/add text, colours, images, icons, etc.
Optimised current components with more variation so they are suitable for multiple use cases.
Total list of components were flexible enough to be used across key pages like Homepage, CLPs, Info pages and more.
Didn’t exceed component limit of 40, meaning more components can be created in the future.
Able to improve the visual aesthetic of selfridges.com and experience, enhancing intuitiveness and accessibility.
Successfully migrated the Selfridges CLPs and Homepage to the new CMS with updated components.
Manual workload lessened for teams, proving FE/BE capabilities of new CMS.
Reflection
Overall, the project has improved ways of working between technology and teams. The migrating of web pages has been successful and the updated components has met various stakeholders and user needs.
The project evolved as more teams and stakeholders were informed.
Understanding how other teams function and their requirements for Selfridges web, sparked more questions and reflection on next steps. It was about connecting the dots, noticing how the impact of one teams work has on another. Balancing multiple department needs was the biggest challenge and a real test of prioritising the non-negotiables.
The project was a collective learning curve.
This was Selfridges’ first time migrating to a new CMS platform in over a decade. Naturally, there was lots to learn and adjust to, figuring out the building blocks of the new CMS and how this change will effect everything. It was something new for everyone involved but that’s what made the project more engaging, collaborative and satisfying.
I learned a lot about components!
This project was my first opportunity at creating components for the Selfridges Design System and implementing into the new CMS. The components were creating the bulk of the website and I was responsible for meeting the needs of users and many stakeholders. I went through many design iterations before finalising, rationalising every design choice and balancing feedback.
Thank you for reading.