Facade

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

The core objectives of this project were to:

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.

Business Objectives

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

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

Add summarised points here about the two points below

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.

Iteration & Refinements: The early usability testing results were instrumental in driving informative design iterations. This iterative process ensured that the final designs were not only aesthetically pleasing but also highly functional and accessible to the target audience. The continuous feedback loop throughout the project's major stages was crucial for achieving a user-centred outcome.

BLURB ABOUT TESTING image on right

Image here

BLURB ABOUT TESTING image on right

Final Design

Add a blurb about the final design

View Prototype

Image Title

Describe your image here

Results

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.

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.

20%
increase in sessions

88%
increase in sessions with product views

19%
increase in sessions with Add to Cart

31%
increase in sessions with Check-out

17%
increase in sessions with transactions

Create Your First Project

Start adding your projects to your portfolio. Click on "Manage Projects" to get started