Back to Work
Plexus Worldwide 2017

Plexus Worldwide Digital Transformation

E-Commerce Design Systems Direct Sales UX/UI Design Front-End Development Platform Architecture
Plexus Worldwide Digital Transformation

Project Overview

As UX/UI Designer, pioneered Plexus Worldwide's digital design capabilities, leading three complete platform redesigns and establishing the company's first design system. Architected custom e-commerce platform, ambassador site builder, and back-office dashboard serving thousands of users. Bridged design and development teams, improving handoff efficiency by 60% while creating work practices still used today.

Project Details

Client
Plexus Worldwide
Project
Pioneering Digital Design Function & Multi-Platform Redesign
Year
2017
Plexus Worldwide Digital Transformation - Project Preview

Objectives & Goals

Pioneer the digital design function for a growing direct sales company, leading three major platform redesigns while establishing foundational design systems, development practices, and cross-functional workflows that would scale with the business.

The Process

The Challenge

Plexus Worldwide was a growing direct sales company with ambitious digital needs but no established design function. When I joined as UX/UI Designer, the marketing team had never had a dedicated designer. The company needed someone who could:

  • Pioneer digital design from the ground up
  • Architect complex platforms for e-commerce, ambassador management, and back-office operations
  • Bridge design and development teams with different languages and workflows
  • Navigate direct sales constraints including Exigo integration and compensation plan requirements
  • Establish scalable processes that would support rapid company growth
  • Deliver measurable results on conversion rates and operational efficiency

This wasn’t just a design role—it was building an entire design practice while simultaneously delivering major platform redesigns.

My Role & Impact

Dual Role: Designer & Developer Translator

I operated in a unique position that combined multiple responsibilities:

UX/UI Designer

  • Led all digital design for marketing team
  • Designed three complete platform redesigns
  • Created comprehensive design systems
  • Conducted user research and testing

Front-End Developer (In-House Team)

  • Worked directly with development team implementing designs
  • Taught front-end development best practices
  • Ensured design system consistency across platforms
  • Bridged the gap between design intent and technical implementation

Process Architect

  • Designed work practices still used today by both marketing and development departments
  • Created design-to-development handoff workflows
  • Established design system governance
  • Built collaborative processes between teams

Go-To Translator

  • The person who could translate designs to the development team
  • Explained design decisions in technical terms developers understood
  • Translated technical constraints back to design solutions
  • Facilitated communication between marketing and engineering

This dual role was critical to success—I wasn’t just designing interfaces, I was building the infrastructure for how design would work at Plexus Worldwide.

Three Major Platform Redesigns

Over my tenure, I led three complete redesigns of Plexus Worldwide’s digital platforms, each building on lessons learned and evolving user needs.

Evolution Across Redesigns

First Redesign: Foundation

  • Established baseline user experience improvements
  • Implemented initial design patterns
  • Set up analytics and testing infrastructure
  • Learned direct sales platform constraints

Second Redesign: Refinement

  • Incorporated learnings from A/B testing and analytics
  • Improved conversion funnels based on data
  • Enhanced ambassador tools and workflows
  • Optimized for mobile and responsive design

Third Redesign: Maturity

  • Implemented complete atomic design system
  • Achieved design-development workflow optimization
  • Delivered peak conversion rate performance
  • Established sustainable, scalable patterns

Each redesign wasn’t starting from scratch—it was strategic evolution informed by data, user feedback, and business growth.

Platform Architecture & Design

1. Custom E-Commerce Platform

Designed comprehensive e-commerce experience tailored to direct sales model.

Unique Challenges:

  • Direct Sales Model: Different from traditional e-commerce—purchases often tied to specific ambassadors
  • Exigo Integration: Had to work within constraints of Exigo’s direct sales platform
  • Compensation Plan Requirements: Every transaction affected complex compensation calculations
  • Subscription Management: Recurring orders and auto-ship programs
  • Ambassador Personalization: Customers shopping through specific ambassador sites

My Design Solutions:

  • Streamlined checkout flows optimized for conversion
  • Clear subscription management interfaces
  • Ambassador attribution systems
  • Product browsing and discovery optimized for direct sales
  • Mobile-first responsive design
  • A/B tested layouts and user flows

Measurable Results: Website improvements had very real results in conversion rates:

  • Increased purchasing conversions
  • Improved enrollment conversions
  • Grew subscription member conversions

2. Ambassador Replicated Site Builder

Created platform allowing thousands of ambassadors to build personalized websites.

The Concept: Every Plexus ambassador needed their own website to share with prospects and customers. Rather than custom-building thousands of sites, I designed a replicated site system where ambassadors could personalize templates.

