IMPROVING USABILITY IN A B2B E-COMMERCE PLATFORM

Client:
Distancify (project with anonymized B2B client)
Role:
UX Designer
Type:
Internship at Distancify
Timeframe:
Spring/summer 2024

TL;DR

Improved the usability of a B2B e-commerce platform during an internship at Distancify by identifying friction in complex, task-oriented workflows. Through heuristic evaluations, scenario-based analysis, and industry input, the project uncovered usability issues related to hierarchy, cognitive load, and workflow clarity across checkout, account management, and customer support. The outcome included prioritized UX findings and high-fidelity redesign concepts focused on improving efficiency, structure, and usability within existing technical constraints.

DISCOVER

Context

The project focused on an existing B2B e-commerce platform selling lighting products to companies. Unlike many consumer-focused e-commerce websites, the platform supports recurring and task-heavy workflows where efficiency and clarity are especially important.

Users frequently:

  • manage multiple accounts and contact persons
  • place large recurring orders
  • handle deliveries and logistics
  • contact support regarding products and orders

Distancify already experienced parts of the platform as difficult to use, especially the cart and checkout flow. Rather than redesigning the platform completely, the goal was to identify realistic usability improvements while maintaining the existing branding, structure, and technical constraints.

Problem Space

The challenge was not to design a new platform from scratch, but to improve usability within an already existing production system.

This meant:

  • analyzing real user flows
  • identifying friction in everyday tasks
  • understanding existing design constraints
  • proposing improvements realistic to implement

A major challenge was that most usability issues were not catastrophic individually. Instead, the friction came from many smaller structural and interaction problems that together created unnecessary cognitive load throughout common workflows.

Another important aspect was understanding the context of B2B purchasing behavior. Through discussions with people working within the same industry, it became clear that users often prioritize efficiency, predictability, overview and fast repeat purchasing.

This shifted the focus away from visual redesign and towards improving structure, hierarchy, and workflow clarity.

DEFINE

Evaluation Method

The project began with a heuristic evaluation based on Nielsen’s usability heuristics, combined with scenario-based analysis.

To structure the evaluation, I created scenarios covering key parts of the platform, including account management, cart interactions, checkout and customer support.

Each scenario was systematically evaluated against relevant heuristics, while identified issues were rated based on impact and implementation effort. This helped prioritize which problems would create the most value to improve within realistic constraints.

Go to check out. Cklick at the product information. Change amount by changing the number using the keypad.

Click on the company name. A side menu will open. Click on my profile. Scroll down to the subscription section. Click on the one you want to subscribe to.

Press Customer Support in the navbar. Scroll down to find different options.

Industry Input

To complement the heuristic evaluation, I also conducted sessions with representatives from a similar B2B company. Participants were asked to navigate the platform while thinking aloud during tasks. These sessions helped validate existing findings, identify additional friction points and provide insight into how B2B customers actually work and purchase products.

The interviews reinforced that efficiency and overview were critical in these environments, especially during repetitive tasks such as managing orders and checkout.

Key Findings

The evaluation revealed several recurring usability issues across the platform.

Account Management

The “My Profile” section contained large amounts of information within a limited space, making navigation and overview difficult. Several issues were connected to:

  • lack of hierarchy
  • unclear grouping of functions
  • excessive scrolling
  • insufficient feedback during actions

For example, subscribing to newsletters lacked confirmation feedback, creating uncertainty about whether the action had been completed successfully.

Another issue was that account management only existed as a sidebar interaction rather than a dedicated page structure, which reduced clarity and flexibility.

Cart & Checkout

The cart and checkout flows contained large amounts of information presented simultaneously, often without sufficient visual hierarchy. Several usability issues emerged:

  • important information competing visually
  • unclear grouping of content
  • cramped horizontal layouts
  • unnecessary modal interactions
  • high cognitive load during checkout

For example, changing product quantity triggered a modal interaction instead of allowing direct editing within the interface. While modals can be useful for more complex editing, this interaction created unnecessary interruption for a very common task.

The checkout flow also displayed many different types of information at the same time, making the process feel visually overwhelming.

