Team

3 UX Designers, 2 Product Managers, 2 Visual Designers, 1 Content Strategist

Timeline

Jan - Aug 2023

Category

iOS App, Product Strategy, User Testing

Team

3 UX Designers, 2 Product Managers, 2 Visual Designers, 2 Content Strategist

3 UX Designers, 2 Product Managers, 2 Visual Designers, 2 Content Strategist

Timeline

Dec 2023- June 2023

Dec 2023- June 2023

Category

Product Strategy, e-commerce, Desktop and mobile end

Product Strategy, e-commerce, Desktop and mobile end

Overview

My role

Our team entirely transformed the e-commerce experience of PMI.org., while I took ownership in the following areas:

My role

Our team entirely transformed the e-commerce experience of PMI.org., while I took ownership in the following areas:

  1. Conducted stakeholder interviews and competitive analysis to identify key issues.

  2. Led UX design for redesigning over 300 product detail pages across 7 product types.

  3. Led UX design for the product card, establishing interaction rules and usage patterns to ensure consistency across the platform.

  1. Conducted stakeholder interviews and competitive analysis to identify key issues.

  2. Led UX design for redesigning over 300 product detail pages across 7 product types.

  3. Led UX design for the product card, establishing interaction rules and usage patterns to ensure consistency across the platform.

Outcome

The redesign of product detail pages and product cards addressed usersā€™ need for clearer information and easier comparisons, boosting purchase confidence and conversion rates. It also simplified maintenance and expansion for the clientā€™s product owners.

Link to PMI.org

Outcome


The redesign of product detail pages and product cards addressed usersā€™ need for clearer information and easier comparisons, boosting purchase confidence and conversion rates. It also simplified maintenance and expansion for the clientā€™s product owners.

Link to PMI.org

problem discovery

Users are overwhelmed, and client struggles with maintenance

12 stakeholder interviews and a UX audit, key issues were identified as following:

  • The vast range of products and inconsistent detail levels, formatting, and visual engagement overwhelm users, making it difficult to choose.

  • Multiple product owners from the PMI side create challenges in maintaining consistent and aligned content and format.

Users are overwhelmed, and client struggles with maintenance

12 stakeholder interviews and a UX audit, key issues were identified as following:

  • The vast range of products and inconsistent detail levels, formatting, and visual engagement overwhelm users, making it difficult to choose.

  • Multiple product owners from the PMI side create challenges in maintaining consistent and aligned content and format.

Finding solutions

One stone, two birds ā€” a template approach to solve all

Through collaboration with our content strategist, we proposed a template approachā€”designing templates for each product type to ensure a unified structure and consistent user experience.

One stone, two birds ā€” a template approach to solve all


Through collaboration with our content strategist, we proposed a template approachā€”designing templates for each product type to ensure a unified structure and consistent user experience.

Designing the building blocks of the template

I designed all the modules within the template, including the hero, sub-navigation, product overview, product details, community review, and cross-sell.

Designing the building blocks of the template


I designed all the modules within the template, including the hero, sub-navigation, product overview, product details, community review, and cross-sell.

Building for scalability and reusability

I also designed out the unique components and variations, while ensuring they can be reused and adapted in the future.

Building for scalability and reusability


I also designed out the unique components and variations, while ensuring they can be reused and adapted in the future.

The right CTA at the right time


PMIā€™s complex offerings and higher price points require context and value explanation. Therefore, I proposed two call-to-actions variations:

Product cards

Why stop here ā€” standardizing product cards to further improve shopping experience

The old product cards often 1). didnā€™t look purchasable, 2). appeared in a variety of inconsistent formats. This inconsistency confused users, making it harder to identify purchasing options and leading to missed sales opportunities.

Why stop here ā€” standardizing product cards to further improve shopping experience


The old product cards often 1). didnā€™t look purchasable, 2). appeared in a variety of inconsistent formats. This inconsistency confused users, making it harder to identify purchasing options and leading to missed sales opportunities.

The right content at the right time

PMIā€™s complex offerings and higher price points require context and value explanation. Therefore, I proposed two call-to-actions variations:

Surfacing the right content at the right time


PMIā€™s complex offerings and higher price points require context and value explanation. Therefore, I proposed two CTAs variations:


ā€¢ ā€˜Learn More' for early-funnel pages (homepage, landing page) to provide product details.
ā€¢ ā€˜Add to Cart' for later-funnel pages (store, cart) when users are ready to purchase.

Surfacing the right content at the right Time

PMIā€™s complex offerings and higher price points require context and value explanation. Therefore, I proposed two CTAs variations:

ā€¢ ā€˜Learn More' for early-funnel pages (homepage, landing page) to provide product details.
ā€¢ ā€˜Add to Cart' for later-funnel pages (store, cart) when users are ready to purchase.

ā€¢ ā€˜Learn More' for early-funnel pages (homepage, landing page) to provide product details.
ā€¢ ā€˜Add to Cart' for later-funnel pages (store, cart) when users are ready to purchase.

Final design

Desktop first, mobile follows

With 90% of PMI.org users on desktop, I prioritized the desktop experience first and then adapted the design for mobile.

Desktop first, mobile follows

With 90% of PMI.org users on desktop, I prioritized the desktop experience first and then adapted the design for mobile.

Clear guidelines for easy implementation

We created detailed guidelines and thorough annotations for each module to help PMI product owners easily implement the template for future uses.

Clear guidelines for easy implementation


We created detailed guidelines and thorough annotations for each module to help PMI product owners easily implement the template for future uses.

impact

Enhancing user confidence and driving conversion

The new experience launched in September 2024 and was announced at the PMI Global Summit 2024. The new product detail page helps users quickly absorb information and make decisions effortlessly, driving long-term growth.

Link to PMI.org

Enhancing user confidence and driving conversion


The new experience launched in September 2024 and was announced at the PMI Global Summit 2024. The new product detail page helps users quickly absorb information and make decisions effortlessly, driving long-term growth.


Link to PMI.org

reflection

Designing with systems thinking

I approached a project with a systematic mindset, developing a scalable template rather than a one-off solution. It taught me to think beyond individual screens and consider how each component fit within a larger ecosystem.

Designing with systems thinking


I approached a project with a systematic mindset, developing a scalable template rather than a one-off solution. It taught me to think beyond individual screens and consider how each component fit within a larger ecosystem.

Iā€™m Qi Zhang, a User Experience Designer with a focus in consumer-facing products, solving problems for users and businesses.

Let's Work Together!

Made with šŸ’› and lots of ā˜• BY Qi 2025

Iā€™m Qi Zhang, a User Experience Designer with a focus in consumer-facing products, solving problems for users and businesses.

Let's Work Together!

Made with šŸ’› and lots of ā˜• BY Qi 2025

Iā€™m Qi Zhang, a User Experience Designer with a focus in consumer-facing products, solving problems for users and businesses.

Let's Work Together!

Made with šŸ’› and lots of ā˜• BY Qi 2025

Iā€™m Qi Zhang, a User Experience Designer with a focus in consumer-facing products, solving problems for users and businesses.

Let's Work Together!

Made with šŸ’› and lots of ā˜• BY Qi 2025

Iā€™m Qi Zhang, a User Experience Designer with a focus in consumer-facing products, solving problems for users and businesses.

Let's Work Together!

Made with šŸ’› and lots of ā˜• BY Qi 2025