Design Challenges:

  • Scale: System served thousands of ambassadors
  • Personalization vs. Brand: Ambassadors needed customization without breaking brand standards
  • Non-Technical Users: Ambassadors weren’t web designers—interface needed to be intuitive
  • Performance: Thousands of similar sites needed efficient architecture
  • SEO: Each site needed to rank for ambassador’s local market

My Solutions:

  • Template-based system with controlled customization options
  • Visual site builder with real-time preview
  • Brand guidelines built into constraints
  • Pre-optimized templates for performance
  • Ambassador-specific content areas (bio, story, contact)
  • Integration with e-commerce for seamless shopping

Impact: Empowered thousands of ambassadors to have professional web presence without technical skills or ongoing marketing support.

3. Back-Office Dashboard

Designed comprehensive dashboard for ambassadors to manage their business.

Dashboard Features:

  • Sales Analytics: Real-time commission, sales volume, and team performance
  • Team Management: Downline organization, recruitment tracking, genealogy views
  • Order Management: Customer orders, subscriptions, shipping status
  • Commission Reporting: Detailed compensation breakdowns per Exigo rules
  • Marketing Tools: Access to approved marketing materials and campaigns
  • Training Resources: Educational content and certification tracking

Design Approach:

  • Information Hierarchy: Prioritized most-used features and critical metrics
  • Data Visualization: Made complex compensation data understandable
  • Mobile Accessibility: Ambassadors needed access on the go
  • Performance: Fast loading despite complex data from Exigo
  • Progressive Disclosure: Advanced features available without overwhelming new users

Technical Constraints: Working with Exigo’s direct sales platform meant navigating:

  • API limitations and data structure constraints
  • Compensation plan calculation requirements
  • Compliance and regulatory requirements
  • Data synchronization and real-time updates

Design System Innovation

Atomic Design System

Developed comprehensive atomic design system that transformed how design and development worked together.

System Components:

Atoms (Basic Building Blocks)

  • Buttons, form inputs, icons, typography
  • Color palette and spacing system
  • Brand elements and visual language

Molecules (Simple Components)

  • Search bars, form groups, card components
  • Navigation elements, dropdown menus
  • Product thumbnails, avatar components

Organisms (Complex Components)

  • Navigation headers, product grids
  • Dashboard widgets, checkout flows
  • Ambassador profiles, team genealogy views

Templates (Page Layouts)

  • E-commerce page templates
  • Dashboard layouts
  • Ambassador site templates

Pages (Specific Instances)

  • Homepage, product pages, checkout
  • Dashboard views, profile pages
  • Landing pages, campaign pages

Implementation & Documentation

Sketch Component Library

  • Comprehensive symbol library organized by atomic hierarchy
  • Shared library used across marketing team
  • Version controlled and documented
  • Reusable, consistent components for rapid prototyping

Angular Implementation

  • Design system implemented as Angular component library
  • Direct mapping from Sketch symbols to Angular components
  • Consistent styling through shared SCSS
  • Component API documented for developers
  • Living style guide showing all components

Design-to-Development Handoff Improved efficiency by 60% through:

  • Shared component language between design and development
  • Pre-built, tested components ready for use
  • Reduced back-and-forth on design implementation
  • Faster iteration cycles
  • Fewer inconsistencies between design and production

Impact: This wasn’t just a style guide—it was a shared language that fundamentally changed how teams worked together.

Research, Testing & Optimization

Data-Driven Design Decisions

A/B Testing

  • Tested checkout flow variations to optimize conversion
  • Compared page layouts and call-to-action placement
  • Validated design decisions before full rollout
  • Measured impact on purchasing, enrollments, subscriptions

Cognitive Walkthroughs

  • Tested user flows with ambassador personas
  • Identified pain points and confusion areas
  • Validated information architecture decisions
  • Ensured new users could successfully complete key tasks

Analytics Analysis

  • Studied user behavior patterns across platforms
  • Identified drop-off points in conversion funnels
  • Tracked feature usage in dashboard and site builder
  • Measured performance of different design iterations

Iterative Improvements

  • Used data to inform each redesign cycle
  • Continuous optimization between major redesigns
  • Quick iterations on high-impact areas
  • Evidence-based design decisions

This research foundation meant every design choice was validated by real user behavior, not assumptions.

Custom Applications & Integrations

Landing Pages & Contest Applications

Custom Landing Pages

  • Campaign-specific landing pages optimized for conversion
  • Product launch pages with countdown timers and pre-orders
  • Promotional landing pages for seasonal campaigns
  • A/B tested variations for maximum effectiveness

