Universal Design System

"The Heart" – a design system built from scratch for Intersport, a major multi-brand sporting goods retail platform

Overview

My role

Senior Product Designer

Team

1 × Design Director

1 × UX Lead

1 × Product Manager

1 × Project Manager

2 × Snr. Product Designer

1 × Snr. Visual Designer

2 × Product Designer

10 × Software Engineers

Year

2022-2024

At Intersport, I worked as a Senior Product Designer within a team of around 15, to build a Universal Design System (UDS) from scratch. Our goal was to standardize UX patterns, improve design consistency, and speed up design and development with reusable components and layouts.

I collaborated closely with both design and development teams to ensure alignment between the design system and technical standards, resulting in a consistent, efficient design framework for Intersport's global platforms. Using an Atomic Design approach, we wireframed patterns and iteratively developed components, focusing on scalability and flexibility.

The Heart Design System was fully documented in Zeroheight and Storybook.

Foundations

Motion Principles

I established motion and animation principles by defining core guidelines, including building blocks, usage, structure, and animation types for a cohesive experience. I also created an effects library with spec sheets to ensure smooth collaboration between design and development for consistent, purposeful animations.

Informative. Fluid. Expressive.
Each motion principle plays a key role in the user experience, guiding interactions, refocusing attention, and expressing brand personality in memorable moments. Motion enhances usability, makes the UI feel expressive, and elevates the overall brand experience. Intersport's approach to motion is grounded in a principle-based methodology.

Applications.

Design

Component design

I used the Atomic Design methodology to create scalable, reusable components, starting with basic elements like buttons and input fields and building up to complex patterns such as cards and forms.

I iteratively refined these components through continuous collaboration with designers and developers, focusing on usability, adoption use-case, technical feasibility, and visual consistency. This process resulted in a flexible, high-quality component library that improved design efficiency and ensured a cohesive user experience.

Designed pixel-perfect product cards, covering all interaction states including hover, focus, and selection. Since product cards are a core component used across listing pages and checkout flows, they were prioritized early in the design process. I iterated on the layout, image scaling, content hierarchy, and micro-interactions, ensuring the design was both visually consistent and flexible enough to adapt across multiple use cases.

Filter components for product listing pages, focusing on key interactions like multi-select, active states, and clear actions. I refined the layout and responsiveness to ensure clarity, consistency, and adaptability across different screen sizes and product categories.

Molecules for product detail pages, including image galleries, size selectors, and product description blocks. These components were crafted to balance visual clarity with flexibility, ensuring they could adapt across various product types and layouts.

Reusable search and selection chips, focusing on clarity, flexibility, and consistency across the design system.

Designed a library of over 150 icons using a consistent grid system, stroke weight, and visual style for clarity and scalability. I collaborated with internal stakeholders to prioritize key icons, iterating for readability across various sizes and screen resolutions.

Patterns & Blueprints

I designed patterns and blueprints from low to high fidelity, covering the entire user journey from product listing pages to checkout and order experiences. This involved creating flexible design patterns that balanced consistency with adaptability across various touchpoints. I developed detailed wireframes and prototypes, iterating with the team to refine interactions, ensure clarity, and align with both business needs and user expectations for a seamless end-to-end experience.

Two types of product listing filter layouts: top-bar filters and side-bar filters. I focused on refining the interaction flows, ensuring both designs supported seamless product discovery, clear filtering options, and responsiveness across different screen sizes.

Simplifying the purchasing experience, focusing on clarity, speed, and reducing friction at each step.

Impact & Results

The universal design system (UDS) has been adopted by all major national organizations and has been implemented across the globe.

Within 9 months the UDS Team:

Ran approx 40 customer interviews
Ran approx 5-6 A/B tests
Ran 4 surveys
Ran almost 30 research projects
Completed more than 1000 stories in Jira
Implemented more than 60 components
Made more than 100 pages in Zeroheight
Made more than 300 MRs
Ran 13 demos

Testimonials

As Senior Product Designer, Jack played a pivotal role in building Intersport's visual language, bringing a combination of precision and strategic thinking to the project. His expertise in delivering flexible solutions for our partners set a high standard of quality and usability across the board. Jack’s attention to detail and commitment to excellence elevated every aspect of the system.

Beyond his technical skills, Jack’s collaborative nature and proactive mindset had a significant impact on our team’s process. He consistently anticipated challenges, proposed thoughtful solutions, and ensured we were on the right track. His ability to correct course where necessary and guide the team through problems improved both our approach and the final outcome.

Constantine Gavrykov

Global UX/CX Director

Jack has phenomenal CX vision, and it is a pleasure to work with him on a daily basis. He provides clear guidance to the designers as well as collaborates with developers very well. Jack has many creative ideas and is data driven and he is a reliable and good person. Whenever I need advice on UX/UI, Jack is the go-to person for that - he communicates things directly and has very solid knowledge of and experience in design.

Daria Epaneshnikova

Senior Software Engineer

I'm Jack – a digital product designer based in Amsterdam

Copy email address

██ ██
██▒▒██ ██▒▒██
██░░▒▒██ ██████ ██▒▒░░██
██░░░░▒▒██ ████▒▒▒▒▒▒████ ██▒▒░░░░██
██░░░░░░▒▒████▒▒▒▒▒▒▒▒▒▒▒▒▒▒████▒▒░░░░░░██
██░░░░▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒░░░░██
██░░▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒░░██
██▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒██
██▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒██
██▒▒▒▒▒▒▒▒▒▒██▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒██▒▒▒▒▒▒▒▒▒▒██
██▒▒▒▒▒▒▒▒▒▒██▒▒██▒▒▒▒▒▒▒▒▒▒▒▒▒▒██▒▒██▒▒▒▒▒▒▒▒▒▒██
██▒▒▒▒▒▒▒▒██▒▒▒▒▒▒██▒▒▒▒▒▒▒▒▒▒██▒▒▒▒▒▒██▒▒▒▒▒▒▒▒██
██▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒██
██▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒██
██▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒██████▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒██
██▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒██▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒██
██▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒██
██▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒██▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒██
██▒▒▒▒▒▒▒▒▒▒▒▒██▒▒▒▒██▒▒██▒▒▒▒██▒▒▒▒▒▒▒▒▒▒▒▒██
██▒▒▒▒▒▒▒▒▒▒▒▒████▒▒▒▒▒▒████▒▒▒▒▒▒▒▒▒▒▒▒██
████▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒████
████▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒████
████████▒▒▒▒▒▒▒▒▒▒████████
██████████