Retail Apparel Group (RAG):

yd. Headless E-commerce Website Redesign

This design-focused engagement with Retail Apparel Group (RAG) aimed to deliver a transformative headless Progressive Web App (PWA) solution for the yd. website. The project sought to align yd.'s online presence with their refreshed in-store experience, creating a cohesive omnichannel journey. Key objectives included implementing robust e-commerce capabilities, prioritising rich content presentation, streamlining promotional activities, and simplifying the overall buying journey for yd.'s style-conscious customers.

Role

As the sole UX/UI Designer on this project, I collaborated directly with the Project Manager and the external stakeholder team at RAG. My responsibilities spanned the entire design process, from initial discovery and concept development through to the delivery of final design specifications and prototypes. Towards the project's midpoint, my responsibilities broadened to encompass elements of project management, ensuring seamless communication and delivery.

Goals

Deliver a contemporary website design leveraging a headless PWA architecture.
Develop a comprehensive set of accessible and functional UI design components to facilitate efficient page building and scale the e-commerce platform.
Create an intuitive solution for presenting grouped product packages with clearly applied discounts.
Design a seamless and user-friendly Click & Collect experience, thoughtfully integrating both UX and UI principles.

Timeline

This project was completed over a 10-week period (November 2021 - January 2022). Notably, the success of this project was recognised with the 'Best Use of UI/UX Design' award at the Asia Commerce Awards 2022.

Understanding the Problem

The Challenge

The primary objective of the yd. website redesign was to create a frictionless customer experience that seamlessly supported the brand's omnichannel strategy. yd. aimed to become a leader in men's apparel omnichannel retailing, driving business growth through increased online penetration. A key challenge was to move beyond the previous website's category-driven structure and dated e-commerce functionality (which lacked Click & Collect) towards a "content is king" approach to product presentation, reflecting yd.'s in-store brand experience.

User Insights

Prior to commencing the design phase, I conducted in-depth user research, including brand immersion across RAG's portfolio, competitive analysis of existing Click & Collect implementations by Australian omnichannel retailers, and a thorough analysis of yd.'s Google Analytics, Hotjar heatmaps, and customer surveys. This research aimed to identify key user behaviours, pain points, and opportunities for enhancement. Key insights revealed the need to:

Refine Product Tiles: Overcrowded product tiles with excessive information were overwhelming some users, who prioritised price information often obscured by less relevant details.
Embrace Content-Rich Presentation: Users frequently navigated through product images to view model shots, and significant traffic originated from and exited to social media platforms like Instagram, highlighting the importance of visual content.
Address Checkout Abandonment: A high drop-off rate during checkout was likely due to the placement of the promo code field on the final payment step, prompting users to leave the checkout to search for codes.

*** Please note Heat Mapping results have been emulated due to analytics privacy.

Business Objectives

This project directly aligned with RAG's broader business objectives by:

Creating a Seamless Omnichannel Experience: Bridging the gap between yd.'s physical and online stores to provide a unified customer journey.
Enhancing E-commerce Capabilities: Developing a platform capable of supporting diverse promotional activities, upselling opportunities, and showcasing trending looks as hero content.
Establishing a Scalable Framework: Creating a design system and platform architecture that could be leveraged across RAG's other brands, ensuring consistency while allowing for brand-specific customisation.

Design Process

Approach

To address RAG's objective of harmonising online and in-store experiences, I consulted with yd.'s retail staff. By understanding their customer interactions, particularly regarding coordinated upselling, two-to-three-piece suit offers, and event-specific outfit recommendations, I identified key patterns vital to the in-store experience. Integrating these elements online became a priority to ensure a true omnichannel experience.

The design phase focused on creating an intuitive user experience with a streamlined path to purchase, mirroring the in-store product discovery process. This involved designing grouped product pages for suits, dedicated new collection features, and contextually relevant "recommended products" on Product Display Pages (PDPs). The headless architecture empowered the exploration of innovative design solutions unconstrained by platform limitations. Accessibility and the development of functional UI components for scalability were central to my design approach.

Information Architecture (IA) & User Flows

The website's user journey was refined to reduce navigational layers, simplifying the path to Product Listing Pages (PLPs). The introduction of new functionalities on the homepage also created alternative and engaging pathways for users. My approach prioritised a continuous user journey, ensuring clear pathways towards the ultimate goal of purchase.

Wireframing & Prototyping

The wireframing process involved a collaborative effort with the yd. and RAG development teams. I focused on creating modular "building blocks" or "Organisms" (aligning with Atomic Design principles) to enable the rapid generation of diverse page layouts. This approach equipped the yd. team with a highly customisable homepage capable of adapting to various promotional campaigns.

The subsequent prototyping phase was iterative and intensive. I dedicated significant time to refining designs, creating functional prototypes with detailed micro-interactions, and engaging in continuous feedback loops with the development teams. Crucially, I also incorporated insights from in-store staff throughout the process, ensuring a user-centric approach that prioritised the needs of both online and offline customers as well as the feedback from our internal feedback team.