Contest Web Applications

  • Ambassador contest tracking and leaderboards
  • Gamified challenges to drive sales behavior
  • Real-time ranking displays with Exigo integration
  • Reward management and winner announcement systems

Email Templating System

Engineered custom email templating system:

  • Modular template components for marketing campaigns
  • Responsive email designs for all devices
  • Branded templates for different campaign types
  • Integration with email service providers
  • A/B testing capabilities for subject lines and content

ZenDesk Theme Integration

My Suggestion with Massive Impact:

I suggested ZenDesk theme integration to improve customer service efficiency.

The Problem: Customer service team was overwhelmed with repetitive questions. Much of support could be self-service if users could find answers easily.

My Solution:

  • Custom ZenDesk theme matching Plexus brand
  • Comprehensive knowledge base architecture
  • Self-service help center with search and categorization
  • Seamless integration with main website
  • Ambassador-specific help documentation

Unprecedented Results: The ZenDesk integration allowed the company to downsize their customer service team by 60%.

This wasn’t just a design win—it was a business transformation that saved significant operational costs while improving customer experience.

WordPress & SharePoint Development

Custom WordPress Themes and Plugins

  • Corporate blog themes matching brand design system
  • Custom plugins for ambassador directories
  • Integration with main platform for seamless navigation
  • SEO-optimized content templates

SharePoint Integrations

  • Internal team collaboration tools
  • Document management systems
  • Workflow automation for marketing and development
  • Integration with external platforms

Process & Practice Establishment

Work Practices That Endure

The processes I designed are still used today by both marketing and development departments:

Design-to-Development Workflow

  1. Design in Sketch using component library
  2. Annotate with component names from Angular library
  3. Document interactions and edge cases
  4. Hand off with specs referencing design system
  5. Developer implements using existing components
  6. Designer reviews in staging environment
  7. QA validates against design specifications

Design Review Process

  • Regular design critiques with stakeholders
  • Developer involvement early in design phase
  • Testing and validation before implementation
  • Post-launch analytics review

Component Library Governance

  • Proposal process for new components
  • Documentation requirements
  • Version control and deprecation strategy
  • Regular audits for consistency

Cross-Team Collaboration

  • Shared language between marketing and development
  • Regular sync meetings to align on priorities
  • Collaborative problem-solving sessions
  • Knowledge sharing and training

Teaching Front-End Best Practices

As part of the in-house development team, I helped developers learn front-end development best practices:

Code Quality

  • Semantic HTML and accessibility standards
  • CSS architecture and naming conventions
  • JavaScript patterns and component thinking
  • Performance optimization techniques

Design Implementation

  • Pixel-perfect implementation techniques
  • Responsive design patterns
  • Cross-browser compatibility
  • Progressive enhancement

Workflow & Tools

  • Version control best practices
  • Build tools and automation
  • Testing and QA processes
  • Documentation standards

This knowledge transfer meant developers could implement designs with higher fidelity and maintain the design system independently.

Direct Sales Platform Constraints

Exigo Platform Integration

  • API limitations shaped what was technically possible
  • Data structure requirements affected information architecture
  • Real-time synchronization challenges
  • Performance optimization within platform constraints

Compensation Plan Requirements

  • Every transaction affected complex commission calculations
  • UI needed to communicate compensation clearly
  • Compliance requirements limited some design options
  • Genealogy and downline visualization complexity

Direct Sales Parameters

  • Regulatory compliance for health product claims
  • Income disclosure requirements
  • Ambassador vs. customer distinction
  • Enrollment and qualification rules affecting UX

Design Solutions: Rather than fighting constraints, I designed within them:

  • Created patterns that worked with Exigo’s strengths
  • Simplified complex compensation through better visualization
  • Built compliance into design system guardrails
  • Made regulatory requirements seamless, not intrusive

Results & Business Impact

Quantifiable Outcomes

Conversion Rate Improvements Website improvements delivered very real results:

  • Increased purchasing conversions through optimized checkout flows
  • Improved enrollment conversions via streamlined sign-up process
  • Grew subscription member conversions through better subscription management UX

Operational Efficiency

  • 60% reduction in customer service team through ZenDesk integration
  • 60% improvement in design-to-development handoff efficiency via design system
  • Faster time-to-market for new features and campaigns
  • Reduced development costs through component reuse

Platform Scale

  • Thousands of users across e-commerce, site builder, and dashboard
  • Thousands of ambassador websites generated through replicated site system
  • Three major platform redesigns each improving on the last
  • Scalable design system supporting continued growth

