Client
Selfridges
Project type
Filter redesign
My role
Lead UX Designer
Project length
1 week sprint
Updating Selfridges PLP Filters
I led a kick-off which that involved looking into the components we use across our external emails and consolidating them into one shared component library that the CRM and Creative Teams would be able to use. By using data gathered from customer interaction with the current templates and a thorough audit of the current components being used, I was able to build a library of new components that offered visual consistency, and that were tested and signed off by the Developers. I felt this would alleviate work & stress load from the Creative Team, improve the consistency of the emails, and align the components with what the UX team was building in our own Design System; ‘Harry’.
Opportunity & goals:
How could we improve the library of components the Creative & CRM teams were using to create their emails and in the process build out a more thorough library?
Goals:
Build out a fresh library of components: the current components being used by the Team were very dated and needed a refresh.
Ensure these passed Development requirements for quicker release by testing them as soon as they were ready and insisting the Developers were looped into this process. By ensuring they passed these tests it would save a lot of time once the new templates for the various campaigns were completed as they could be released to our users almost instantly.
Synchronise these components with the ones in our updated Design System: at the same time we were also simultaneously updating and making amendments to the components in our main Design System, and it was crucial for the business there was consistency throughout both Design Systems.
Up-skill members of the Creative team in how to use these components for future reference by championing sessions whereby I walked them through how to build these components in FIGMA and answering any questions they had. This was a great success.
Establish ways of working for the future: by providing tutorials to the Creative team on how to build the components, we were able to establish rules for when UX would be involved in building or amending any components in the future so we could focus on the projects on our own rosters.
Business problems:
Data suggested there were clear drop-offs in user interaction on some of the current templates or ‘components’ which was resulting in less email > site conversion. We needed to try and understand why.
Improved working relations between the UX, Creative & CRM teams were needed to help establish clear methods of working for future use.
UX resource was being used to help build out components for the CRM team to use which meant this was becoming stretched. Additionally, continuously adding new components to an already over-populated component library meant this was becoming difficult to manage.
User/ design problem:
The current process for designing, building, and using components used for emails was outdated.
Members of the Creative team were unsure how to build the components themselves which limited their own capabilities.
Multiple variations of the same components increased workload for the Developers and took them longer to get sent out.
Taking components out of the same library would also increase design consistency across our touchpoints.
Summary of process:
The process of redesigning and building the updated library consisted of a thorough audit of the current library to establish what components needed to be redesigned, and which ones built from scratch. This had been established through the brief and initial kick-off meeting. In addition to this, I also gathered some data on the performance of our current templates to understand the issues users were having with them, and what templates were not resonating with them, so I was more informed of what to avoid improve when designing the new versions.
Having now completed the audit and gathered the relevant data, I designed and built out the new library. Simultaneously to this process, I also had regular check-in calls with key stakeholders to receive & discuss any feedback on the new components before implementing it, as well as the Developers so we could identify any blockers on development as we went along to avoid any nasty surprises the closer we got to the final deadline. It was during this phase of the project I held the walkthroughs and tutorials mentioned in the ‘Goals’, and made sure the Creative Team now knew how to build these components themselves. Please see some images of the new components below.
Final handover:
This involved presenting the final components and pieces of work to the Head of UX and walking him through the changes made to each component, before handing the file over to the Creative team who would also share it with CRM. Overall, this was a great success.
Considering what we were looking to take away from this project, and what was agreed in the business case during the kick-off, he was really happy to see all the hard work be brought to life. We now had a completed set of updated components the Creative team was comfortable using that we also knew had been built by the Development team. This ensured moving forward that building the templates and getting them live would take a fraction of the time and resource it did before. Please see below for images of templates which were made up of components from the new library.
I led a kick-off which that involved looking into the components we use across our external emails and consolidating them into one shared component library that the CRM and Creative Teams would be able to use. By using data gathered from customer interaction with the current templates and a thorough audit of the current components being used, I was able to build a library of new components that offered visual consistency, and that were tested and signed off by the Developers. I felt this would alleviate work & stress load from the Creative Team, improve the consistency of the emails, and align the components with what the UX team was building in our own Design System; ‘Harry’.
Business problems:
Data suggested there were clear drop-offs in user interaction on some of the current templates or ‘components’ which was resulting in less email > site conversion. We needed to try and understand why.
Improved working relations between the UX, Creative & CRM teams were needed to help establish clear methods of working for future use.
UX resource was being used to help build out components for the CRM team to use which meant this was becoming stretched. Additionally, continuously adding new components to an already over-populated component library meant this was becoming difficult to manage.
User/ design problem:
The current process for designing, building, and using components used for emails was outdated.
Members of the Creative team were unsure how to build the components themselves which limited their own capabilities.
Multiple variations of the same components increased workload for the Developers and took them longer to get sent out.
Taking components out of the same library would also increase design consistency across our touchpoints.
Opportunity & goals:
How could we improve the library of components the Creative & CRM teams were using to create their emails and in the process build out a more thorough library?
Goals:
Build out a fresh library of components: the current components being used by the Team were very dated and needed a refresh.
Ensure these passed Development requirements for quicker release by testing them as soon as they were ready and insisting the Developers were looped into this process. By ensuring they passed these tests it would save a lot of time once the new templates for the various campaigns were completed as they could be released to our users almost instantly.
Synchronise these components with the ones in our updated Design System: at the same time we were also simultaneously updating and making amendments to the components in our main Design System, and it was crucial for the business there was consistency throughout both Design Systems.
Up-skill members of the Creative team in how to use these components for future reference by championing sessions whereby I walked them through how to build these components in FIGMA and answering any questions they had. This was a great success.
Establish ways of working for the future: by providing tutorials to the Creative team on how to build the components, we were able to establish rules for when UX would be involved in building or amending any components in the future so we could focus on the projects on our own rosters.
Summary of process:
The process of redesigning and building the updated library consisted of a thorough audit of the current library to establish what components needed to be redesigned, and which ones built from scratch. This had been established through the brief and initial kick-off meeting. In addition to this, I also gathered some data on the performance of our current templates to understand the issues users were having with them, and what templates were not resonating with them, so I was more informed of what to avoid improve when designing the new versions.
Having now completed the audit and gathered the relevant data, I designed and built out the new library. Simultaneously to this process, I also had regular check-in calls with key stakeholders to receive & discuss any feedback on the new components before implementing it, as well as the Developers so we could identify any blockers on development as we went along to avoid any nasty surprises the closer we got to the final deadline. It was during this phase of the project I held the walkthroughs and tutorials mentioned in the ‘Goals’, and made sure the Creative Team now knew how to build these components themselves. Please see some images of the new components below.
Final handover:
This involved presenting the final components and pieces of work to the Head of UX and walking him through the changes made to each component, before handing the file over to the Creative team who would also share it with CRM. Overall, this was a great success.
Considering what we were looking to take away from this project, and what was agreed in the business case during the kick-off, he was really happy to see all the hard work be brought to life. We now had a completed set of updated components the Creative team was comfortable using that we also knew had been built by the Development team. This ensured moving forward that building the templates and getting them live would take a fraction of the time and resource it did before. Please see below for images of templates which were made up of components from the new library.
Project type
Filter redesign
Client
Selfridges
My role
Lead UX Designer
Project length
1 week sprint
Updating Selfridges PLP Filters
Project type
Filter redesign
Client
Selfridges
My role
Lead UX Designer
Project length
1 week sprint
Updating Selfridges PLP Filters
I led a kick-off which that involved looking into the components we use across our external emails and consolidating them into one shared component library that the CRM and Creative Teams would be able to use. By using data gathered from customer interaction with the current templates and a thorough audit of the current components being used, I was able to build a library of new components that offered visual consistency, and that were tested and signed off by the Developers. I felt this would alleviate work & stress load from the Creative Team, improve the consistency of the emails, and align the components with what the UX team was building in our own Design System; ‘Harry’.
Business problems:
Data suggested there were clear drop-offs in user interaction on some of the current templates or ‘components’ which was resulting in less email > site conversion. We needed to try and understand why.
Improved working relations between the UX, Creative & CRM teams were needed to help establish clear methods of working for future use.
UX resource was being used to help build out components for the CRM team to use which meant this was becoming stretched. Additionally, continuously adding new components to an already over-populated component library meant this was becoming difficult to manage.
User/ design problem:
The current process for designing, building, and using components used for emails was outdated.
Members of the Creative team were unsure how to build the components themselves which limited their own capabilities.
Multiple variations of the same components increased workload for the Developers and took them longer to get sent out.
Taking components out of the same library would also increase design consistency across our touchpoints.
Opportunity & goals:
How could we improve the look and feel of the page to provide the user with a more tailored experience of Unlocked & present them with the relevant information to make them want to sign up?
Goals:
Build out a fresh library of components: the current components being used by the Team were very dated and needed a refresh.
Ensure these passed Development requirements for quicker release by testing them as soon as they were ready and insisting the Developers were looped into this process. By ensuring they passed these tests it would save a lot of time once the new templates for the various campaigns were completed as they could be released to our users almost instantly.
Synchronise these components with the ones in our updated Design System: at the same time we were also simultaneously updating and making amendments to the components in our main Design System, and it was crucial for the business there was consistency throughout both Design Systems.
Up-skill members of the Creative team in how to use these components for future reference by championing sessions whereby I walked them through how to build these components in FIGMA and answering any questions they had. This was a great success.
Establish ways of working for the future: by providing tutorials to the Creative team on how to build the components, we were able to establish rules for when UX would be involved in building or amending any components in the future so we could focus on the projects on our own rosters.
Summary of process:
The process of redesigning and building the updated library consisted of a thorough audit of the current library to establish what components needed to be redesigned, and which ones built from scratch. This had been established through the brief and initial kick-off meeting. In addition to this, I also gathered some data on the performance of our current templates to understand the issues users were having with them, and what templates were not resonating with them, so I was more informed of what to avoid improve when designing the new versions.
Having now completed the audit and gathered the relevant data, I designed and built out the new library. Simultaneously to this process, I also had regular check-in calls with key stakeholders to receive & discuss any feedback on the new components before implementing it, as well as the Developers so we could identify any blockers on development as we went along to avoid any nasty surprises the closer we got to the final deadline. It was during this phase of the project I held the walkthroughs and tutorials mentioned in the ‘Goals’, and made sure the Creative Team now knew how to build these components themselves. Please see some images of the new components below.
Final handover:
This involved presenting the final components and pieces of work to the Head of UX and walking him through the changes made to each component, before handing the file over to the Creative team who would also share it with CRM. Overall, this was a great success.
Considering what we were looking to take away from this project, and what was agreed in the business case during the kick-off, he was really happy to see all the hard work be brought to life. We now had a completed set of updated components the Creative team was comfortable using that we also knew had been built by the Development team. This ensured moving forward that building the templates and getting them live would take a fraction of the time and resource it did before. Please see below for images of templates which were made up of components from the new library.