Introduction

BIMcollab webshop helps new customers explore the existing products plans, prices and also purchase licenses for their teams.

As a one-person UX team at the time, I took on the challenge of redesigning the entire webshop system, aiming to modernize the legacy platform and create a more flexible, intuitive, and accessible experience with a simpler purchasing process.

The new webshop is now live—check it out here:

Overview

BIMcollab offers tools that enhance collaboration for architects, engineers, and construction professionals.

I redesigned the BIMcollab webshop to make it more user-friendly, with transparent pricing and a simple checkout process.

This new platform allows customers to easily purchase licenses for BIMcollab products like BIMcollab Nexus, BIMcollab Twin, and BIMcollab Zoom.

Role

UX/UI Designer

Collaboration

Worked closely with a Scrum development team of 6 members

Collaborated with graphic designers to integrate the new branding

Tools used

Figma / FigJam, Adobe Suite, Miro

Design Thinking

To redesign the BIMcollab webshop with a focus on user-centric design, I used the Design Thinking framework. Rather than following a traditional linear process, I took an iterative approach to ensure the new solution met both user needs and business goals.

EMPATHIZE

Problem statement

Customers could place orders but often needed help from sales representatives to finish the checkout. The old system also didn’t allow purchasing multiple products at once, requiring separate orders for each item.

With a growing product portfolio, it was essential to redesign the webshop to be more flexible, scalable and user-friendly, reducing sales team involvement and improving the overall purchasing experience.

Legacy design

To give you a clearer picture, here’s an example of the old legacy design.

UX Audit

Heuristics evaluation

I started with a UX audit of the old webshop using Nielsen’s usability heuristics to find key issues like navigation, error prevention, and user flows. Here are a few key findings:

  • System status visibility: There’s no progress bar or indicator showing how many steps are left in the checkout process, which leaves users uncertain.
  • Action feedback: Errors or incomplete fields don’t show up in real time. For example, if users leave the email field empty, they only see the error after submitting the form, causing confusion.
  • Flexibility and efficiency: Users can’t easily review or edit their order during checkout. For instance, changing plan or payment options isn’t straightforward, making the process less efficient.

Accessibility check

I also conducted an accessibility check to ensure compliance with WCAG standards. Here are the main issues I found:

  • Low color contrast: Some text fields and backgrounds have poor contrast, especially with light colors, making it hard for users with low vision to read.
  • Keyboard navigation: The webshop form doesn’t fully support keyboard navigation, which is crucial for users who rely on keyboards instead of a mouse.
  • Focus indicators: There are no clear visual indicators for selected fields, making it hard for keyboard and screen reader users to identify the active element.
  • Form instructions: Fields like “Additional address info” and “Department name” lack clear guidance, leaving users unsure about what to enter.

Research

Stakeholders interviews

In addition to auditing the existing design, I conducted stakeholder interviews with key team members from sales, marketing, and customer support.

The goal was to gather insights into business objectives, user needs, and challenges with the current webshop.

Semi-structured user interviews

As part of the research phase, I conducted semi-structured interviews with clients to gather qualitative insights about their experience with the current webshop. I asked a mix of structured and open-ended questions to dive deeper into their experiences.

Some example questions included:

  1. Can you walk me through your typical process when using the webshop to place an order?

  2. What part of the checkout process do you find most confusing or frustrating?

  3. How do you feel about the clarity of pricing and plans when purchasing a license?

  4. Have you ever had to reach out to sales for help with your order? If so, what was the reason?

  5. Are there any features or changes you wish the webshop had to make your experience easier?

Analytics insights

While quantitative data on user behavior, such as drop-off rates during checkout, would have been valuable, no such data was available for the old legacy webshop.

The lack of analytics made it challenging to pinpoint exact areas where users abandoned the existing process, leaving us to rely on qualitative feedback from stakeholders and user research to identify pain points.

Competitor research

I also conducted competitor research to analyze industry best practices, identify strengths and weaknesses in similar webshops, and gather insights that would inform the design and functionality of the BIMcollab webshop.

DEFINE

Main findings

What our user research the main findings were as following:

  1. Users are unclear about the length of the checkout process and often abandon it due to the long form.

  2. Users want the ability to generate a quote and send it to their manager.

  3. A clear summary and transparent pricing are important for users.

  4. Users want flexibility to modify their order throughout the checkout process.

  5. Some button labels, such as "Buy now," are misleading and cause confusion, as they lead to the third step of checkout.

Defining success metrics

To evaluate whether the redesign is successful together with stakeholders we've defined the following metrics to measure:

1. Checkout completion rate

2. Abandonment rate

3. Time to complete checkout

4. Quote generation rate

IDEATE

Brainstorming workshop

During the ideation phase, I organized a collaborative brainstorming workshop with stakeholders from sales, marketing, and development. The goal was to generate solutions for the webshop based on user research and business needs. Using techniques like mind mapping and affinity diagramming, we focused on improving usability and flexibility in the checkout process.

Note: The participants names are hidden to protect their privacy.

Prioritize ideas

To prioritize which features to focus on, I facilitated an Value vs. Effort matrix exercise with the team. This allowed us to visually assess the impact of potential solutions based on their value to users and the effort required to implement them.

User flows

To create a high-level overview I have created a user flow to illustrate the full user journey of the license purchase.

Here the challenge was to create a simple experience of adding multiple products with different plans and pricing tier.

PROTOTYPE

Low-fidelity design

First drafts

This is the first draft of the design concept, created with wireframes to help bring the product vision to life. Wireframes were created for all pages of the webshop to show a comprehensive overview of the layout, navigation, and functionality.

High-fidelity design

Color and typography

I created a color scheme and typography that match BIMcollab's brand to keep the new webshop visually consistent.

Reusable components

I created reusable components that developers could easily implement for better collaboration and ensuring consistency throughout the webshop.

Hi-fi designs

Here’s an example of a high-fidelity design. Before diving into all the details, it was crucial to align with the tech development leads to evaluate the feasibility, viability, and technical possibilities of the design.

Responsive design

I made the webshop's screens responsive so users could access it easily on all devices, from desktops to smartphones.

TEST

Usability testing

Methodology

Usability testing consisted of 7 predefined task scenarios that focused on the initial steps of the process: selecting products and entering company details.

Nine participants were asked to use the Think Aloud method, verbalizing their thoughts as they interacted with the design.

Results

Some tasks, such as adding multiple products to the cart, had a lower completion rate, providing valuable insights into areas for improvement.

Based on the findings I could improve the usability of the new webshop in the upcoming iterations.

Collaboration with the Product Trio

Throughout the project, I worked closely with the product trio—design, product management, and development—to align on goals and priorities.

This continuous collaboration proved that the webshop solutions I designed addressed were feasible to implement and so that they serve user and business goals.

IMPLEMENT

Active Participation in Development Sprints

I participated in sprint refinements to clarify design details for the development team, helping them provide more accurate estimates. Additionally, I stayed actively involved in development sprints, supporting the team during implementation to ensure the designs were executed as intended and user needs were met effectively.

Impact

  • Improved user experience with straightforward navigation and a simplified checkout process
  • Automated sales process
  • Potential for higher conversion rates and reduced cart abandonment
  • Optimized mobile experience, improving accessibility and usability

The project is still going on...

After the major redesign, I continue to work closely with the development team to refine the webshop further, introducing small features and improvements to enhance the checkout experience over time.