Foundational Impact

Established Design Practice

  • Created Plexus Worldwide’s first digital design function
  • Built design processes still used today
  • Trained teams on design thinking and collaboration
  • Set design quality standards for all digital work

Design System Legacy

  • Atomic design system became foundation for all digital products
  • Component library enabled rapid prototyping and development
  • Shared design language improved cross-team communication
  • Sustainable, scalable design infrastructure

Process Innovation

  • Design-development workflow became company standard
  • Front-end best practices improved code quality
  • Cross-functional collaboration model adopted widely
  • Knowledge sharing culture established

Key Learnings

Pioneering Design in an Organization

1. Start With Process, Not Just Pixels Creating a design function meant establishing how design would work, not just producing designs. The workflows and practices had longer-lasting impact than any single interface.

2. Speak Both Languages Being able to translate between design and development was the superpower that made everything else possible. Understanding both worlds built trust and efficiency.

3. Design Systems Are Force Multipliers The 60% efficiency improvement wasn’t magic—it was systematic thinking about reusable components. The upfront investment paid dividends across every project.

4. Measure Everything Working in direct sales with clear conversion metrics meant every design decision had measurable business impact. Data-driven design wasn’t optional—it was how we proved value.

5. Constraints Drive Innovation Exigo’s limitations, compliance requirements, and compensation plan complexity seemed restrictive at first. But designing within constraints led to creative solutions we wouldn’t have found otherwise.

Building Cross-Functional Collaboration

6. Embed Yourself in Development Working as part of the development team, not just handing off to them, transformed the relationship. I learned their constraints; they learned design thinking.

7. Teach, Don’t Just Tell Helping developers learn front-end best practices created better partners who could implement designs with higher fidelity and suggest improvements.

8. Create Shared Language The atomic design system wasn’t just components—it was a vocabulary both designers and developers spoke fluently.

9. Document Everything Work practices endure when they’re documented and repeatable, not when they live in one person’s head.

10. Solve Business Problems, Not Just Design Problems The ZenDesk suggestion saved the company significant costs—designers who understand business impact create different (better) solutions.

Iterative Platform Design

11. Redesigns Build on Each Other Three platform redesigns weren’t redoing the same work—each was strategic evolution based on what we learned from real users and real data.

12. Design Systems Enable Iteration Having a component library made redesigns faster and more consistent. We could try new layouts without rebuilding everything.

13. Balance Innovation and Stability Ambassadors relied on these platforms for their business. Changes needed to improve without disrupting their workflows.

Technical Environment

  • E-Commerce Platform: Custom build integrated with Exigo
  • Design Tools: Sketch (component library), InVision (prototyping), Adobe Creative Suite
  • Front-End: Angular, SCSS, responsive web design
  • Back-End Integration: Exigo API, custom services
  • CMS: WordPress (custom themes and plugins)
  • Support: ZenDesk (custom theme)
  • Collaboration: SharePoint, internal tools
  • Analytics: Google Analytics, A/B testing platforms, heat mapping tools
  • Email: Custom templating system

Conclusion

Pioneering Plexus Worldwide’s digital design function meant building not just interfaces, but an entire design practice. From establishing foundational design systems to leading three major platform redesigns, from architecting complex multi-platform experiences to teaching front-end best practices, the work transformed how the company approached digital design.

The 60% improvement in design-to-development efficiency wasn’t just faster handoffs—it represented a fundamental shift in how teams collaborated. The 60% reduction in customer service team from the ZenDesk integration wasn’t just cost savings—it was solving business problems through design thinking.

The work practices still used today by both marketing and development departments demonstrate that great design isn’t just about beautiful interfaces—it’s about creating sustainable systems, collaborative processes, and shared understanding.

Most importantly, the measurable improvements in conversion rates across purchasing, enrollments, and subscriptions showed that thoughtful UX/UI design, informed by research and testing, validated by data, and implemented through solid engineering practices, delivers real business value.

From custom e-commerce platforms to ambassador site builders, from comprehensive design systems to cross-functional workflows, the work at Plexus Worldwide demonstrated that pioneering design in an organization means building infrastructure—technical, cultural, and collaborative—that outlasts any single project.

The platforms evolved. The teams grew. The business scaled. And the design practice established during these years continues to serve the company today.

Results & Impact

Transformed Plexus Worldwide's digital presence through three major redesigns, established atomic design system with comprehensive Sketch library and Angular implementation, improved design-to-development efficiency by 60%, enabled 60% customer service team reduction through ZenDesk integration, and significantly increased conversion rates across purchasing, enrollments, and subscriptions.