PRODUCT CARDS

Case Study | ’21-22

As Lead Designer at an innovative fashion tech company, I spearheaded the redesign of a key e-commerce feature: the product card

About Yaytrade
Yaytrade was an innovative fashion tech company that offered a unique platform for buying and selling premium second-hand fashion and exclusive brand sales.

Overview
The goal of this project was to redesign the product cards on Yaytrade, addressing visual and functional limitations that hindered user experience, engagement, and conversions.

The original design was dramatically lifted as part of a 2020 site-wide redesign, followed by small iterations. In late 2021, we moved forward with a full redesign to resolve lingering issues and unlock additional features.

The redesigned product cards improved usability, enhanced visual appeal, and introduced key features like size toggling, color variations, and clearer information hierarchy—making the shopping experience faster and more engaging.

Business Problem
Yaytrade’s legacy product cards had several pain points:

Limited functionality: Users could view size options but not select them, colour variations weren’t displayed despite being linked in the database, and the responsive behaviour was poorly implemented and inconsistent.
Poor visual design: The original cards had a cluttered design with inconsistent framing of product images, and key information wasn’t presented in a user-friendly way.
Engagement and conversion issues: Users struggled to interact with products efficiently, which led to low engagement, increased bounce rates, and lower conversion.

While continuous minor iterations addressed these issues, this project aimed to fully resolve them, elevate the visual design, and introduce innovative features to enhance the user experience.

Research & Discovery

Crowdsourced Research

Competitive Analysis

Deep Dive Example

Statistics

Persona / User Journey

To align the redesign with user needs and business goals, we conducted extensive research, including a comprehensive competitive analysis.

I crowdsourced e-commerce insights by asking coworkers to share their best experiences. Informed by their submissions, I explored how fashion sites handled product details (size, colour, price), interactive features (like add to cart, toggling variations, and wishlisting), and layout choices, including hover actions and product card arrangements.

The key findings from this research included:

Size and colour toggles were common but not universal.
Sites with on-card 'Add to Cart' functionality could add efficiency and delight, but introduced complexity and was not as widely adopted as anticipated.
A unique opportunity arose to introduce Wildcards (photo-only cards with details on hover/long press) and "Coming Soon" cards for brand sales, offering innovation in e-commerce.

Product type indicators were uncommon—Yaytrade's use of product-type tags to differentiate between brand sale, second-hand, and influencer-driven listings highlighted a major area of user confusion, particularly with the influencer tag.

We aligned this project with a recently conducted persona study, which provided additional insights into user needs. The study showed that the 'influencer' tag notably caused confusion across all user personas except for the small "influencer-interested" demographic.

This group was not only small but also the least significant in terms of overall revenue potential, which led to the decision to remove the influencer tag.

I led workshops with key stakeholders, including the CTO and CMO, to identify the features with the greatest potential impact. These discussions informed the feature prioritisation for the MVP release and shaped the roadmap for future development.

Competitive Analysis

Wireframing & Prototyping

Mobile Prototype

Desktop Prototype

Testing Components

Exploring Interactions

The wireframing phase focused on creating designs for both mobile and desktop that addressed the core user needs and business objectives. Key features incorporated included:

Size selection on hover (desktop) and size visibility (mobile)
Colour toggling between variations
Improved visual hierarchy for product details (price, brand, availability)

Add to Cart button directly on the product card
Innovative features like Wildcards and Coming Soon cards

We tested the prototypes with users to ensure usability and clarity.

This iterative process allowed us to refine the design based on user feedback while validating high-fidelity concepts.

View the Prototype Design

Hi-Fi Design & Visual Enhancements

Design Evolution

Desktop Work-in-Progress

Colour Variations

Wildcard

Coming Soon Mobile

Coming Soon Desktop

Once the wireframes were validated, I moved on to high-fidelity design, focusing on:

Clear visual hierarchy
Typography and layout were refined to prioritise key information such as brand name, price, and size, ensuring users could easily grasp the most important details.

Addressing product photography
Due to inconsistent image backgrounds (ranging from blown out to medium grey), I replaced the unrefined outline stroke with a subtle drop shadow over a soft grey background. This simple adjustment allowed the product photos to stand out and reduced visual clutter.

