LxBxH

The main goal of the redesign was to bring clarity and structure to the platform. It supports several distinct ordering options, from purchasing ready-made stock packaging to configuring custom boxes and requesting quotes. The primary challenge was to differentiate these options, restructure navigation, and streamline key user flows for both guests and registered B2B clients, all within a tight timeline.

I worked closely with the QA Specialist and Business Analyst to align user flows with functional specifications, role-based logic, and acceptance criteria. I restructured the navigation to distinguish Custom Packaging, Stock Catalog, Configurator, and Quote Requests. To validate the initial information architecture, I conducted lightweight corridor testing and cross-checked the findings against QA results, refining the final UX decisions and accounting for logical edge cases. I also redesigned the box configuration experience as a guided wizard with visual step indicators, standard industry specification selection, and interactive previews.

To ensure visual and structural consistency across the platform, I built a Figma UI library using the existing Vue UI library as a foundation for development hand-off, while retaining the LxBxH corporate identity and brand color palette.

• Variables & styles: Colors, typography, spacing, and layout properties.
• Custom components & states: Base UI controls, including inputs, buttons, and selectors; forms with validation; step indicators; section modules; complex functional cards; and modals.
• Desktop & mobile: Reusable components and layouts adapted for desktop and mobile experiences.

Visual direction

To strengthen the connection to packaging manufacturing, I introduced visual motifs inspired by packaging elements. A subtle dieline grid with thin lines and overlapping intersections created a structured background pattern across key pages. A translucent gradient “x” derived from the LxBxH logo served as a soft background accent for blocks and sections. Box graphics, sharp container shapes, and related visual assets reinforced the brand identity.

The final design covered four key areas: the main page and service entry points for stock products, custom configurators, and request forms; a guided configurator wizard with selection previews and batch inputs; a filterable stock packaging catalog with dimension-based matching and direct cart actions; and a B2B account and order overview for viewing order history, managing corporate details, and sending reorder requests.

The redesign delivered a clearer structure for the existing platform and transformed the box ordering experience into a guided, step-by-step flow.

By differentiating core services, streamlining configuration flows, improving stock-product discovery, and establishing a scalable UI system, the redesign delivered a more coherent experience across the platform.