Foot Locker: Elevating the Foot Locker Experience: App UX/UI Redesign

Industry

Technology

Client

Foot Locker

Year

(2020)

Role

UX / Product Design lead

UX / Product design lead

Year

(2020)

Challenge

01

Foot Locker's existing digital experiences were plagued by outdated technology and a stale visual identity, hindering user engagement and sales. Recognizing the need for a comprehensive overhaul, I led a team of 5 UX/UI designers in a mission to revitalize the brand's digital presence. This ambitious undertaking presented several significant challenges: (1) Securing Corporate Buy-in: Gaining approval for a complete UX/UI redesign across all 7 Foot Locker banner sites required a strong vision, compelling presentations, and a deep understanding of business objectives. (2) Cross-functional Collaboration: Successful implementation demanded seamless collaboration with research teams to understand user needs, close alignment with engineering teams to ensure technical feasibility, and effective communication with stakeholders across various departments. (3) Comprehensive Design System: We needed to develop a robust and scalable design system that would serve as a foundation for all future digital experiences, ensuring consistency and efficiency across the entire brand ecosystem. (4) Demonstrating Value: To effectively communicate the value of our proposed redesign, we created high-fidelity prototypes that showcased the enhanced user experience and demonstrated the potential for increased customer engagement and revenue.

Foot Locker's existing digital experiences were plagued by outdated technology and a stale visual identity, hindering user engagement and sales. Recognizing the need for a comprehensive overhaul, I led a team of 5 UX/UI designers in a mission to revitalize the brand's digital presence. This ambitious undertaking presented several significant challenges: (1) Securing Corporate Buy-in: Gaining approval for a complete UX/UI redesign across all 7 Foot Locker banner sites required a strong vision, compelling presentations, and a deep understanding of business objectives. (2) Cross-functional Collaboration: Successful implementation demanded seamless collaboration with research teams to understand user needs, close alignment with engineering teams to ensure technical feasibility, and effective communication with stakeholders across various departments. (3) Comprehensive Design System: We needed to develop a robust and scalable design system that would serve as a foundation for all future digital experiences, ensuring consistency and efficiency across the entire brand ecosystem. (4) Demonstrating Value: To effectively communicate the value of our proposed redesign, we created high-fidelity prototypes that showcased the enhanced user experience and demonstrated the potential for increased customer engagement and revenue.

Foot Locker's existing digital experiences were plagued by outdated technology and a stale visual identity, hindering user engagement and sales. Recognizing the need for a comprehensive overhaul, I led a team of 5 UX/UI designers in a mission to revitalize the brand's digital presence. This ambitious undertaking presented several significant challenges: (1) Securing Corporate Buy-in: Gaining approval for a complete UX/UI redesign across all 7 Foot Locker banner sites required a strong vision, compelling presentations, and a deep understanding of business objectives. (2) Cross-functional Collaboration: Successful implementation demanded seamless collaboration with research teams to understand user needs, close alignment with engineering teams to ensure technical feasibility, and effective communication with stakeholders across various departments. (3) Comprehensive Design System: We needed to develop a robust and scalable design system that would serve as a foundation for all future digital experiences, ensuring consistency and efficiency across the entire brand ecosystem. (4) Demonstrating Value: To effectively communicate the value of our proposed redesign, we created high-fidelity prototypes that showcased the enhanced user experience and demonstrated the potential for increased customer engagement and revenue.

Visit Vebsite

Visit Vebsite

Visit Vebsite

Approach

02

Recognizing the need for a modern and engaging digital experience, I spearheaded a comprehensive UX/UI redesign initiative, leading a team of 5 designers. To ensure successful implementation, our approach encompassed several key elements: (1) User-Centered Research: We collaborated closely with internal research teams to gather insights into user needs, pain points, and expectations. This included user interviews, usability testing, and data analysis. (2) Design System Development: We developed a robust and scalable design system, encompassing a comprehensive style guide, UI components, and interaction patterns. This system provided a foundation for consistency and efficiency across all Foot Locker banner sites. (3) Cross-functional Collaboration: We fostered strong working relationships with engineering, product management, and marketing teams to ensure alignment and smooth integration of our designs. This involved regular communication, design reviews, and collaborative workshops. (4) Comprehensive Use Case Mapping: We meticulously mapped out all user flows and interactions across all 7 Foot Locker banner sites, ensuring a consistent and seamless experience regardless of the entry point. (5) Prototype Development & Presentation: We created interactive prototypes to effectively communicate our design vision to the corporate team. These prototypes demonstrated the enhanced user experience and the value proposition of the new design system. We successfully secured buy-in from the corporate team for our proposed UX/UI redesign. This paved the way for the successful implementation of a modernized and engaging digital experience for Foot Locker customers. See some of the jazz throughout the page!

