FrontendB2B Ecommerce2022-2025

Enterprise B2B Ecommerce Platform

Confidential B2B Enterprise Client | US Based via Aigital Technologies
The Problem

The legacy platform lacked performance, analytics, and critical B2B buying flows, blocking adoption and growth.


Project Overview

Enterprise B2B ecommerce platform on SAP Hybris. I joined as the sole frontend developer, grew into UI Team Lead, and rebuilt the platform to improve performance, usability, conversion flows, and business enablement.

Client-specific UI screenshots are not shown due to confidentiality. Business outcomes, architecture decisions, and delivery impact are fully documented below.

Impact

~$1M+

Revenue generated

~30k+

Users acquired

~90%

Faster load times (10-15s to 1-2s)

B2B Channel

Enabled dropshipping and business ordering flows

Phased Execution

Phase 1: Core B2B Platform Build (Go-live)

  • Built complete frontend on top of Hybris base constraints.
  • Converted Figma to production UI in legacy JSP architecture.
  • Fixed mobile usability and core flow quality.
  • Implemented analytics and event tracking from zero.
  • Enabled core B2B ordering and checkout workflows.

Phase 2: Business Capability Expansion (Post Go-live)

  • Built credit/pay-later checkout and account-based logic.
  • Redesigned order history and fast reordering journeys.
  • Handled consignment-level invoice visibility flows.
  • Integrated Emarsys lifecycle and campaign triggers.
  • Merged business logic across platforms without fragile coupling.

System Architecture (High-Level)

Business Buyer Web / Mobile Frontend Layer JSP + jQuery + UI System Tracking Layer GTM + GA Events Commerce Core SAP Hybris Lifecycle Layer Emarsys + Campaign Triggers Business Ops Orders + Invoices + CRM

Role Evolution

Joined as sole frontend developer. Grew into UI Team Lead, owning all frontend architecture decisions. Operated as the bridge between backend, design, and product across every delivery-critical call.

Initial State: What Was Broken

Product

  • No usable mobile experience.
  • No analytics or visibility into user behavior.
  • Missing B2B features like credit checkout and reordering.
  • Fragmented journeys across systems.

Technical

  • Legacy JSP + jQuery + Bootstrap frontend.
  • Cluttered, unstructured codebase.
  • Slow load times (10–15s).
  • No accessibility compliance.
  • All JS loaded globally on every page.

Business

  • New sales channel needed adoption, quickly.
  • Existing users were not onboarding to the new platform.
  • No tracking meant no optimization and no growth feedback loop.

What I Actually Built

1. Performance Transformation

  • Cut load times from ~10–15s to ~1–2s.
  • WebP optimization and lazy loading.
  • Page-level JS loading (removed global payloads).
  • CSS/JS cleanup and minification with wro4j.
  • Removed unused assets and simplified markup/DOM.

2. Mobile & UX Foundation

  • Built mobile-first experience from scratch.
  • Converted static designs into production-ready journeys.
  • Handled UX edge cases and consistency across flows.

3. Accessibility (WCAG AA)

  • Implemented semantic structure for forms, navigation, and order workflows.
  • Added meaningful alt text and ARIA labels across conversion-critical screens.
  • Improved keyboard navigation and visible focus states for checkout actions.
  • Raised contrast and text legibility to meet WCAG AA expectations.

4. B2B Feature Systems

  • Credit/pay-later checkout built from scratch.
  • Account-based checkout logic (standard vs one-step credit).
  • Order and consignment UX for partial deliveries/invoices.
  • Reordering journeys optimized for business buyers.

5. Analytics & Tracking Infrastructure

  • Implemented GTM and GA where no tracking existed before.
  • Tracked full ecommerce journey with custom events/triggers.
  • Enabled conversion visibility and funnel optimization.

6. Marketing & Lifecycle Integration

  • Integrated Emarsys for campaign and lifecycle triggers.
  • Enabled abandoned cart and dynamic journey messaging.
  • Designed email templates across the ecommerce lifecycle.

7. Frontend Architecture Cleanup

  • Built reusable UI components to reduce frontend duplication.
  • Reduced duplication and organized page-level assets.
  • Migrated rigid px values toward scalable rem units.

8. Cross-Team Product Collaboration

  • Contributed to API-level and flow-level decisions with backend.
  • Worked with design on edge cases and conversion journeys.
  • Supported product-level decisions during platform merge efforts.

Delivery Flow (How Value Was Created)

Performance UX + Accessibility B2B Checkout Account Logic Analytics Full Funnel Visibility Lifecycle Campaign Triggers Growth Outcomes

Complexity Layers

Legacy Constraint

Built on JSP + jQuery inside Hybris, not a greenfield React-style environment.

Business Model Complexity

Handled marketplace behavior and direct B2B sales logic within one platform.

Parallel Delivery Pressure

Balanced live platform stability, new feature rollout, and merge planning in parallel.

Account-Based Checkout Logic

Checkout behavior changed by account type, requiring robust flow branching.

Zero to Full Analytics

Built complete measurement capability from no tracking to full funnel visibility.

Triple Constraint

Performance, accessibility, and UX had to improve together, not one at a time.