Role

In this project, I worked as a solo Product designer (freelancer), responsible for all the steps involving the design process, from discovery to handoff.

Timeline

3 months

Client

MYP Cards

MYP Cards, a popular online marketplace for trading card games, faced a critical issue: their existing platform, designed primarily by engineers, lacked a user-centric approach, leading to a confusing navigation flow and a cumbersome buying process.

This led to poor conversion rates and high cart abandonment, resulting in significant lost sales for the business.

INFO

PROJECT BACKGROUND

Understanding the Problem

The current navigation flow on the MYP Cards website was confusing, leading to high user drop-off rates during the buying process. Key issues included:

1.

Complex and disorganized navigation

Users have reported that the website structure is confusing, making it difficult to navigate the buying journey.

2.

Frustrating Search Experience

Users have difficulty finding cards due to a limited search function. The restricted search scope, unclear instructions, and lack of filter options make it hard to locate specific cards.

Approximately 80% of users abandoned their search due to difficulty finding a product.

Source: MYP Cards - Google Analytics data, MYP Cards

The Pain Points Behind the Problem

The design process began with a clear understanding of business needs. After a kickoff meeting to solidify project goals, we entered a comprehensive research phase to understand users' needs based on the initial reported problems:

RESEARCH

Selecting key issues to focus on

The existing website flow was carefully analyzed using Nielsen Heuristics, a well-established framework for identifying issues through a usability audit. This provided a data-driven foundation for understanding potential problems affecting users.

After evaluating the severity of the problems, the most impactful issues were prioritized. At that point, we had an initial focus point to continue the research. Here are some of the key issues identified during the audit, specifically related to navigability and search:

Heuristic Evaluation Table

Menu Desktop Issues

Mobile menus issues

Here are some of the high-priority issues identified during the audit, which are related to navigability and search:

Users' feedback

In-depth interviews with MYP Cards buyers shed light on their purchase journeys. By listening to their experiences, frustrations, and desired functionalities, we gained valuable insights into their needs and pain points.

User journey map

With the gathered information from interviews, I created a journey map, visualizing the current buying experience from product discovery all the way to checkout. This process helped pinpoint specific areas where users encountered difficulties.

Moderated Interviews - google meets

User journey map

"It seems to me that MYP is full of cool features that other platforms don't have, but at the same time the navigation between features is poor."

- Fred, MYP user for 5 years

Key Findings

RESEARCH FINDINGS

Painful Search Process

Users reported difficulties finding the specific cards they were looking for due to an unintuitive search experience. This frustration often led to cart abandonment before even reaching the checkout stage.

Menu & Navigation Issues

The organization of menu sections lacked a clear and logical hierarchy, making it difficult for users to understand the information architecture and locate desired products.

Cumbersome checkout process*

While this case study focuses on improving search and navigation, the user research also revealed challenges with the checkout process.

* Due to the complexity of this issue, a separate case study will delve into solutions for streamlining the checkout flow and optimizing the user experience at that critical stage of the buying journey.

SOLUTIONS

HMW simplify the search and navigation process to help users find desired cards quickly and easily?

Rethinking Information Architecture

A key focus was simplifying the search process for users. We aimed to make it more targeted and efficient, allowing users to find desired cards quickly and easily. Informed by user research and card sorting exercises, we redesigned the information architecture of MYP Cards.

Card sorting clustering and Information Architecture

Streamlined Header

• The header was redesigned with a cleaner aesthetic, eliminating unnecessary information and using neutral colors, while maintaining brand consistency, to improve accessibility and create a smoother navigation experience.

Comparison: Before and after - Header desktop and mobile

Improved Menu Clarity

• Redesigned mobile and desktop menus with a clear hierarchy and categorization system, replacing the small and cumbersome previous menus. We utilized a mega menu approach, divided into sections based on user expectations and importance.

New navigation menus

Enhanced Search Functionality

• The search bar was relocated to a more prominent position at the top center of the header for increased visibility. Additionally, filter options were integrated within the search bar to allow for both general searches and filtering by card type. This addressed the previous limitation of searching only within a pre-selected category.

Search bar filters and results

RETROSPECTIVE

Final thoughts & takeaways

1

The power of user research

By prioritizing user needs and conducting thorough research, we were able to identify critical pain points and develop solutions that directly address them.

2

Information Architecture Matters

A well-organized and intuitive information architecture forms the foundation of a positive user experience. By restructuring menus, categories, and search functionality, we empowered users to find desired products quickly and efficiently.

3

User-centered design delivers results

By focusing on user needs and iterating on design solutions, we can create a platform that is not only functional but also enjoyable for users

Looking ahead

The MYP Cards user experience is an ongoing journey. While this case study focused on search and navigation improvements, future studies will delve into optimizing the checkout process to further enhance user satisfaction and drive sales.

By continuously iterating and improving based on user feedback, MYP Cards can solidify its position as a leading online marketplace for trading card games.