Redesigning a Global Network & Cloud E-Commerce Platform: Building a Scalable, Inclusive Design System
Redesigning a Global Network & Cloud E-Commerce Platform: Building a Scalable, Inclusive Design System
Redesigning a Global Network & Cloud E-Commerce Platform: Building a Scalable, Inclusive Design System
** Due to honoring the terms of my confidentiality agreements, the artifacts have been reconstructed and should be considered as illustrative. All examples have also been scrubbed for PII and sensitive details.
** Due to honoring the terms of my confidentiality agreements, the artifacts have been reconstructed and should be considered as illustrative. All examples have also been scrubbed for PII and sensitive details.
Project Type
Project Type
B2B, SaaS Platform, E-Commerce
B2B, SaaS Platform, E-Commerce
Team
Team
2 Devs, 1 PM, 4 UX Designers, 1 Visual Designer, 1 UX Librarian
2 Devs, 1 PM, 4 UX Designers, 1 Visual Designer, 1 UX Librarian
Tools
Tools
Figma, Jira
Figma, Jira
Timeline
Timeline
8 weeks, Agile Sprints
8 weeks, Agile Sprints
Client
Client
Network & Cloud Provider
Network & Cloud Provider
Overview
Overview
This redesign transformed a fragmented B2B e-commerce platform with 1,000+ network and cloud products into a unified, accessible experience across 62 countries and 25 languages. The business goal was to improve product discovery for engineers, unify branding from four acquisitions, and migrate to AEM Cloud. The new design system enabled faster go-to-market, reduced bounce rates, and improved global usability.
This redesign transformed a fragmented B2B e-commerce platform with 1,000+ network and cloud products into a unified, accessible experience across 62 countries and 25 languages. The business goal was to improve product discovery for engineers, unify branding from four acquisitions, and migrate to AEM Cloud. The new design system enabled faster go-to-market, reduced bounce rates, and improved global usability.
My Role
My Role
I joined midway, after the initial atomic design system had been established. I focused on scaling and refining the user experience to make the platform more intuitive and efficient for engineers evaluating complex products and expanded the system with flexible components, localized layouts, and interaction patterns tailored to global use. Through prototyping and usability testing with users, I improved product discovery flows and ensured accessibility at scale. My work directly supported faster clearer navigation, implementation, and more consistent UX across all 62 countries.
I joined midway, after the initial atomic design system had been established. I focused on scaling and refining the user experience to make the platform more intuitive and efficient for engineers evaluating complex products and expanded the system with flexible components, localized layouts, and interaction patterns tailored to global use. Through prototyping and usability testing with users, I improved product discovery flows and ensured accessibility at scale. My work directly supported faster clearer navigation, implementation, and more consistent UX across all 62 countries.
IMPACT
IMPACT
IMPACT
unified in branding throughout 4 acquired companies
unified in branding throughout 4 acquired companies
1K+ products
1K+ products
1K+ products
supported with re-design of design system
supported with re-design of design system
62 countries & 25 languages
62 countries & 25 languages
62 countries & 25 languages
improving global usability
improving global usability
Migration to AEM cloud & AA-level accessibility
Migration to AEM cloud & AA-level accessibility
Migration to AEM cloud & AA-level accessibility
MY ROLE
MY ROLE
MY ROLE
I acted as both Interaction Designer and UX Researcher, bridging design systems with user needs.
I acted as both Interaction Designer and UX Researcher, bridging design systems with user needs.
I acted as both Interaction Designer and UX Researcher, bridging design systems with user needs.
This project was massive, so I focused on solving specific interaction and usability challenges within the larger redesign.
Here are three design phases I led or contributed to:
This project was massive, so I focused on solving specific interaction and usability challenges within the larger redesign.
Here are three design phases I led or contributed to:
Phase 1: Mapped early flow logic and built system foundations
Phase 1: Mapped early flow logic and built system foundations
1
Phase 2: Prototyped, tested, and iterated high-fidelity designs
Phase 2: Prototyped, tested, and iterated high-fidelity designs
2
Phase 3: Solved regional and technical complexity through modular design
Phase 3: Solved regional and technical complexity through modular design
3
PHASE 1
PHASE 1
PHASE 1
Mapped early flow logic and built system foundations
Mapped early flow logic and built system foundations
Mapped early flow logic and built system foundations
I collaborated with the UX librarian to define atomic components and create token architecture that would flex with variable lengths and regional needs. Together, we documented everything from component logic to interaction guidelines. This helped me get familiar with the modularity of our system and what the team was currently working on.
I collaborated with the UX librarian to define atomic components and create token architecture that would flex with variable lengths and regional needs. Together, we documented everything from component logic to interaction guidelines. This helped me get familiar with the modularity of our system and what the team was currently working on.
PHASE 2 - PROTOTYPED, TESTED, & ITERATED HI-FI DESIGNS
PHASE 2 - PROTOTYPED, TESTED, & ITERATED HI-FI DESIGNS
PHASE 2 - PROTOTYPED, TESTED, & ITERATED HI-FI DESIGNS
After becoming familiar with the structure, I created scrollable service plan flows that mimicked real product behavior.
After becoming familiar with the structure, I created scrollable service plan flows that mimicked real product behavior.
Design Challenge 1: Sticky Navigation for Contextual CTAs
Design Challenge 1: Sticky Navigation for Contextual CTAs
Design Challenge 1: Sticky Navigation for Contextual CTAs
Below, I prototyped an interaction for service plan pages where the initial navigation bar remains sticky while scrolling, and transitions to a secondary sticky nav once reached.
This second nav surfaces context-specific CTAs, making it easier for engineers to access actions related to each service and plan.
This second nav surfaces context-specific CTAs, making it easier for engineers to access actions related to each service and plan.
I prototyped an interaction for service plan pages where the initial navigation bar remains sticky while scrolling, and transitions to a secondary sticky nav once reached.
This second nav surfaces context-specific CTAs, making it easier for engineers to access actions related to each service and plan.
I prototyped an interaction for service plan pages where the initial navigation bar remains sticky while scrolling, and transitions to a secondary sticky nav once reached.
The second nav surfaces context-specific CTAs, making it easier for engineers to access actions related to each service and plan.
I co-led research sessions with engineers to understand how they evaluated complex product/service offerings.
Our goal was to test both the overall interaction of the page and how well we merged product marketing with deep technical detail.
I co-led research sessions with engineers to understand how they evaluated complex product/service offerings.
Our goal was to test both the overall interaction of the page and how well we merged product marketing with deep technical detail.
Primary Users: Engineers with a history of evaluating or purchasing high-complexity products.
Primary Users: Engineers with a history of evaluating or purchasing high-complexity products.
Sample of page evaluations. It was important for us to have the prototype interactions to be as close as the final website. Content was as close to the final version as possible and final step before review & usability testing.
Sample of page evaluations. It was important for us to have the prototype interactions to be as close as the final website. Content was as close to the final version as possible and final step before review & usability testing.
Design Challenge 2: Helping Engineers Discover Technical Products More Effectively
Design Challenge 2: Helping Engineers Discover Technical Products More Effectively
Design Challenge 2: Helping Engineers Discover Technical Products More Effectively
My Process:
1. Conducted 1:1 interviews with 3 engineers with scrollable service plans with labeled recommendations based on prior knowledge
2. Analyzed their purchase journeys and reviewed site analytics
3. Synthesized gaps in product marketing and technical clarity through layout
4. Drove iterations on layout, copy clarity, and technical depth based on insights
My Process:
1. Conducted 1:1 interviews with 3 engineers with scrollable service plans with labeled recommendations based on prior knowledge
2. Analyzed purchase journeys and reviewed site analytics
3. Synthesized gaps in product marketing and technical clarity through layout
4. Drove iterations on layout, copy clarity, and technical depth based on insights
Key Insights:
Engineers needed deeper technical information and clearer comparisons
Navigation and terminology were inconsistent across regions
Key Insights:
-Engineers needed deeper technical information and clearer comparisons
-Navigation and terminology were inconsistent across regions
Key Insights:
- Engineers needed deeper technical information and clearer
comparisons
- Navigation and terminology were inconsistent across
regions
My Impact:
Introduced changes to improve searchability and product grouping logic
Integrated technical labels and comparison points into the service plans
Advocated for consistency across content modules and templates
My Impact:
-Introduced changes to improve searchability and product grouping logic
-Integrated technical labels and comparison points into the service plans
-Advocated for consistency across content modules and templates
My Impact:
- Introduced changes to improve searchability and product
grouping logic
- Integrated technical labels and comparison points into the
service plans
- Advocated for consistency across content modules and
templates
PHASE 3: Solved regional and technical complexity through modular design
PHASE 3: Solved regional and technical complexity through modular design
PHASE 3: Solved regional and technical complexity through modular design
Design Challenge 3: Designing Modular Contact Cards That Adapt Across Languages
Design Challenge 3: Designing Modular Contact Cards That Adapt Across Languages
Design Challenge 3: Designing Modular Contact Cards That Adapt Across Languages
The contact card redesign was one of the most complex components. It needed to support support/sales info, long-language translations, and still be usable by developers across 62 countries in 25 languages.
The contact card redesign was one of the most complex components. It needed to support support/sales info, long-language translations, and still be usable by developers across 62 countries in 25 languages.
I prototyped a two-column layout and made it modular. I also helped localize flows and did a final pass on copy length checks in languages like English (right-to-left written language and phonetic system), Arabic (left-to right written language), and Chinese(logographic system).
I prototyped a two-column layout and made it modular. I also helped localize flows and did a final pass on copy length checks in languages like English (right-to-left written language and phonetic system), Arabic (left-to right written language), and Chinese(logographic system).
Key Features
- Modular contact cards & navigation redesign
- Language-adaptive layouts
- Developer-friendly documentation
Key Features
-Modular contact cards & navigation redesign
-Language-adaptive layouts
-Developer-friendly documentation
Key Features
Modular contact cards & navigation redesign
Language-adaptive layouts
Developer-friendly documentation
My Impact
- Lower bounce rates
- Faster go-to-market timelines
- Consistent brand and usability across regions
My Impact
-Lower bounce rates
-Faster go-to-market timelines
-Consistent brand and usability across regions
My Impact
Lower bounce rates
Faster go-to-market timelines
Consistent brand and usability across regions
REFLECTION
REFLECTION
REFLECTION
Systems design isn’t just about components—it's about people, collaboration, and iteration.
Systems design isn’t just about components—it's about people, collaboration, and iteration.
Systems design isn’t just about components—it's about people, collaboration, and iteration.
This project taught me to think in systems, collaborate deeply, and adapt fast when the design asks are huge.
This project taught me to think in systems, collaborate deeply, and adapt fast when the design asks are huge.
This project taught me to think in systems, collaborate deeply, and adapt fast when the design asks are huge.
I learned that:
I learned that:
Systems thinking is key at scale: Every small element had to flex globally.
Systems thinking is key at scale: Every small element had to flex globally.
Systems thinking is key at scale: Every small element had to flex globally.
Documentation is design: Organizing files and components with a UX Librarian made onboarding easier and design more accessible.
Documentation is design: Organizing files and components with a UX Librarian made onboarding easier and design more accessible.
Documentation is design: Organizing files and components with a UX Librarian made onboarding easier and design more accessible.
Research drives clarity: Engineers gave us the clarity needed to balance technical depth with marketing.
Research drives clarity: Engineers gave us the clarity needed to balance technical depth with marketing.
Research drives clarity: Engineers gave us the clarity needed to balance technical depth with marketing.
NEXT
NEXT
DocuCare: Empowering School Nurses through Better Documentation
A tracking tool born from the vision to not only facilitate but also illuminate the critical work of school nurses.
Read Case Study
B2B Cloud Commerce Design System: Defining an Experience
A modern, cohesive, and impactful visual identity that authentically reflects the mission of Refugee Women's Alliance—supporting refugee and immigrant women and their families.
Read Case Study
Read Case Study
ReWA: A Visual Strategy to Promote Family & Community Empowerment
A modern, cohesive, and impactful visual identity that authentically reflects the mission of Refugee Women's Alliance—supporting refugee and immigrant women and their families.
Read Case Study
AI-Powered Marketing Platform: Simplifying End-to-End Campaign Creation
A Generative AI-powered marketing platform that redefines how marketers create, refine, and localize campaigns.
NEXT
DocuCare: Empowering School Nurses through Better Documentation
A tracking tool born from the vision to not only facilitate but also illuminate the critical work of school nurses.
Read Case Study
B2B Cloud Commerce Design System: Defining an Experience
A modern, cohesive, and impactful visual identity that authentically reflects the mission of Refugee Women's Alliance—supporting refugee and immigrant women and their families.
Read Case Study
Read Case Study
ReWA: A Visual Strategy to Promote Family & Community Empowerment
A modern, cohesive, and impactful visual identity that authentically reflects the mission of Refugee Women's Alliance—supporting refugee and immigrant women and their families.
Read Case Study
AI-Powered Marketing Platform: Simplifying End-to-End Campaign Creation
A Generative AI-powered marketing platform that redefines how marketers create, refine, and localize campaigns.