Product Card Redesign

LEAD UX DESIGNER

Unity-Product-Card-Top

RESPONSABILITIES

Lead the design team responsible for the Unity Asset Store, a marketplace widely used to buy and sell game assets and plugins.

WHAT IS UNITY?

Unity is a mobile leading game engine company renowned for its versatile Unity Engine, widely used by developers to create interactive experiences across various platforms.

Challenges

As Unity grew, the Asset Store became the company’s third-largest revenue stream, following its SaaS Engine software and Ad business. Over the years, marketing campaigns to drive revenue growth led to the addition of features and functionalities on the website, resulting in feature creep that overlooked the user experience.

One of the most prominent examples of this was the Product Card. Publishers, who relied on these cards to showcase their products, began bloating thumbnails with text and using the limited description space to promote their businesses. This made the cards cluttered and overwhelming for users, while also failing to meet accessibility standards due to small fonts and poor color contrast.

The redesign initiative, combined with the upcoming replacement of the Search Engine, provided an opportunity to reimagine the Product Card. The goal was to offer publishers more space to describe their products, improve accessibility, and address the information overload that had built up over time.

The Approach

To tackle these challenges, we focused on creating a streamlined, user-friendly Product Card design. This process included a thorough audit of how the card component was used across the website, the elimination of unnecessary information, and a focus on accessibility and information hierarchy.

U-audit-pc

Product Card Audit 2023

Steps

 

1. Asset Store Audit:
• Conducted a comprehensive audit of how the Product Card was utilized across different pages.
• Map out the various use cases to ensure the redesigned card could accommodate the needs of publishers and users alike.

2. Accessibility Review:
• Identify accessibility issues, including font sizes that were too small and insufficient color contrast.
• Ensured that the redesign would meet accessibility standards to provide a better experience for all users.

3. Research & UX Study:
• Data showing that high refund rates were often due to compatibility issues and incomplete product information.
• Lack of clear hierarchy of information and prioritization of essential details.
• Focus on creating a design that reduced cognitive load for users.

Exploration

The exploration phase was a critical step in designing informed and effective solutions for the Product Card redesign. During this phase, we conducted a competitive analysis to benchmark against industry standards and uncover e-commerce best practices that could guide our approach. This research provided a solid foundation for designing potential candidates that addressed user needs and aligned with modern e-commerce trends.

Competitive Analysis

competitive_landscape

Market Research

U-market-pc

Design Exploration

U-Wireframe-Exploration

Original Card

The original Product Card fell short in several key areas:

1. Acessibility: it did not meet accessibility standards, with poor color contrast and small fonts that hindered readability.

2. Poor Information: the product title was often truncated, and important information was compressed, making it difficult for users to scan it quickly.

3. Best Practices: "Add to Cart" button not following e-commerce best practices.

4. Proper hierarchy: during sales, the card’s layout further compromised usability by skewing information to accommodate discount elements.

current_pd-U

Card Structure

The structure of the redesigned Product Card was carefully crafted to address user and publisher needs while adhering to accessibility standards. Our goal was to establish a clear visual hierarchy that prioritized essential information, making it easier for users to quickly understand the product at a glance.

Accessibility was a top priority, with adjustments to font sizes, improved color contrast, and optimized spacing for readability. These changes aimed to create a cleaner, more intuitive layout that balanced usability with the need for rich, relevant information.

At first, we drafted an anatomy for the card, adjusting the layout to follow specific rules—positioning information where it would be most relevant, adjusting font sizes, and grouping social elements closer together.

First version

card_ver-B

Final interation

card_ver-A

Wireframing

With the basic structure in place, the next step was to test different layouts and variations in how information was presented. This iterative process allowed us to refine the design until we arrived at final candidates ready for user testing.

Different states

desing_exp_Ucard

In context

incontext_pdU

High Fidelity Prototype

U-wires-Pcard-final

Expected Results

Although I left Unity before the project’s implementation, the redesign initiative laid the foundation for impactful changes:

Improved Usability:
The new design prioritized a clean layout, better information hierarchy, and accessibility compliance, ensuring a more user-friendly experience.

A/B Testing Roadmap:
A testing plan was prepared to validate assumptions, such as the impact of making the cards clickable on conversions and how an "Add to Cart" option might purchases coming from the search page.

Addressing Refund Drivers:
By focusing on compatibility information and providing publishers more space for relevant details, the redesign aimed to reduce refund rates caused by a lack of clear product information.

2025 © danielsimon.dk