JD Sports (JD Group)
Design system strategy
Strategy
Design system
Replatforming
The problem
Inconsistent UI and UX patterns
within the JD Sport's website
Global inconsistencies
between different website locales
Slow load times
due to legacy tech
The solution
Design system audit
to evaluate inconsistencies
Global design system strategy
alignment on look & feel while preserving market specific UX differences
New website platform
with scalability in mind
Due for a clean-up
By 2023, JD Sports’ UK website had been through years of optimisation testing. While those tests delivered conversion rate gains, they also left the site feeling inconsistent. Different layouts, a fragmented user experience, and aging tech began to stack up — making it harder to move forward and unlock further improvements.
Chaotic UX
Inconsistencies showed up everywhere — from core styling to components and how they behaved across larger UX patterns.
Accessibility?
There was little to no effort made to meet accessibility requirements.
Loooooad times
Page load times varied wildly from a few to 20–30 seconds. That delay crippled critical journey steps across the website.
Disjointed globally
The website experience and look and feel varied across regions. This was a stark contrast to JD’s physical stores, which had a strong, instantly recognisable identity.
Frozen in growth
Scaling new features and patterns globally was nearly impossible, held back by a legacy platform and rigid development processes.
Chaotic UX
Inconsistencies showed up everywhere — from core styling to components and how they behaved across larger UX patterns.
Accessibility?
There was little to no effort made to meet accessibility requirements.
Loooooad times
Page load times varied wildly from a few to 20–30 seconds. That delay crippled critical journey steps across the website.
Disjointed globally
The website experience and look and feel varied across regions. This was a stark contrast to JD’s physical stores, which had a strong, instantly recognisable identity.
Frozen in growth
Scaling new features and patterns globally was nearly impossible, held back by a legacy platform and rigid development processes.
Chaotic UX
Inconsistencies showed up everywhere — from core styling to components and how they behaved across larger UX patterns.
Accessibility?
There was little to no effort made to meet accessibility requirements.
Loooooad times
Page load times varied wildly from a few to 20–30 seconds. That delay crippled critical journey steps across the website.
Disjointed globally
The website experience and look and feel varied across regions. This was a stark contrast to JD’s physical stores, which had a strong, instantly recognisable identity.
Frozen in growth
Scaling new features and patterns globally was nearly impossible, held back by a legacy platform and rigid development processes.
Chaotic UX
Inconsistencies showed up everywhere — from core styling to components and how they behaved across larger UX patterns.
Accessibility?
There was little to no effort made to meet accessibility requirements.
Loooooad times
Page load times varied wildly from a few to 20–30 seconds. That delay crippled critical journey steps across the website.
Disjointed globally
The website experience and look and feel varied across regions. This was a stark contrast to JD’s physical stores, which had a strong, instantly recognisable identity.
Frozen in growth
Scaling new features and patterns globally was nearly impossible, held back by a legacy platform and rigid development processes.
Chaotic UX
Inconsistencies showed up everywhere — from core styling to components and how they behaved across larger UX patterns.
Accessibility?
There was little to no effort made to meet accessibility requirements.
Loooooad times
Page load times varied wildly from a few to 20–30 seconds. That delay crippled critical journey steps across the website.
Disjointed globally
The website experience and look and feel varied across regions. This was a stark contrast to JD’s physical stores, which had a strong, instantly recognisable identity.
Frozen in growth
Scaling new features and patterns globally was nearly impossible, held back by a legacy platform and rigid development processes.
Chaotic UX
Inconsistencies showed up everywhere — from core styling to components and how they behaved across larger UX patterns.
Accessibility?
There was little to no effort made to meet accessibility requirements.
Loooooad times
Page load times varied wildly from a few to 20–30 seconds. That delay crippled critical journey steps across the website.
Disjointed globally
The website experience and look and feel varied across regions. This was a stark contrast to JD’s physical stores, which had a strong, instantly recognisable identity.
Frozen in growth
Scaling new features and patterns globally was nearly impossible, held back by a legacy platform and rigid development processes.
Chaotic UX
Inconsistencies showed up everywhere — from core styling to components and how they behaved across larger UX patterns.
Accessibility?
There was little to no effort made to meet accessibility requirements.
Loooooad times
Page load times varied wildly from a few to 20–30 seconds. That delay crippled critical journey steps across the website.
Disjointed globally
The website experience and look and feel varied across regions. This was a stark contrast to JD’s physical stores, which had a strong, instantly recognisable identity.
Frozen in growth
Scaling new features and patterns globally was nearly impossible, held back by a legacy platform and rigid development processes.
Chaotic UX
Inconsistencies showed up everywhere — from core styling to components and how they behaved across larger UX patterns.
Accessibility?
There was little to no effort made to meet accessibility requirements.
Loooooad times
Page load times varied wildly from a few to 20–30 seconds. That delay crippled critical journey steps across the website.
Disjointed globally
The website experience and look and feel varied across regions. This was a stark contrast to JD’s physical stores, which had a strong, instantly recognisable identity.
Frozen in growth
Scaling new features and patterns globally was nearly impossible, held back by a legacy platform and rigid development processes.
Chaotic UX
Inconsistencies showed up everywhere — from core styling to components and how they behaved across larger UX patterns.
Accessibility?
There was little to no effort made to meet accessibility requirements.
Loooooad times
Page load times varied wildly from a few to 20–30 seconds. That delay crippled critical journey steps across the website.
Disjointed globally
The website experience and look and feel varied across regions. This was a stark contrast to JD’s physical stores, which had a strong, instantly recognisable identity.
Frozen in growth
Scaling new features and patterns globally was nearly impossible, held back by a legacy platform and rigid development processes.
Chaotic UX
Inconsistencies showed up everywhere — from core styling to components and how they behaved across larger UX patterns.
Accessibility?
There was little to no effort made to meet accessibility requirements.
Loooooad times
Page load times varied wildly from a few to 20–30 seconds. That delay crippled critical journey steps across the website.
Disjointed globally
The website experience and look and feel varied across regions. This was a stark contrast to JD’s physical stores, which had a strong, instantly recognisable identity.
Frozen in growth
Scaling new features and patterns globally was nearly impossible, held back by a legacy platform and rigid development processes.
Chaotic UX
Inconsistencies showed up everywhere — from core styling to components and how they behaved across larger UX patterns.
Accessibility?
There was little to no effort made to meet accessibility requirements.
Loooooad times
Page load times varied wildly from a few to 20–30 seconds. That delay crippled critical journey steps across the website.
Disjointed globally
The website experience and look and feel varied across regions. This was a stark contrast to JD’s physical stores, which had a strong, instantly recognisable identity.
Frozen in growth
Scaling new features and patterns globally was nearly impossible, held back by a legacy platform and rigid development processes.
Chaotic UX
Inconsistencies showed up everywhere — from core styling to components and how they behaved across larger UX patterns.
Accessibility?
There was little to no effort made to meet accessibility requirements.
Loooooad times
Page load times varied wildly from a few to 20–30 seconds. That delay crippled critical journey steps across the website.
Disjointed globally
The website experience and look and feel varied across regions. This was a stark contrast to JD’s physical stores, which had a strong, instantly recognisable identity.
Frozen in growth
Scaling new features and patterns globally was nearly impossible, held back by a legacy platform and rigid development processes.
It was time to rethink our digital experience and make it a seamless part of JD’s omni-channel journey. We needed a strategy that could turn a fragmented global experience into one that felt cohesive, impactful, and instantly recognisable worldwide. As a first step, we set out to evaluate and rebuild the JD online experience in a way that could truly scale.
I led the the creation of a new design system alongside my small but mighty design team. They were supported by developers, QAs, copywriters, creatives, and accessibility experts.
I led the the creation of a new design system alongside my small but mighty design team. They were supported by developers, QAs, copywriters, creatives, and accessibility experts.
Design principles
Atomic design system
We built the design system from the ground up, starting with foundations, such as logos, colors, typography and iconography. Then, we developed reusable components like buttons and forms, which were applied to create cohesive, user-friendly patterns and page designs.
Accessibility & inclusive design principles
We prioritized accessibility and inclusive design principles throughout the design process, ensuring adherence to ADA and EEA guidelines. Proper color contrast, keyboard navigation, and screen reader compatibility gave an experience that’s accessible to all users, regardless of ability.
Integrated systems
We connected our designs in Figma to frontend code using variables and design tokens within Storybook, ensuring consistency across the design system. Zeroheight served as a user-friendly platform to integrate these tools, offering a centralized portal to distribute updates, gather internal feedback, and maintain a single source of truth. Automation and version control were key to keeping the design system up to date, well-documented, and aligned with ongoing changes.
Built to scale globally
The development team leveraged the new design system to build the website, ensuring scalability for future global markets. By utilizing standardized components and guidelines, the system enabled smooth version releases, optimizations, and a high-quality handover for ongoing updates. The structure also served a basis to create design systems for other brands owned by JD Group. This flexible approach sets the foundation for consistent, efficient growth across regions while maintaining design integrity.
Atomic design system
We built the design system from the ground up, starting with foundations, such as logos, colors, typography and iconography. Then, we developed reusable components like buttons and forms, which were applied to create cohesive, user-friendly patterns and page designs.
Accessibility & inclusive design principles
We prioritized accessibility and inclusive design principles throughout the design process, ensuring adherence to ADA and EEA guidelines. Proper color contrast, keyboard navigation, and screen reader compatibility gave an experience that’s accessible to all users, regardless of ability.
Integrated systems
We connected our designs in Figma to frontend code using variables and design tokens within Storybook, ensuring consistency across the design system. Zeroheight served as a user-friendly platform to integrate these tools, offering a centralized portal to distribute updates, gather internal feedback, and maintain a single source of truth. Automation and version control were key to keeping the design system up to date, well-documented, and aligned with ongoing changes.
Built to scale globally
The development team leveraged the new design system to build the website, ensuring scalability for future global markets. By utilizing standardized components and guidelines, the system enabled smooth version releases, optimizations, and a high-quality handover for ongoing updates. The structure also served a basis to create design systems for other brands owned by JD Group. This flexible approach sets the foundation for consistent, efficient growth across regions while maintaining design integrity.
Atomic design system
We built the design system from the ground up, starting with foundations, such as logos, colors, typography and iconography. Then, we developed reusable components like buttons and forms, which were applied to create cohesive, user-friendly patterns and page designs.
Accessibility & inclusive design principles
We prioritized accessibility and inclusive design principles throughout the design process, ensuring adherence to ADA and EEA guidelines. Proper color contrast, keyboard navigation, and screen reader compatibility gave an experience that’s accessible to all users, regardless of ability.
Integrated systems
We connected our designs in Figma to frontend code using variables and design tokens within Storybook, ensuring consistency across the design system. Zeroheight served as a user-friendly platform to integrate these tools, offering a centralized portal to distribute updates, gather internal feedback, and maintain a single source of truth. Automation and version control were key to keeping the design system up to date, well-documented, and aligned with ongoing changes.
Built to scale globally
The development team leveraged the new design system to build the website, ensuring scalability for future global markets. By utilizing standardized components and guidelines, the system enabled smooth version releases, optimizations, and a high-quality handover for ongoing updates. The structure also served a basis to create design systems for other brands owned by JD Group. This flexible approach sets the foundation for consistent, efficient growth across regions while maintaining design integrity.
Atomic design system
We built the design system from the ground up, starting with foundations, such as logos, colors, typography and iconography. Then, we developed reusable components like buttons and forms, which were applied to create cohesive, user-friendly patterns and page designs.
Accessibility & inclusive design principles
We prioritized accessibility and inclusive design principles throughout the design process, ensuring adherence to ADA and EEA guidelines. Proper color contrast, keyboard navigation, and screen reader compatibility gave an experience that’s accessible to all users, regardless of ability.
Integrated systems
We connected our designs in Figma to frontend code using variables and design tokens within Storybook, ensuring consistency across the design system. Zeroheight served as a user-friendly platform to integrate these tools, offering a centralized portal to distribute updates, gather internal feedback, and maintain a single source of truth. Automation and version control were key to keeping the design system up to date, well-documented, and aligned with ongoing changes.
Built to scale globally
The development team leveraged the new design system to build the website, ensuring scalability for future global markets. By utilizing standardized components and guidelines, the system enabled smooth version releases, optimizations, and a high-quality handover for ongoing updates. The structure also served a basis to create design systems for other brands owned by JD Group. This flexible approach sets the foundation for consistent, efficient growth across regions while maintaining design integrity.
Atomic design system
We built the design system from the ground up, starting with foundations, such as logos, colors, typography and iconography. Then, we developed reusable components like buttons and forms, which were applied to create cohesive, user-friendly patterns and page designs.
Accessibility & inclusive design principles
We prioritized accessibility and inclusive design principles throughout the design process, ensuring adherence to ADA and EEA guidelines. Proper color contrast, keyboard navigation, and screen reader compatibility gave an experience that’s accessible to all users, regardless of ability.
Integrated systems
We connected our designs in Figma to frontend code using variables and design tokens within Storybook, ensuring consistency across the design system. Zeroheight served as a user-friendly platform to integrate these tools, offering a centralized portal to distribute updates, gather internal feedback, and maintain a single source of truth. Automation and version control were key to keeping the design system up to date, well-documented, and aligned with ongoing changes.
Built to scale globally
The development team leveraged the new design system to build the website, ensuring scalability for future global markets. By utilizing standardized components and guidelines, the system enabled smooth version releases, optimizations, and a high-quality handover for ongoing updates. The structure also served a basis to create design systems for other brands owned by JD Group. This flexible approach sets the foundation for consistent, efficient growth across regions while maintaining design integrity.
Atomic design system
We built the design system from the ground up, starting with foundations, such as logos, colors, typography and iconography. Then, we developed reusable components like buttons and forms, which were applied to create cohesive, user-friendly patterns and page designs.
Accessibility & inclusive design principles
We prioritized accessibility and inclusive design principles throughout the design process, ensuring adherence to ADA and EEA guidelines. Proper color contrast, keyboard navigation, and screen reader compatibility gave an experience that’s accessible to all users, regardless of ability.
Integrated systems
We connected our designs in Figma to frontend code using variables and design tokens within Storybook, ensuring consistency across the design system. Zeroheight served as a user-friendly platform to integrate these tools, offering a centralized portal to distribute updates, gather internal feedback, and maintain a single source of truth. Automation and version control were key to keeping the design system up to date, well-documented, and aligned with ongoing changes.
Built to scale globally
The development team leveraged the new design system to build the website, ensuring scalability for future global markets. By utilizing standardized components and guidelines, the system enabled smooth version releases, optimizations, and a high-quality handover for ongoing updates. The structure also served a basis to create design systems for other brands owned by JD Group. This flexible approach sets the foundation for consistent, efficient growth across regions while maintaining design integrity.
Atomic design system
We built the design system from the ground up, starting with foundations, such as logos, colors, typography and iconography. Then, we developed reusable components like buttons and forms, which were applied to create cohesive, user-friendly patterns and page designs.
Accessibility & inclusive design principles
We prioritized accessibility and inclusive design principles throughout the design process, ensuring adherence to ADA and EEA guidelines. Proper color contrast, keyboard navigation, and screen reader compatibility gave an experience that’s accessible to all users, regardless of ability.
Integrated systems
We connected our designs in Figma to frontend code using variables and design tokens within Storybook, ensuring consistency across the design system. Zeroheight served as a user-friendly platform to integrate these tools, offering a centralized portal to distribute updates, gather internal feedback, and maintain a single source of truth. Automation and version control were key to keeping the design system up to date, well-documented, and aligned with ongoing changes.
Built to scale globally
The development team leveraged the new design system to build the website, ensuring scalability for future global markets. By utilizing standardized components and guidelines, the system enabled smooth version releases, optimizations, and a high-quality handover for ongoing updates. The structure also served a basis to create design systems for other brands owned by JD Group. This flexible approach sets the foundation for consistent, efficient growth across regions while maintaining design integrity.
Atomic design system
We built the design system from the ground up, starting with foundations, such as logos, colors, typography and iconography. Then, we developed reusable components like buttons and forms, which were applied to create cohesive, user-friendly patterns and page designs.
Accessibility & inclusive design principles
We prioritized accessibility and inclusive design principles throughout the design process, ensuring adherence to ADA and EEA guidelines. Proper color contrast, keyboard navigation, and screen reader compatibility gave an experience that’s accessible to all users, regardless of ability.
Integrated systems
We connected our designs in Figma to frontend code using variables and design tokens within Storybook, ensuring consistency across the design system. Zeroheight served as a user-friendly platform to integrate these tools, offering a centralized portal to distribute updates, gather internal feedback, and maintain a single source of truth. Automation and version control were key to keeping the design system up to date, well-documented, and aligned with ongoing changes.
Built to scale globally
The development team leveraged the new design system to build the website, ensuring scalability for future global markets. By utilizing standardized components and guidelines, the system enabled smooth version releases, optimizations, and a high-quality handover for ongoing updates. The structure also served a basis to create design systems for other brands owned by JD Group. This flexible approach sets the foundation for consistent, efficient growth across regions while maintaining design integrity.
The new website
The newly implemented design system represented a pivotal milestone in JD’s digital transformation, which was implemented in their new web experience.
The new website
The newly implemented design system represented a pivotal milestone in JD’s digital transformation, which was implemented in their new web experience.
The new website
The newly implemented design system represented a pivotal milestone in JD’s digital transformation, which was implemented in their new web experience.
Our vision
Our vision set the foundation for a sustainable growth over the coming years.
Short term
Bring the UK and European sites up to speed through a scalable platform migration, alongside the rollout of the new design system
Medium term
Establish visual and functional consistency across markets, while still respecting local differences such as shopping behaviours, shipping options, and payment methods
Long term
Move towards true global alignment with a shared codebase and a centralised design ecosystem
First stop: Italy
We took a phased, scale-first approach. The new look and feel launched in Italy as a controlled starting point, allowing us to validate decisions, optimise performance, and refine the system. From there, the plan was to roll out across Europe and ultimately align the experience across the US and APAC markets.
Project summary
Page load times
Average bounce rate
Design debt
While this was only the beginning, the first phase of the transformation created a clear opportunity to significantly improve site performance and lay the foundations for a consistent, global omni-channel experience.
The first release of the new website launched in Italy in autumn 2025, marking the initial step towards a truly global omnichannel journey.