Ryan Markley Portfolio

Mini-Project

Product Card Case Study

Skills

UX/UI Design, User Research, Interaction Design

Role

Skills

Role

UX/UI Designer, Branding

UX/UI Design, User Research, Interaction Design

UX Researcher & Designer

Role

UX/UI Designer, Branding

Duration

3 weeks

Tools

Figma, Adobe Ai & Ps

Tools

Figma, Miro

The Problem

E-commerce product cards often fail to reflect the varied intentions of users. Whether they're casually browsing, searching with a goal, or ready to purchase, a one-size-fits-all approach creates friction and reduces conversion.

The Solution

A responsive product card system tailored to user engagement levels, with layouts and interactions designed to match intent and enhance the shopping experience.

User Engagement Patterns in E-Commerce Journeys

Research Takeaways

Engagement Dictates Information Density

Users with lower intent (browsing) respond best to visually-driven cards with minimal text, while high-intent users (decisive) require detailed specs, reassurance, and prominent CTAs.

Interaction Complexity Should Scale with Intent

As users move from browsing to purchasing, interaction depth should increase with features like subtle hovers, filters, comparison tools, and checkout actions.

clear layouts help everyone

For mid-level engagement, consistent layouts and visible differentiators (like ratings or key features) aid in decision-making, while high engagement benefits from reduced friction and clear next steps.

A Flexible System

A high-fidelity overview of the product card system, showing how design adapts across engagement levels with tailored layouts, content, and CTAs to match user intent.

High-Fidelity

Lo-fidelity

Designing for Attention

Initial layout exploration of product card structures based on user attention levels, focusing on hierarchy, image placement, and content density.

Mid-fidelity

Adapting to User Intent

Visual prototypes showing how content, interactions, and packaging evolve across user engagement as users move from quick-glance discovery to detailed purchasing decisions.

Reflections

Tiny Encounters, Lasting Impact

This project deepened my understanding of how user intent shapes interface design. By exploring product cards through the lens of engagement levels, I learned the importance of adapting layout, content, and interaction to meet users where they are. Balancing visual appeal with functionality taught me to design not just for beauty but for behavior and how thoughtful variation can guide users from curiosity to conversion.

The Problem

E-commerce product cards often fail to reflect the varied intentions of users. Whether they're casually browsing, searching with a goal, or ready to purchase, a one-size-fits-all approach creates friction and reduces conversion.

The Solution

A responsive product card system tailored to user engagement levels, with layouts and interactions designed to match intent and enhance the shopping experience.

Research Takeaways

User Engagement Patterns in E-Commerce Journeys

Engagement Dictates Information Density

Users with lower intent (browsing) respond best to visually-driven cards with minimal text, while high-intent users (decisive) require detailed specs, reassurance, and prominent CTAs.

Interaction Complexity Should Scale with Intent

As users move from browsing to purchasing, interaction depth should increase with features like subtle hovers, filters, comparison tools, and checkout actions.

clear layouts help everyone

For mid-level engagement, consistent layouts and visible differentiators (like ratings or key features) aid in decision-making, while high engagement benefits from reduced friction and clear next steps.

Information Architecture

Designing for Attention

Initial layout exploration of product card structures based on user attention levels, focusing on hierarchy, image placement, and content density.

Mid-fidelity

Adapting to User Intent

Visual prototypes showing how content, interactions, and packaging evolve across user engagement as users move from quick-glance discovery to detailed purchasing decisions.

Research Takeaways

User Engagement Patterns in E-Commerce Journeys

Engagement Dictates Information Density

Users with lower intent (browsing) respond best to visually-driven cards with minimal text, while high-intent users (decisive) require detailed specs, reassurance, and prominent CTAs.

Interaction Complexity Should Scale with Intent

As users move from browsing to purchasing, interaction depth should increase with features like subtle hovers, filters, comparison tools, and checkout actions.

clear layouts help everyone

For mid-level engagement, consistent layouts and visible differentiators (like ratings or key features) aid in decision-making, while high engagement benefits from reduced friction and clear next steps.

Information Architecture

Designing for Attention

Initial layout exploration of product card structures based on user attention levels, focusing on hierarchy, image placement, and content density.

Mid-fidelity

Adapting to User Intent

Visual prototypes showing how content, interactions, and packaging evolve across user engagement as users move from quick-glance discovery to detailed purchasing decisions.

Information Architecture

Designing for Attention

Initial layout exploration of product card structures based on user attention levels, focusing on hierarchy, image placement, and content density.

Mid-fidelity

Adapting to User Intent

Visual prototypes showing how content, interactions, and packaging evolve across user engagement as users move from quick-glance discovery to detailed purchasing decisions.

High-Fidelity

A Flexible System

A high-fidelity overview of the product card system, showing how design adapts across engagement levels with tailored layouts, content, and CTAs to match user intent.

Empowering Growth Through Data

Tiny Encounters, Lasting Impact

Reflections

Research Takeaways

Data, AI, and Identity

Engagement Dictates Information Density

Users with lower intent (browsing) respond best to visually-driven cards with minimal text, while high-intent users (decisive) require detailed specs, reassurance, and prominent CTAs.

Interaction Complexity Should Scale with Intent

As users move from browsing to purchasing, interaction depth should increase with features like subtle hovers, filters, comparison tools, and checkout actions.

clear layouts help everyone

For mid-level engagement, consistent layouts and visible differentiators (like ratings or key features) aid in decision-making, while high engagement benefits from reduced friction and clear next steps.

High-Fidelity

A Flexible System

A high-fidelity overview of the product card system, showing how design adapts across engagement levels with tailored layouts, content, and CTAs to match user intent.

Tiny Encounters, Lasting Impact

This project deepened my understanding of how user intent shapes interface design. By exploring product cards through the lens of engagement levels, I learned the importance of adapting layout, content, and interaction to meet users where they are. Balancing visual appeal with functionality taught me to design not just for beauty but for behavior and how thoughtful variation can guide users from curiosity to conversion.

Reflections

High-Fidelity

A Flexible System

A high-fidelity overview of the product card system, showing how design adapts across engagement levels with tailored layouts, content, and CTAs to match user intent.

Reflections

Tiny Encounters, Lasting Impact

This project deepened my understanding of how user intent shapes interface design. By exploring product cards through the lens of engagement levels, I learned the importance of adapting layout, content, and interaction to meet users where they are. Balancing visual appeal with functionality taught me to design not just for beauty but for behavior and how thoughtful variation can guide users from curiosity to conversion.