Recognizing the need for a modern and engaging digital experience, I spearheaded a comprehensive UX/UI redesign initiative, leading a team of 5 designers. To ensure successful implementation, our approach encompassed several key elements: (1) User-Centered Research: We collaborated closely with internal research teams to gather insights into user needs, pain points, and expectations. This included user interviews, usability testing, and data analysis. (2) Design System Development: We developed a robust and scalable design system, encompassing a comprehensive style guide, UI components, and interaction patterns. This system provided a foundation for consistency and efficiency across all Foot Locker banner sites. (3) Cross-functional Collaboration: We fostered strong working relationships with engineering, product management, and marketing teams to ensure alignment and smooth integration of our designs. This involved regular communication, design reviews, and collaborative workshops. (4) Comprehensive Use Case Mapping: We meticulously mapped out all user flows and interactions across all 7 Foot Locker banner sites, ensuring a consistent and seamless experience regardless of the entry point. (5) Prototype Development & Presentation: We created interactive prototypes to effectively communicate our design vision to the corporate team. These prototypes demonstrated the enhanced user experience and the value proposition of the new design system. We successfully secured buy-in from the corporate team for our proposed UX/UI redesign. This paved the way for the successful implementation of a modernized and engaging digital experience for Foot Locker customers. See some of the jazz throughout the page!

Recognizing the need for a modern and engaging digital experience, I spearheaded a comprehensive UX/UI redesign initiative, leading a team of 5 designers. To ensure successful implementation, our approach encompassed several key elements: (1) User-Centered Research: We collaborated closely with internal research teams to gather insights into user needs, pain points, and expectations. This included user interviews, usability testing, and data analysis. (2) Design System Development: We developed a robust and scalable design system, encompassing a comprehensive style guide, UI components, and interaction patterns. This system provided a foundation for consistency and efficiency across all Foot Locker banner sites. (3) Cross-functional Collaboration: We fostered strong working relationships with engineering, product management, and marketing teams to ensure alignment and smooth integration of our designs. This involved regular communication, design reviews, and collaborative workshops. (4) Comprehensive Use Case Mapping: We meticulously mapped out all user flows and interactions across all 7 Foot Locker banner sites, ensuring a consistent and seamless experience regardless of the entry point. (5) Prototype Development & Presentation: We created interactive prototypes to effectively communicate our design vision to the corporate team. These prototypes demonstrated the enhanced user experience and the value proposition of the new design system. We successfully secured buy-in from the corporate team for our proposed UX/UI redesign. This paved the way for the successful implementation of a modernized and engaging digital experience for Foot Locker customers. See some of the jazz throughout the page!

Our process

Our process

03

Based on our feeback from coporate we rolled out a process to achieve our goals: (1) Directed a team of 5 designers in a comprehensive UX and UI redesign. (2) Divided the project by device: iOS, Android, and Web. (3) Paired senior designers with junior designers to foster knowledge sharing and mentorship. (4) Assumed responsibility for: • Product Detail Page (PDP) and Product List Page (PLP) for Web. • Product Detail Page (PDP) and Product List Page (PLP) for iOS. (5) Implemented daily stand-up meetings to maintain project momentum. (6) Collaborated closely with product and engineering leaders to develop a modular component system. (7) Streamlined the design and development process through the use of a modular component system. (8) Integrated this project into each team member's quarterly and yearly goals to enhance motivation and align individual growth with project success.

Based on our feeback from coporate we rolled out a process to achieve our goals: (1) Directed a team of 5 designers in a comprehensive UX and UI redesign. (2) Divided the project by device: iOS, Android, and Web. (3) Paired senior designers with junior designers to foster knowledge sharing and mentorship. (4) Assumed responsibility for: • Product Detail Page (PDP) and Product List Page (PLP) for Web. • Product Detail Page (PDP) and Product List Page (PLP) for iOS. (5) Implemented daily stand-up meetings to maintain project momentum. (6) Collaborated closely with product and engineering leaders to develop a modular component system. (7) Streamlined the design and development process through the use of a modular component system. (8) Integrated this project into each team member's quarterly and yearly goals to enhance motivation and align individual growth with project success.

Based on our feeback from coporate we rolled out a process to achieve our goals: (1) Directed a team of 5 designers in a comprehensive UX and UI redesign. (2) Divided the project by device: iOS, Android, and Web. (3) Paired senior designers with junior designers to foster knowledge sharing and mentorship. (4) Assumed responsibility for: • Product Detail Page (PDP) and Product List Page (PLP) for Web. • Product Detail Page (PDP) and Product List Page (PLP) for iOS. (5) Implemented daily stand-up meetings to maintain project momentum. (6) Collaborated closely with product and engineering leaders to develop a modular component system. (7) Streamlined the design and development process through the use of a modular component system. (8) Integrated this project into each team member's quarterly and yearly goals to enhance motivation and align individual growth with project success.

Results

04

+15.8% YoY Checkout to Order Conversion Rate: This significant increase demonstrates a marked improvement in the user experience, leading to a higher likelihood of customers completing their purchases. -5.06% YoY Cart Abandonment Rate: A lower abandonment rate indicates that fewer customers are leaving their shopping carts before completing their purchase, suggesting a more user-friendly and engaging checkout process. -16.68% PDP Exit Rate: This reduction in the exit rate from the Product Detail Page suggests that users are spending more time on product pages, exploring details and making informed purchase decisions.

