- Client: A Leading Sportswear brand
- Duration: Aug '21 - Nov '22
E-commerce UX Enhancement for a Global Sportswear Brand
This case study explores a transformative UX project executed for a leading sportswear brand, covering a full range of innovative design solutions.
Over the project duration, the goal was to streamline the brand's digital platform, making it accessible, intuitive, and efficient for a worldwide user base. The project centered on improving UX across web and mobile platforms for both left-to-right (LTR) and right-to-left (RTL) layouts, integrating region-specific customizations, and supporting various high-impact campaigns like the Qatar FIFA World Cup 2022, adiClub, and exclusive product releases.
The core project aimed to enhance user journeys across the brand’s digital interfaces by improving performance, user engagement, and accessibility. With a focus on cross-regional functionality, it involved adapting the user experience to suit diverse cultural and language needs, ensuring consistency with the brand’s design system, and promoting efficient shopping and membership experiences.
Requirement Gathering and Analysis
Collaborated with the business analysts (BAs) and design teams to understand the requirements for each campaign and feature enhancement. Regular interactions with UX designers from the internal design team ensured that global guidelines were followed precisely while leaving room for innovative UX optimizations specific to the brand’s audience.
Design System Adherence and Customization
Strict adherence to the brand’s design system was crucial, along with regional modifications. For example, Middle Eastern and North African (MENA) markets required the right-to-left (RTL) conversion of user interfaces for languages such as Arabic and Hebrew, enhancing user accessibility and engagement.
Campaign Integration
Throughout the project, several high-profile campaigns were launched on the platform:
- Qatar FIFA World Cup 2022: This global sporting event spurred specialized marketing efforts, with region-specific promotions and exclusive product lines that needed dedicated UI elements and functionalities.
- adiClub Campaign: A loyalty program was integrated to give members exclusive perks such as early access, rewards and member-only pricing. UX solutions were implemented to distinguish between tiered early access (24 hours, 1 hour, etc.), ensuring a seamless experience for members based on their membership level.
- Yeezy and Hype Product Drops: High-demand items like Yeezy and other Hype products were launched with dynamic functionalities, including timers that added urgency during checkout, fostering a ‘fear of missing out’ (FOMO) effect to encourage faster purchases.
Web and Mobile Functionality Management
The platform underwent regular updates and maintenance, responding to emerging user needs, campaign requirements, and market trends. Key enhancements included updates to login and registration pages, improvements to the UAE-specific checkout and login flow, and a shift in logo design from a wordmark to an abstract mark, each requiring UX adjustments to ensure consistency and usability across all regions.
Continuous Maintenance and Updates
The platform underwent regular updates and maintenance, responding to emerging user needs, campaign requirements, and market trends. Key enhancements included updates to login and registration pages, improvements to the UAE-specific checkout and login flow, and a shift in logo design from a wordmark to an abstract mark, each requiring UX adjustments to ensure consistency and usability across all regions.
Tools and Techniques Used
- Jira for task management and tracking, with tasks and features organized into tickets.
- Sketch and Figma for prototyping and creating interactive mockups.
- Heatmaps and Funnel Analysis to observe user behaviors across the site.
- Salesforce Commerce Cloud (SFCC) and GlobalE Integration for managing content and regional checkout flows.
- User Testing and A/B Testing to validate feature effectiveness and continuously improve the UX.
Qatar FIFA World Cup 2022
A high-traffic event, the World Cup campaign required localized marketing materials and exclusive pages promoting event-related apparel and gear. A UX emphasis was placed on intuitive navigation and rapid loading times to handle the expected surge in traffic.
adiClub and Membership Exclusives
The membership program, designed as a loyalty system, included user access to benefits such as tiered early access and member-exclusive items. The UX design segmented access based on membership levels, with time-based promotions that were clearly defined and easy for users to navigate.
Hype-Ivy League and Yeezy Product Drops
Popular Hype releases were timed and announced in advance, creating urgency through countdown timers that were strategically placed in the product details to heighten interest and encourage quick actions. Timers and prominent call-to-action (CTA) buttons were integrated to optimize user engagement during these high-demand releases.
Problem
Cart abandonment analysis indicated a significant drop-off at checkout due to the "Add Promo Code" field’s initial placement, which appeared just before the "Buy Now" button. This positioning led users to leave the checkout flow in search of promo codes, disrupting the purchase journey.
Solution & UX Strategy
- User-Centered Analysis: Through heatmap data and feedback from usability testing, the UX team found that users frequently paused their checkout process upon seeing the promo code field. The field’s prominent placement encouraged them to leave the page to find promo codes.
- Redesign of Checkout Flow: The “Add Promo Code” field was nested within the payment section, making it accessible without distracting users from the final purchase CTA. This structural change helped retain user focus on completing the transaction.
- A/B Testing and Funnel Analysis: By conducting A/B tests on different checkout layouts, the variant with the nested promo code field showed a 15% increase in completed transactions, validating the repositioned design.
Outcome
The modified design improved user retention through checkout, resulting in fewer disruptions and a reduction in cart abandonment rates.
Objective
To accommodate the needs of the MENA region, RTL language support was introduced for Arabic and Hebrew speakers. This required an overhaul of UI layouts to enhance usability and accessibility for RTL users.
Phased Implementation (Bucketing System)
The project was broken down into bundles based on priority features: Converted high-traffic pages like global navigation, PLP, and PDP, ensuring that essential user interactions were RTL-compliant, focused on account-related sections such as "My Account" and other personalized features, completed the RTL layout for checkout flows and integrated third-party systems (e.g., GlobalE for payments) etc.
RTL Design Adaptations
- UI Mirroring: UI elements, such as icons and navigational arrows, were mirrored as per the reference document provided by the client to create a cohesive visual flow for RTL readers.
- Content Length Adaptations: Consideration was given to Arabic text expansion, leading to adaptive spacing adjustments across templates to prevent truncation.
- Prototype Validation and Feedback: Prototypes created in Figma and InVision were shared with native speakers and regional SMEs, whose feedback helped optimize the design further.
Assumptions and Dependencies
- Content authoring remained within the brand’s internal team for consistency.
- Product owners and SMEs provided regular feedback on visual and content requirements to ensure seamless implementation.
- Language-specific adjustments and error message localization were synchronized with external systems (GlobalE, AIC/APC) for checkout and registration.
Outcome
- The RTL adaptation increased regional accessibility and usability, leading to higher engagement in MENA markets, demonstrating the importance of localization in global UX design.
The Project Impact
The project demonstrated the effectiveness of a user-centric approach in global UX.
Key outcomes included:
- Increased Conversion and Retention: Strategic optimizations reduced checkout abandonment rates and made the platform more accessible for MENA regions.
- Enhanced Engagement Through Campaigns: With tailored experiences for promotions like the adiClub and Hype product drops, the platform achieved better engagement and customer loyalty.
- Consistent Global Experience: Alignment with the brand’s design system, enhanced by region-specific modifications, reinforced a consistent yet locally relevant user experience.