Visual Design (UI)

Leveraging yd.'s recently refreshed brand guidelines for in-store, I had the opportunity to design key UI elements for the online experience such as buttons, CTAs, product tiles, badges, and a comprehensive set of icons and menu layouts. The brand's pre-defined fonts and colour palette provided a strong foundation, facilitating efficient collaboration with the wider team on establishing clear visual hierarchy.

Key Design Solutions

The redesigned yd. website incorporated several key features to address the identified problems and achieve the project goals:

Streamlined Click & Collect

A key implementation was a seamless Click & Collect journey, allowing users to easily locate nearby stores, check stock availability, and complete purchases for collection within a two-hour timeframe. This prioritised speed and convenience, addressing the limitations of the previous warehouse-based model. Close collaboration with the development team ensured a user-friendly and technically feasible solution.

"Social Story" Inspired Categories

Innovative "social" categories, visually resembling social media "Stories," were introduced to curate product selections around specific themes or events (e.g., "Summer Looks," "Race Day Outfits"). This allowed the yd. team to strategically promote specific products, including those with lower stock or sale items, in a visually engaging manner.

Interaction Design

The design incorporated clear feedback mechanisms for user interactions and intuitive micro-animations to enhance navigation and provide visual cues.

Accessibility Considerations

WCAG AAA compliance was a fundamental requirement and an integral part of the design process. Considerations included ensuring legible font sizes, sufficient colour contrast using the brand palette, and appropriately sized and spaced touch targets for all interactive elements.

Testing & Iteration

Usability Testing

Internal usability testing was conducted at key stages of the design process: during initial concept development, after the creation of a detailed prototype, and prior to final design approval. Given yd.'s target demographic, particular attention was paid to ensuring accessibility and usability for a specific range of users, including those who may require larger touch targets on mobile devices.

Initial testing revealed that the mobile designs were too condensed, causing navigation issues for a significant portion of the focus group. This critical feedback directly informed subsequent design iterations, leading to adjustments that accommodated a broader range of users while maintaining the aesthetic integrity of the design.

Final Design

The yd. redesign focused on a content-first approach, utilising "social story"-inspired categories and dynamic product tiles. A modular design system enabled flexible content presentation, while a streamlined Click & Collect journey offered user convenience. Accessibility was paramount, ensuring a user-friendly experience across all devices.

The award-winning headless PWA delivered a visually engaging and functionally robust platform.

Lessons Learned

This project provided a valuable opportunity to hone my client-facing design skills and to take on project management responsibilities during a period of company restructuring. Building strong relationships with the RAG teams was a key takeaway, fostering a collaborative and efficient working style that led to future project opportunities. The importance of establishing rapport and maintaining open communication with clients was strongly reinforced.

Results & Impact

Outcomes

The yd. Website Redesign was recognised with the 'Best Use of UI/UX Design' award at the Asia Commerce Awards 2022. Following the redesign, yd. experienced a 23% increase in conversion rates and a 16% improvement in user satisfaction scores based on post-purchase surveys. The success of this project also led to a continued working relationship with RAG, involving redesign projects for several of their other e-commerce brands.

The new platform has significantly improved yd.’s business performance, by deploying solutions and features that provide a competitive edge. yd.’s competitors are still very much focused on the traditional commerce journey based around categories, and are therefore limited in providing customised experiences.

Overall, there has been a considerable increase in engagement throughout the customer journey, including: 20% increase in sessions, 88% increase in sessions with product views, 19% increase in sessions with Add to Cart, 31% increase in sessions with Checkout, 17% increase in sessions with transactions.

By leveraging Adobe Commerce Global Reference Archetcutre, I was able to develop a highly efficient solution that delivered significant ROI for yd., results in: 17% increase in transactions & 10% increase in sessions with revenue.

20%

Increase in sessions

88%

Increase in product views

19%

Increase in Add to Cart

17%

Increase in sessions with transactions

Conclusion

Leading the UX/UI design for the yd. website redesign was a thoroughly enjoyable experience. Working with an iconic Australian brand and contributing to its online evolution was particularly rewarding. Winning the 'Best Use of UI/UX Design' award at the Asia Commerce Awards 2022 was a significant highlight, validating the user-centred design approach and the collaborative efforts of the entire team. This project has significantly shaped my understanding of what constitutes award-winning design and continues to inform my working methods.

Thank you for reviewing this case study. Please feel free to reach out if you have any questions.

Previous Project

Next Project

Skills Highlighted

UX Research

User Interviews, Surveys, Usability Testing, Competitive Analysis.

UX Design

Information Architecture, User Flow Creation, Wireframing (Low-fidelity & High-fidelity), Prototyping (Figma)

UI Design

Visual Design Principles, Typography, Colour Theory Application, Iconography, Style Guide Adherence, Component Libraries

Tools

Figma, Hotjar, Google Analytics

Other Relevant Skills

Strong Collaboration, Effective Communication, Problem-Solving, User-Centred Design Principles, Commitment to Accessibility Standards