Design principles
Design principles
Design principles
Understanding the user
Understanding the user
Understanding the user
Component development
Component development
Component development
Blueprints
Blueprints
Blueprints
Design system usage
Design system usage
Design system usage
Results
Results
Results
Learnings
Learnings
Learnings
- Redesign the e-commerce shopping experience by providing consistent and user friendly solutions, based on a brand new design system
- Develop and document a comprehensive design system, which would enable other product teams to develop solutions faster and at lower costs.
With a turnover of over EUR 12.2 billion in 2021 and more than 5‘400 specialist sports stores in 42 countries, the INTERSPORT Group is among the world’s leading sporting goods retailers.
With a turnover of over EUR 12.2 billion in 2021 and more than 5‘400 specialist sports stores in 42 countries, the INTERSPORT Group is among the world’s leading sporting goods retailers.
With a turnover of over EUR 12.2 billion in 2021 and more than 5‘400 specialist sports stores in 42 countries, the INTERSPORT Group is among the world’s leading sporting goods retailers.
My role: Product Designer focused on UX design, research, testing and UI.
My role: Product Designer focused on UX design, research, testing and UI.
My role: Product Designer focused on UX design, research, testing and UI.
Customer centric
Designed and build with sport souls in mind for every decision taken.
Expertise & Passion
Customer gets extensive information on every item and depending on their skill level can always dive deeper.
Customer gets extensive information on every item and depending on their skill level can always dive deeper.
Customer gets extensive information on every item and depending on their skill level can always dive deeper.
Future-proof but flexible
Modular design ensures flexibility in execution. Components work seamlessly with each other to fit customer needs.
Modular design ensures flexibility in execution. Components work seamlessly with each other to fit customer needs.
Modular design ensures flexibility in execution. Components work seamlessly with each other to fit customer needs.
Evidence-Based
Design is informed by data and our customers' needs. We test and listen to feedback.
Design system The Heart
Design system The Heart
Design system The Heart
Customer centric
Customer centric
Customer centric
Designed and build with sport souls in mind for every decision taken. Predictable and clear.
Expertise & Passion
Expertise & Passion
Expertise & Passion
Future-proof but flexible
Future-proof but flexible
Future-proof but flexible
Evidence-Based
Evidence-Based
Evidence-Based
Our design is informed by data and our customers' needs. We test and listen to feedback.
Product Details Page (PDP) information layering
Product Details Page (PDP) information layering
Product Details Page (PDP) information layering
Intersport customers have different levels of knowledge and expertise when it comes to shopping for their favourite gear. In order to support it, I introduced different layers to PDP page from high level highlights with icons to extensive tables, containing technical information, so users can dig deeper if they want.
Intersport customers have different levels of knowledge and expertise when it comes to shopping for their favourite gear. In order to support it, I introduced different layers to PDP page from high level highlights with icons to extensive tables, containing technical information, so users can dig deeper if they want.
Intersport customers have different levels of knowledge and expertise when it comes to shopping for their favourite gear. In order to support it, I introduced different layers to PDP page from high level highlights with icons to extensive tables, containing technical information, so users can dig deeper if they want.
Blueprints expand on the interactions and more complex flows. Based on research, design and testing we came up with a number of recommendations for how to implement those.
Blueprints expand on the interactions and more complex flows. Based on research, design and testing we came up with a number of recommendations for how to implement those.
Blueprints expand on the interactions and more complex flows. Based on research, design and testing we came up with a number of recommendations for how to implement those.
Team & Role
Team & Role
Team & Role
The Business
The Business
The Business
The Business
The Business
Objectives
Objectives
Objectives
As designers, we conducted a series of workshops where we decided on which design principles we want to have in mind:
As designers, we conducted a series of workshops where we decided on which design principles we want to have in mind:
As designers, we conducted a series of workshops where we decided on which design principles we want to have in mind:
I was able to uncover a lot of insights through multiple tools like Google Analytics, Hotjar, GetFeedback and so on. It helped to inform some of the key design decisions and get a better understanding of users' behaviour.
I was able to uncover a lot of insights through multiple tools like Google Analytics, Hotjar, GetFeedback and so on. It helped to inform some of the key design decisions and get a better understanding of users' behaviour.
I was able to uncover a lot of insights through multiple tools like Google Analytics, Hotjar, GetFeedback and so on. It helped to inform some of the key design decisions and get a better understanding of users' behaviour.
GetFeedback was especially insightful when it came to understanding what frustrates users the most on the current website and some of the things like error messaging in forms, size confusion, Product List navigation and checkout information (or lack there-of) led to a very big drop off rate.
GetFeedback was especially insightful when it came to understanding what frustrates users the most on the current website and some of the things like error messaging in forms, size confusion, Product List navigation and checkout information (or lack there-of) led to a very big drop off rate.
GetFeedback was especially insightful when it came to understanding what frustrates users the most on the current website and some of the things like error messaging in forms, size confusion, Product List navigation and checkout information (or lack there-of) led to a very big drop off rate.
I was responsible for creating a big variety of components, which required deep understanding of a component usage, context, states and how it fits in the wider journey. For example, I worked on a badge component, which plays an important role on multiple pages, helps to highlight items and helps the user to focus in a sea of choices.
I was responsible for creating a big variety of components, which required deep understanding of a component usage, context, states and how it fits in the wider journey. For example, I worked on a badge component, which plays an important role on multiple pages, helps to highlight items and helps the user to focus in a sea of choices.
I was responsible for creating a big variety of components, which required deep understanding of a component usage, context, states and how it fits in the wider journey. For example, I worked on a badge component, which plays an important role on multiple pages, helps to highlight items and helps the user to focus in a sea of choices.
Aside from developing visual part of the component and some of its behaviour I developed rules for its connection with filtering and a priority system, helping adopters to maximasimise their usage of badges and make it relevant and useful.
Aside from developing visual part of the component and some of its behaviour I developed rules for its connection with filtering and a priority system, helping adopters to maximasimise their usage of badges and make it relevant and useful.
Blueprints help adopters to understand component usage as well as suggest user flows, interactions and page layouts based on best practices, research and testing. Blueprints helped me to connect with stakeholders and get them excited about the change.
I was involved in end to end creation of multiple flows and pages, where I had to connect with stakeholders across the business, to make sure I address business needs as well as user ones.
Blueprints help adopters to understand component usage as well as suggest user flows, interactions and page layouts based on best practices, research and testing. Blueprints helped me to connect with stakeholders and get them excited about the change.
I was involved in end to end creation of multiple flows and pages, where I had to connect with stakeholders across the business, to make sure I address business needs as well as user ones.
Blueprints help adopters to understand component usage as well as suggest user flows, interactions and page layouts based on best practices, research and testing. Blueprints helped me to connect with stakeholders and get them excited about the change.
I was involved in end to end creation of multiple flows and pages, where I had to connect with stakeholders across the business, to make sure I address business needs as well as user ones.
Analysing current state
Analysing current state
Analysing current state
Analysing current state
Analysing current state
Analysing current state
In order to understand what we can improve, we started by doing an audit of all the existing components and assigning a usability score to all of them (error prevention, aesthetics, flexibility, etc.)
Aside from that there was no centralized library which led slow development time and increasing costs.
Aside from that there was no centralized library which led slow development time and increasing costs.
Aside from that there was no centralized library which led slow development time and increasing costs.
In order to understand how we can improve, we started by doing an audit of all the existing components and assigning a usability score to all of them (error prevention, aesthetics, flexibility, etc.)
In order to understand how we can improve, we started by doing an audit of all the existing components and assigning a usability score to all of them (error prevention, aesthetics, flexibility, etc.)
In order to understand how we can improve, we started by doing an audit of all the existing components and assigning a usability score to all of them (error prevention, aesthetics, flexibility, etc.)
Documented design and code libraries
An extensive UI library
Described and documented behaviour, specks, usage, anatomy, do's and don'ts
Documented html/css and React frontend kit
Recommended blueprints for every step of the flow, including experiences such as interactions and feedback animations
User testing
User testing
User testing
User testing
User testing
I wrote scripts, led, participated and analysed dozens of user tests, which helped to get tons of feedback and identify improvement opportunities. I presented the results to our stakeholders, which also contributed to getting them more excited about the system.
I wrote scripts, led, participated and analysed dozens of user tests, which helped to get tons of feedback and identify improvement opportunities. I presented the results to our stakeholders, which also contributed to getting them more excited about the system.
I wrote scripts, led, participated and analysed dozens of user tests, which helped to get tons of feedback and identify improvement opportunities. I presented the results to our stakeholders, which also contributed to getting them more excited about the system.
Currently being adopted in several markets with many more in the pipeline.
Conducted user tests showed a significant improvement in customer experience and provided us with insights for the future improvements.
Currently being adopted in several markets with many more in the pipeline.
Conducted user tests showed a significant improvement in customer experience and provided us with insights for the future improvements.
Currently being adopted in several markets with many more in the pipeline.
Conducted user tests showed a significant improvement in customer experience and provided us with insights for the future improvements.
- Design systems (even with very thorough documentation) can be interpreted differently from what you intended. Documentation is king, but connecting your users sometimes can help adoption tremendously.
- It's very hard to measure success of a Design System. Talk to your users, regularly gather feedback and get a better understanding of how the System improves lives of your internal and external users.
- Design systems (even with very thorough documentation) can be interpreted differently from what you intended. Documentation is king, but connecting your users sometimes can help adoption tremendously.
- It's very hard to measure success of a Design System. Talk to your users, regularly gather feedback and get a better understanding of how the System improves lives of your internal and external users.
- Design systems (even with very thorough documentation) can be interpreted differently from what you intended. Documentation is king, but connecting your users sometimes can help adoption tremendously.
- It's very hard to measure success of a Design System. Talk to your users, regularly gather feedback and get a better understanding of how the System improves lives of your internal and external users.
The Project
The Project
The Project
- Redesign e-commerce shopping experience by providing consistent and user friendly solutions, based on a brand new design system
- Develop and document comprehensive design system, which would enable other product teams to develop solutions faster and lower costs.
- Redesign e-commerce shopping experience by providing consistent and user friendly solutions, based on a brand new design system
- Develop and document comprehensive design system, which would enable other product teams to develop solutions faster and lower costs.
- Redesign e-commerce shopping experience by providing consistent and user friendly solutions, based on a brand new design system
- Develop and document comprehensive design system, which would enable other product teams to develop solutions faster and lower costs.
Documented design and code libraries
An extensive UI library
Described and documented behaviour, specks, usage, anatomy, do's and don'ts
Documented html/css and React frontend kit
Recommended blueprints for every step of the flow, including experiences such as interactions and feedback animations
Documented design and code libraries
An extensive UI library
Described and documented behaviour, specks, usage, anatomy, do's and don'ts
Documented html/css and React frontend kit
Recommended blueprints for every step of the flow, including experiences such as interactions and feedback animations
Documented design and code libraries
An extensive UI library
Described and documented behaviour, specks, usage, anatomy, do's and don'ts
Documented html/css and React frontend kit
Recommended blueprints for every step of the flow, including experiences such as interactions and feedback animations