Almo-Pro-AV-Logo

Transforming a Legacy B2B Portal Into a Modern Ecommerce Experience

access

TL;DR

  • Redesigned Almo Pro AV's legacy B2B ecommerce portal, Access, transforming a cluttered, one-size-fits-all interface into a modern, personalized experience.
  • Reorganized navigation and information architecture around real usage patterns, introduced self-service tools like Quotes and Saved Carts, and reduced resellers' dependence on customer support for everyday tasks.

Project Overview

Background

Almo Pro AV's B2B portal, Access, had grown complex and hard to navigate over time, making it difficult for resellers to find products, track orders, and manage quotes. The goal: modernize the experience without breaking the workflows buyers already relied on.

My Role

  • Information Architecture: Built the sitemap and navigation structure, organizing content and workflows into scalable categories
  • UX Design: Designed wireframes, flows, and interface components
  • UI Design: Created the visual direction for the redesigned experience

Partnered with the Head of UX, who led research and early prioritization, while I owned sitemap restructuring, navigation strategy, feature organization, and UI design.

Project Length

10 weeks

Who Was It Built For?

  • Built for professional AV integrators, resellers, consultants, and B2B partners.

Problem

The Challenge

 

The original Access platform had become difficult to navigate and inefficient to use as years of legacy content, disconnected workflows, and new tools accumulated. Support tickets and reseller feedback surfaced recurring pain points:

  • Outdated UI that felt more like a website from the 90s
  • Fragmented navigation with limited product filtering, making discovery difficult
  • Inefficient, multi-step quote-building workflows
  • No personalization to surface relevant products or content
  • Heavy reliance on customer support for tasks users should be able to self-serve


The result was a fragmented experience that made it harder for partners to research products, build quotes, and support their own customers efficiently.


eACCESS-Prod

Balancing modernization with familiarity.

The challenge wasn't just modernizing the UI, it was reorganizing a complex B2B ecosystem without disrupting the workflows resellers already relied on daily. The redesign needed to modernize UX patterns and simplify workflows while preserving enough familiarity for long-time users to adapt comfortably.

 

01-navigation

Key Business Implications

Left unaddressed, these issues meant increased support costs, missed revenue from poor product discovery, and reseller frustration with a platform core to their daily workflow.

Mapping The Experience

Before rebuilding Access, I needed to understand what was there.

I audited the existing sitemap, category by category, to understand how products, resources, and workflows were organized across the platform. 

SiteMap-HighRes

What I discovered

The structure had grown into one flat hierarchy, over 40 top-level categories and hundreds of subcategories, trying to serve every user type the same way.

One portal. One structure. Too much information for every single user.

Rethinking the Structure

What if Access didn't have to look the same for everyone?

What if the experience could adapt to each user? This was the core hypothesis behind personalizing Access by user type.

For a reseller who primarily works with displays, for example: display-related products, brands, and resources would surface first, while categories outside their focus stay out of the way. Finding a display, checking availability, and adding it to a quote would take fewer steps, and the interface would visually prioritize what's relevant over what isn't.

Solution

Once we identified that a one-size-fits-all experience no longer worked, the direction became clear: create a customized experience around each user's needs. The goal wasn't just to redesign the UI, it was to transform Access into a platform users could rely on every day.

Information Architecture

Creating structure from complexity.
One of the biggest opportunities was reorganizing the platform around how users naturally think and work. I restructured the sitemap and navigation into five core categories:

  • Products
  • Quotes, Orders & Invoices
  • Resources & Support
  • Brands & Solutions
  • Account Tools

This reduced cognitive overload and created clearer, more predictable pathways throughout the portal.

Interaction Design

Designing smoother workflows for busy B2B users.

The redesign introduced new functionality to support real reseller workflows and reduce friction during key tasks, including saved carts, quote-building tools, product filters, stock and bidding indicators, live chat, and personalized recommendations. Saved carts and quote tools addressed how reseller purchasing decisions often span multiple sessions and require approval before checkout, while improved filters and live chat helped buyers navigate large catalogs and get support without leaving their workflow.

Visual Design

Modernizing the experience while building trust

Visually, the original platform felt dense and outdated. The redesign introduced cleaner layouts, a stronger typography hierarchy, and consistent UI components across pages, creating a more professional interface that better reflected Almo's scale and expertise.

Homepage Logged In (PRO AV)2

Home Page Improvements

