About Me

Cases

LinkedIn

My Resume

Introduction

Context

Challenges

Outcomes

Solutions

Conclusion

Clickapporter Extension

Redesigning a Chrome extension to incorporate B2B procurement, and adhere to strict compliance

Clickapporter

Clickapporter

3 months

3 months

2023-2024

2023-2024

Role: Product Owner & UX Lead

Role: Product Owner & UX Lead

Case Outcomes

By addressing critical usability issues, like unclear workflows and prohibited item surprises, we transformed the Clickapporter extension into a trusted tool for both casual shoppers and Amazon Business users.


While proprietary metrics weren’t available post-launch, usability testing indicated significant improvements in clarity, efficiency, and trust, which culminated in the approval of a strategic partnership with Amazon Business.

Secured Amazon
Business Partnership

Secured Amazon
Business Partnership

Redesign met compliance and usability standards, enabling Punchin integration

Redesign met compliance and usability standards, enabling Punchin integration

Streamlined

Workflows

Streamlined

Workflows

Usability testing showed improved clarity in key tasks like price calculation and checkout

Usability testing showed improved clarity in key tasks like price calculation and checkout

Efficient
Onboarding

Efficient
Onboarding

Interactive overlays and guides improved first-time user adoption

Interactive overlays and guides improved first-time user adoption

Context & Process

The Clickapporter Chrome extension enables Moroccan users to purchase Amazon.com items through Clickapporter’s localized pricing.
When partnering with Amazon Business to integrate their bulk-order "Punchin" system, the extension required a redesign to support two distinct user types.

This project focused on tailoring workflows, flagging prohibited items upfront, and ensuring Amazon Business compliance—all within a unified extension.

Research

Research

Benchmarking

Benchmarking

Customer Interviews

Customer Interviews

Behavioral Data Analysis

Behavioral Data Analysis

User Feedback

Collection

User Feedback

Collection

1

Analysis

Analysis

Journey Mapping

Journey Mapping

Problem Identification

Problem Identification

Competitor

Contextualization

Competitor

Contextualization

2

Design

Design

Wireframing

Wireframing

Prototyping

Prototyping

Dev Handoff

Dev Handoff

3

Note: A detailed overview of the methodology used, the insights gathered and the design process can be found in my detailed portfolio, using this link.

The Challenges

Through my extensive research, I was able to pinpoint a number of key insights that guided my approach and design decisions.

Redesigned logo

Universal ≠ Usable
Universal ≠ Usable

A single flow for both individuals and businesses left both groups underserved.

A single flow for both individuals and businesses left both groups underserved.

Handcuffed by Constraints
Handcuffed by Constraints

Limited ability to modify Amazon’s UI forced creative workarounds (e.g., overlays, offline guides).

Limited ability to modify Amazon’s UI forced creative workarounds (e.g., overlays, offline guides).

Hidden Dealbreakers
Hidden Dealbreakers

Prohibited items were only flagged after checkout, wasting users’ time.

Prohibited items were only flagged after checkout, wasting users’ time.

Price-Check Ping Pong
Price-Check Ping Pong

Users had to toggle between Amazon and Clickapporter to calculate prices and resolve errors.

Users had to toggle between Amazon and Clickapporter to calculate prices and resolve errors.

No Map, No Compass
No Map, No Compass

No guidance for the extension’s unique workflow left users confused.

No guidance for the extension’s unique workflow left users confused.

Guided Journeys: One Extension, Two Paths

While the extension’s core functionality remained consistent, tailored copy and strategic flow adjustments ensured B2C and B2B users could achieve their goals without confusion.

Original Flow

New Flow

Branched flows let casual shoppers and businesses focus on their unique needs.

Branched flows let casual shoppers and businesses focus on their unique needs.

Contextual messaging (e.g., ‘Local Pricing’ vs. ‘Bulk Compliance’) reduced cognitive load

Contextual messaging (e.g., ‘Local Pricing’ vs. ‘Bulk Compliance’) reduced cognitive load

On-Demand Price Calculation

Users trigger price calculations with a single click. The extension’s pop-up displays localized prices instantly, eliminating the friction caused by the back-and-forth.

Users triggers price checks on-demand, putting them in control of when and how they view costs

Users triggers price checks on-demand, putting them in control of when and how they view costs

Real-time conversions eliminate guesswork. No more bouncing between tabs

Real-time conversions eliminate guesswork. No more bouncing between tabs

Prices displayed in Moroccan Dirham build trust and reduce currency confusion

Prices displayed in Moroccan Dirham build trust and reduce currency confusion

From Confusion to Confidence

A lack of guidance left users stranded in the extension’s unique workflow. We introduced contextual onboarding and supplemental resources to turn frustration into clarity