Tag reconceptualisation
Based on research and stakeholder feedback, we strategically removed the influencer tag and replaced it with more relevant options—‘New from Brand’ and ‘Second-hand’—better aligning with user expectations and reflecting the evolving business direction.

Colour variations
Colour chip buttons were introduced to improve the visibility and selection of colour variations directly via the product card.

Swipeable images
We revised a feature that enabled users to swipe through product images directly on the card for a more natural interaction.

Wildcards and Coming Soon cards
These features added a layer of excitement and engagement for upcoming sales or product promotions, aligning with Yaytrade’s unique business model and helping the platform stand out in a competitive market.

The design was pixel-perfect, fully responsive, and visually beautiful—positioning Yaytrade as a leader in cutting-edge e-commerce design.

MVP & Feature Roadmap

MVP Release Variations

Shelf — Mobile Flow

Shelf — Desktop Example

Hero Variant

The initial MVP release focused on the following core features:

Revised product card layout with improved information hierarchy
Fully responsive design, adaptable across all devices with the flexibility to adjust the number of cards per row
Tag update, showing only the most relevant information: ‘New from Brand’ and ‘Second-hand’
Size options displayed directly on the card for mobile and on hover for desktop

Features evaluated for future releases included:

Colour and size toggling
‘Add to Cart’ button directly from the product card
Wildcards for more immersive product discovery

Coming Soon cards to build anticipation and harvest sign-ups for upcoming brand sales
Favourite/wishlist support for personalised shopping experiences
Hero design variant for featuring cards in hero modules

I worked closely with developers to ensure scalability—building the MVP with a mindset to facilitate the rollout of additional features in future releases.

Post-MVP analysis was instrumental in shaping the design's evolution. A future-proof foundation enabled us to quickly iterate on a more dynamic solution, whereby interactive features like size selection and the ‘Add to Cart’ button were integrated with a modern shelf design. This flexible approach appeared to be both easier to develop and more user-friendly.

Design System Sample Shelf Iteration

Testing & Iteration

A/B Test — Home Page

A/B Test — Store Page

Smoke Test — Add to Cart

After the MVP launch, we quickly conducted A/B testing to fine-tune the number of product cards per row. Initially, we opted for larger cards based on user and stakeholder preferences, competitive analysis (where large cards correlated with premium brands), and prototype testing.

The A/B test nevertheless confirmed that more smaller cards per row performed better, leading to higher engagement and better UX. As a result, we set the default to smaller cards but maintained flexibility for future experiments with larger cards when needed.

A/B Test Visualisation

Results & Impact

Release Publicity

How It Started vs. How It’s Going

Design System Sample

The redesigned product cards and ad grids had a significant impact on both the user experience and business outcomes:

Increased engagement: The improved card design made the shopping experience faster and more engaging.
Higher conversion rates: The change to smaller cards and the enhanced visual hierarchy resulted in a measurable increase in user interaction and conversion rates.
Brand satisfaction: Fashion brand partners appreciated the visual lift, which showcased their products in a more appealing and premium way.
Innovation: Wildcards and Coming Soon cards were innovative features that positioned Yaytrade as a market leader in e-commerce design.
User feedback: Positive feedback from users, measured via tools like Hotjar, confirmed that the new design was intuitive and visually appealing.

This redesign not only marked a significant step forward in terms of design maturity, but also laid a solid foundation for future growth.

Lessons Learned
One of the most important lessons from this transformative project was the value of cross-functional collaboration. Engaging with tech and marketing stakeholders early in the process ensured we made informed decisions about technical constraints, design direction, and feature prioritization. Additionally, leveraging user research to inform design decisions, particularly around the business strategy shift, helped me effectively communicate the necessity of those changes to key stakeholders, such as the CEO and CPO.

Ultimately, this project didn’t just elevate Yaytrade’s design maturity—it also provided key insights into how product design can directly influence business outcomes, even in a rapidly evolving environment.

JULIAN MINERVINI DESIGN PORTFOLIO

MINERVINI.XYZ

SG DESIGN STUDIO

JULIAN MINERVINI
DESIGN PORTFOLIO