COMP-HomePG-NewCUT-marks
1. Ecommerce-Style Navigation
  • Familiar mental models: Layout follows consumer shopping conventions, so buyers need no training
  • Simplified menu structure: Personalizing the IA to each buyer's business consolidated 3 sub-menus into 1, cutting clicks and cognitive load
  • Always-visible cart: Cart icon in the header on every page, giving one-click access and shortening the path to purchase
2. Task-Prioritized Content
  • Content prioritization: Most legacy dashboard features moved to My Account, decluttering the homepage
  • Frequency-based decisions: Orders, Quotes, and Invoices stayed on the homepage because usage data showed buyers rely on them most
  • Progressive disclosure: Lower-frequency tools live one click away
3. Customization based on user's needs
  • Personalization: Suggestions and customized solutions based on each user's needs
  • Improved discoverability: Surfaces relevant products without searching
  • Business impact: Supports engagement and cross-sell

Product List Improvements

1. Improved Filtering
  1. Accordion menus: Filter groups collapse and expand, using progressive disclosure to keep a long list scannable and reduce visual clutter
  2. Keyword search within results: Buyers can refine a filtered list by typing a term instead of scrolling, improving findability in a large catalog

  3. Faceted navigation with result counts: Counts beside each option set expectations before clicking and prevent dead-end results

2. Share and Print Options
  • Share search results: Buyers can send a filtered product list to other decision-makers, supporting collaborative, multi-stakeholder B2B purchasing
  • Print option: Creates a clean, offline version of the list for internal reviews and approval meetings
  • Reduced friction: Replaces workarounds like copying links or taking screenshots
COMP-ProdPg-New-Marks2
3. Added Decision-Support Features
  1. Compare button: Lets buyers evaluate products side by side on key specs, reducing reliance on memory and multiple tabs.
  2. Add to Quote button: Lets buyers start a quote directly from the list without opening each product page, matching how B2B purchasing works.
  3. Favorite button: Saves products so buyers can build a shortlist and return without searching again.
  4. Quick-scan product cards: Key specs, stock status, shipping estimate, and variant selectors (resolution, size) are visible in the card, reducing page-to-page navigation.

New Quotes Page

The Quotes page didn't exist before, buyers had to call or email their sales rep to check quote status. Adding self-service tracking let users manage quotes independently and reduced reliance on customer support.

Quotes-mark
1. Quote Status Dashboard
  • At-a-glance summary cards: Total Quotes, In Registration, Sales Rep Review, Ready to Order, and Total Value give buyers an immediate status overview without opening individual quotes.
  • Color-coded status badges: Each quote shows its stage (Requested, Registration, Sales Rep Review, Ready to Convert) in the list itself, so buyers know where a quote stands without contacting support.
2. Self-Service Quote Management
  1. Convert to Order: Buyers can move a ready quote straight into an order themselves, removing a step that previously required a rep.
  2. Add Comments: Lets buyers ask questions or flag requirements (like compatibility specs) directly on a quote, creating a written record instead of a phone call or email thread.
  3. Registration tags: "With Registration" and "Without Registration" labels clarify which deal-registration process applies, reducing confusion for reps and buyers alike.
3. Findability and Oversight
  1. Search and status filter: Buyers can locate a specific quote by keyword or item number, or filter by stage, instead of scanning a growing list.
  2. Share and print options: Support the same multi-stakeholder approval process as the product list page, quotes can be shared internally or printed for review.

Impact

I left the company before usability testing was completed, so I don't have quantitative results to share. Based on the goals the redesign was built around, I'd expect to see:

  • Faster time-to-quote, since Add to Quote and Saved Carts removed steps from what was previously a multi-session, manual process
  • Fewer support tickets tied to order and quote status, now that buyers can track both independently through My Account and the new Quotes page
  • Higher engagement with personalized and best-seller content, since the homepage now surfaces relevant products instead of treating every user the same way

The redesign positioned Access to become a more scalable, self-service platform that better supports how resellers actually work.

Key Takeaways

Designing enterprise systems requires both strategy and restraint. This project reinforced how critical information architecture is within complex B2B ecosystems. It also highlighted the importance of balancing user expectations, business goals, and legacy system constraints.

If I had continued on the project, my next steps would include:

  • Moderated usability testing
  • Measuring task completion improvements
  • Iterating based on user feedback
  • Onboarding flows for new features

This redesign laid the foundation for a more scalable, self-service platform, one built around how B2B users actually work, not just how the old system happened to grow. The groundwork is there; the next phase is validating it with real users and iterating from what they show us.

Address: 1014 W. 36th Street, Baltimore, MD 21211
Phone: +1 240 883 2123
Email: carolina@maydigitaldesign.com

© May Digital Design 2026

View