Onboarding overlay on Amazon

Downloadable onboarding document

shared by sales teams

Interactive overlays greet users on their first Amazon visit, explaining core actions without disrupting browsing

Interactive overlays greet users on their first Amazon visit, explaining core actions without disrupting browsing

A downloadable PDF (shared via email/sales teams) supplements in-app guidance for complex workflows.

A downloadable PDF (shared via email/sales teams) supplements in-app guidance for complex workflows.

Flagging Frustrations Early

Prohibited items were a hidden dealbreaker. Users wasted time discovering them post-checkout. We flagged restrictions upfront, tailoring alerts to B2C and B2B needs.

B2b user view

B2C user view

Flagged prohibited items before checkout, saving users time and frustration

Flagged prohibited items before checkout, saving users time and frustration

Tailored messaging with B2C: ‘Can’t ship this.’ B2B: ‘Remove to proceed.’ providing clear, action-oriented copy

Tailored messaging with B2C: ‘Can’t ship this.’ B2B: ‘Remove to proceed.’ providing clear, action-oriented copy

Compliance enforcement. B2B users are blocked from Punchin until issues are resolved, ensuring Amazon Business compliance

Compliance enforcement. B2B users are blocked from Punchin until issues are resolved, ensuring Amazon Business compliance

Surgical UI Tweaks for Maximum Impact

Within strict technical constraints, we strategically modified Amazon’s UI to guide users toward the right actions, hiding distractions, enforcing compliance, and preventing dead-ends

Cart doesn't contain prohibited items

Cart Contains Prohibited items

Automated process let’s the

user know what is happening

Confirmation dialogue for b2b users

Compliance Enforcement - Blocked B2B checkout until prohibited items were resolved ensure Amazon Business compliance

Compliance Enforcement - Blocked B2B checkout until prohibited items were resolved ensure Amazon Business compliance

Minimal Disruption - Subtle UI tweaks (e.g., hiding buttons) reduced user confusion without heavy code changes

Minimal Disruption - Subtle UI tweaks (e.g., hiding buttons) reduced user confusion without heavy code changes

Technical Ingenuity - Creative use of overlays and CSS/JS injections worked within Amazon’s limitations

Technical Ingenuity - Creative use of overlays and CSS/JS injections worked within Amazon’s limitations

Guided User Paths - Overlays redirected B2C/B2B users to their optimal workflows. No dead-ends

Guided User Paths - Overlays redirected B2C/B2B users to their optimal workflows. No dead-ends

  • Cart doesn't contain prohibited items

  • Cart Contains Prohibited items

  • Automated process let’s the

    user know what is happening

  • Confirmation dialogue for b2b users

Takeaways

This project reinforced the importance of balancing user needs with technical constraints, and how small, strategic changes can drive big impact.

Constraints Fuel Innovation
Constraints Fuel Innovation

Amazon’s UI restrictions forced us to think creatively (overlays, offline guides) instead of relying on conventional solutions.

Amazon’s UI restrictions forced us to think creatively (overlays, offline guides) instead of relying on conventional solutions.

Clarity Trumps Cleverness
Clarity Trumps Cleverness

Tailored copy (e.g., ‘Local Pricing’ vs. ‘Bulk Compliance’) outperformed abstract icons, proving users value simplicity over novelty.

Tailored copy (e.g., ‘Local Pricing’ vs. ‘Bulk Compliance’) outperformed abstract icons, proving users value simplicity over novelty.

One Tool, Two Audiences
One Tool, Two Audiences

Adapting flows and messaging for B2C/B2B within one extension showed that flexibility, not fragmentation, drives inclusivity.

Adapting flows and messaging for B2C/B2B within one extension showed that flexibility, not fragmentation, drives inclusivity.

Flag Early, Fix Fast
Flag Early, Fix Fast

Prohibited item alerts upfront saved users time and built trust, avoiding post-checkout frustrations.

Prohibited item alerts upfront saved users time and built trust, avoiding post-checkout frustrations.

Onboarding = Empowerment
Onboarding = Empowerment

Guiding users with interactive overlays and PDFs reduced confusion, even when technical limits blocked in-app tutorials.

Guiding users with interactive overlays and PDFs reduced confusion, even when technical limits blocked in-app tutorials.

UX Bridges Business Goals
UX Bridges Business Goals

Meeting Amazon’s compliance standards wasn’t just about design. It secured a partnership, proving UX’s strategic value.

Meeting Amazon’s compliance standards wasn’t just about design. It secured a partnership, proving UX’s strategic value.

Cases

About me

My LinkedIn

© 2025 Ismaël Chabani

Cases

About me

My LinkedIn

© 2025 Ismaël Chabani

Cases

About me

My LinkedIn

© 2025 Ismaël Chabani