+15.8% YoY Checkout to Order Conversion Rate: This significant increase demonstrates a marked improvement in the user experience, leading to a higher likelihood of customers completing their purchases. -5.06% YoY Cart Abandonment Rate: A lower abandonment rate indicates that fewer customers are leaving their shopping carts before completing their purchase, suggesting a more user-friendly and engaging checkout process. -16.68% PDP Exit Rate: This reduction in the exit rate from the Product Detail Page suggests that users are spending more time on product pages, exploring details and making informed purchase decisions.

+15.8% YoY Checkout to Order Conversion Rate: This significant increase demonstrates a marked improvement in the user experience, leading to a higher likelihood of customers completing their purchases. -5.06% YoY Cart Abandonment Rate: A lower abandonment rate indicates that fewer customers are leaving their shopping carts before completing their purchase, suggesting a more user-friendly and engaging checkout process. -16.68% PDP Exit Rate: This reduction in the exit rate from the Product Detail Page suggests that users are spending more time on product pages, exploring details and making informed purchase decisions.

Approach

02

Recognizing the need for a modern and engaging digital experience, I spearheaded a comprehensive UX/UI redesign initiative, leading a team of 5 designers. To ensure successful implementation, our approach encompassed several key elements: (1) User-Centered Research: We collaborated closely with internal research teams to gather insights into user needs, pain points, and expectations. This included user interviews, usability testing, and data analysis. (2) Design System Development: We developed a robust and scalable design system, encompassing a comprehensive style guide, UI components, and interaction patterns. This system provided a foundation for consistency and efficiency across all Foot Locker banner sites. (3) Cross-functional Collaboration: We fostered strong working relationships with engineering, product management, and marketing teams to ensure alignment and smooth integration of our designs. This involved regular communication, design reviews, and collaborative workshops. (4) Comprehensive Use Case Mapping: We meticulously mapped out all user flows and interactions across all 7 Foot Locker banner sites, ensuring a consistent and seamless experience regardless of the entry point. (5) Prototype Development & Presentation: We created interactive prototypes to effectively communicate our design vision to the corporate team. These prototypes demonstrated the enhanced user experience and the value proposition of the new design system. We successfully secured buy-in from the corporate team for our proposed UX/UI redesign. This paved the way for the successful implementation of a modernized and engaging digital experience for Foot Locker customers. See some of the jazz throughout the page!

Recognizing the need for a modern and engaging digital experience, I spearheaded a comprehensive UX/UI redesign initiative, leading a team of 5 designers. To ensure successful implementation, our approach encompassed several key elements: (1) User-Centered Research: We collaborated closely with internal research teams to gather insights into user needs, pain points, and expectations. This included user interviews, usability testing, and data analysis. (2) Design System Development: We developed a robust and scalable design system, encompassing a comprehensive style guide, UI components, and interaction patterns. This system provided a foundation for consistency and efficiency across all Foot Locker banner sites. (3) Cross-functional Collaboration: We fostered strong working relationships with engineering, product management, and marketing teams to ensure alignment and smooth integration of our designs. This involved regular communication, design reviews, and collaborative workshops. (4) Comprehensive Use Case Mapping: We meticulously mapped out all user flows and interactions across all 7 Foot Locker banner sites, ensuring a consistent and seamless experience regardless of the entry point. (5) Prototype Development & Presentation: We created interactive prototypes to effectively communicate our design vision to the corporate team. These prototypes demonstrated the enhanced user experience and the value proposition of the new design system. We successfully secured buy-in from the corporate team for our proposed UX/UI redesign. This paved the way for the successful implementation of a modernized and engaging digital experience for Foot Locker customers. See some of the jazz throughout the page!

Our process

Our process

03

Based on our feeback from coporate we rolled out a process to achieve our goals: (1) Directed a team of 5 designers in a comprehensive UX and UI redesign. (2) Divided the project by device: iOS, Android, and Web. (3) Paired senior designers with junior designers to foster knowledge sharing and mentorship. (4) Assumed responsibility for: • Product Detail Page (PDP) and Product List Page (PLP) for Web. • Product Detail Page (PDP) and Product List Page (PLP) for iOS. (5) Implemented daily stand-up meetings to maintain project momentum. (6) Collaborated closely with product and engineering leaders to develop a modular component system. (7) Streamlined the design and development process through the use of a modular component system. (8) Integrated this project into each team member's quarterly and yearly goals to enhance motivation and align individual growth with project success.

Based on our feeback from coporate we rolled out a process to achieve our goals: (1) Directed a team of 5 designers in a comprehensive UX and UI redesign. (2) Divided the project by device: iOS, Android, and Web. (3) Paired senior designers with junior designers to foster knowledge sharing and mentorship. (4) Assumed responsibility for: • Product Detail Page (PDP) and Product List Page (PLP) for Web. • Product Detail Page (PDP) and Product List Page (PLP) for iOS. (5) Implemented daily stand-up meetings to maintain project momentum. (6) Collaborated closely with product and engineering leaders to develop a modular component system. (7) Streamlined the design and development process through the use of a modular component system. (8) Integrated this project into each team member's quarterly and yearly goals to enhance motivation and align individual growth with project success.