Customer Support

The customer support section presented large amounts of information simultaneously through wide column-based layouts. This created:

  • poor scanability
  • visual clutter
  • weak hierarchy
  • difficulty navigating between support topics

The hero section also occupied a large amount of space without contributing significantly to task completion.

DEVELOP

Prioritization & Design Approach

Since the platform already existed in production, not all usability issues could or should be redesigned.

To prioritize improvements, identified issues were evaluated based on impact on usability and estimated implementation effort. This helped focus redesign efforts on changes that could create meaningful improvements without requiring a complete rebuild of the platform.

The redesign process focused heavily on:

  • reducing cognitive load
  • improving hierarchy and grouping
  • increasing clarity and scanability
  • maintaining consistency with the existing visual identity

Rather than introducing entirely new interaction patterns, the goal was to improve and simplify existing workflows.

Redesigning Checkout

The checkout redesign became one of the main focus areas of the project.

A major issue in the original flow was that too much information appeared simultaneously in a horizontally structured layout. Product information, delivery details, pricing, and actions competed visually, making the flow feel overwhelming.

To reduce cognitive load, I redesigned the checkout into a more vertically structured flow. This helped:

  • separate information into clearer sections
  • improve scanability
  • create a more natural progression through the checkout process
  • reduce the feeling of visual overload

Additional improvements included:

  • simplified product presentation
  • clearer grouping of delivery information
  • more focused hierarchy
  • optional fixed order summary during scrolling

The redesign was heavily influenced by how B2B users often work; quickly, repeatedly, and with a strong focus on overview and efficiency.

Redesigning Account Management

The “My Profile” section was redesigned to improve structure and overview.

The original layout relied heavily on sidebar navigation and contained many functions within limited space. This created excessive scrolling and made it difficult to understand relationships between categories.

To explore alternative structures, I created multiple redesign concepts, one using separated navigation levels one organizing functions vertically within a more unified flow.

The redesigns focused on:

  • clearer hierarchy
  • better grouping of related actions
  • improved visibility of important functions
  • stronger feedback during actions

Redesigning Customer Support

The customer support redesign focused primarily on hierarchy and readability. Instead of displaying many categories simultaneously in wide horizontal layouts, the information was reorganized vertically to improve:

  • scanability
  • structure
  • navigation between topics
  • visual rhythm

The redesign also reduced the visual dominance of the hero section, allowing users to reach relevant support information more quickly. Although the content itself changed very little, restructuring the layout significantly improved clarity and usability.

DELIVER

Final Outcome

The project resulted in:

  • a structured heuristic evaluation
  • prioritized usability findings
  • scenario-based UX analysis
  • redesign proposals for key user flows
  • conceptual prototypes for checkout, account management, and customer support

The project demonstrated how relatively small structural and interaction changes can significantly improve usability in complex, task-oriented environments.

Reflection

This project taught me how different it is to improve an existing product compared to designing something completely new.

One of the biggest learnings was that usability problems are often not dramatic on their own. Instead, friction is created through many small issues that together make workflows feel unnecessarily difficult or overwhelming.

I also learned how important prioritization is in real-world UX work. Since redesign opportunities were limited by existing systems and constraints, it became essential to focus on improvements that would create meaningful impact without requiring major changes.

Another important takeaway was how valuable it can be to combine heuristic evaluation with real industry perspectives. The discussions with B2B professionals helped contextualize the findings and gave deeper insight into how users actually behave in these environments.

Finally, the project strengthened my understanding of designing for efficiency-focused systems, where clarity, structure, and predictability are often more important than visual innovation.

Next Steps

The next step would be to validate the redesign proposals through usability testing with actual users of the platform. This would help evaluate:

  • whether the redesigned structures feel more intuitive
  • how the updated checkout flow affects cognitive load
  • whether hierarchy improvements reduce friction in recurring tasks

Further work could also explore:

  • accessibility improvements
  • mobile responsiveness
  • onboarding for new users
  • optimization for repeat purchasing workflows
  • implementation feasibility together with developers