commercial project

Intuitive product configurator
for an industrial lighting company

Intuitive product configurator for an industrial lighting company

Roles:

UX Designer

UI Designer

UX Researcher

Low-code Developer

Scope:

Market Research

UX Audit

UX Design

UI Design

Prototyping

Usability Testing

Team:

Me (design + no-code)

Blue-Mint Agency (development)

Duration:

6 months

Problem:

The company's previous website was outdated and ill-suited to the business's dynamic growth. It did not reflect the company’s aspirations to build global brand recognition and expand into international markets. An additional issue was the ordering system, which relied solely on phone and email communication. This approach created numerous difficulties for both customers and the sales team — causing friction in the purchasing process and significantly limiting the effectiveness of the sales funnel.

Solution:

A modern website should serve a dual purpose: acting as an intuitive platform for product inquiries and a credible source of industry knowledge. With a rich library of technical materials targeted at lighting engineers, the website will not only enhance user engagement but also emphasize the company’s expertise and experience in the sector.

Results:

The new website has been launched and equipped with advanced features such as a product configurator, inquiry form, and designer zone. Thanks to these solutions, users now have easier access to the information they need, and the ordering process has become smoother and more efficient.

after

after

after

context

context

Explosion-proof luminaires - niche product

Oświetlenie przeciwwybuchowe
- specjalistyczny produkt

The company was founded in 2011, starting its operations from scratch. In its early years, it focused its resources on building know-how and strengthening its market position. The company specializes in the production of industrial lighting, with its key product line consisting of explosion-proof luminaires—designed for use in high-risk environments such as refineries, drilling platforms, and distillation plants. Due to the high level of specialization and a limited group of end users, the sale of such products requires a well-targeted approach.

context

context

Untapped potential

The fundamental and crucial element in competing within the explosion-proof luminaire market is proper product certification—primarily compliance with the ATEX directive, which determines whether such products can be placed on the market. This naturally generates demand for these types of solutions, particularly in Middle Eastern markets associated with oil extraction and processing.

In order to increase turnover, the company has undertaken efforts to diversify its sales markets, seeking new clients in Europe, Asia, and South America. Unfortunately, these efforts have encountered a number of challenges. A detailed analysis revealed that:

The fundamental and crucial element in competing within the explosion-proof luminaire market is proper product certification—primarily compliance with the ATEX directive, which determines whether such products can be placed on the market. This naturally generates demand for these types of solutions, particularly in Middle Eastern markets associated with oil extraction and processing.

In order to increase turnover, the company has undertaken efforts to diversify its sales markets, seeking new clients in Europe, Asia, and South America. Unfortunately, these efforts have encountered a number of challenges. A detailed analysis revealed that:

▪️ The company's products are perceived as reliable and high-quality, but at the same time more expensive than competing alternatives. For example, those from China, which makes it difficult to compete in price-sensitive markets.

▪️ The brand is not globally recognized – the company has not yet established a strong presence in the minds of international customers, which results in lower trust compared to well-known global manufacturers.

▪️ There is a lack of a clear value proposition – key strengths such as build quality, durability, and compliance with stringent safety standards are not being effectively communicated or emphasized.

▪️ The process of making contact and submitting inquiries is complicated and unintuitive.

ux audit

ux audit

The website performs poorly

before

before

before

UX audit results:

UX audit results:

▪️ There is a lack of CTA (call-to-action) buttons on product pages, which is a critical performance indicator at the final stage of the sales funnel,

▪️ Contact is available only on the "Contact" page, which forces users to leave the product page,

▪️ A relatively high number of users (75,000 in 2023), primarily from organic traffic,

▪️ Only 5.3% returning visitors, indicating weak user retention on the website,

▪️ The website does not sufficiently support the conversion process,

▪️ Low average session duration—just 38 seconds,

▪️ The website has an outdated layout.

pivot

pivot

Oops! That's the wrong way

I started by creating a research plan, a screener, and conducting the first in-depth interviews. I based my initial outreach on a list of clients provided by the sales team and analyzed companies that had purchased our products in the past two years. I focused specifically on orders related to explosion-proof lighting, since that’s one of our company’s key strengths in the market.

And that’s when I realized I’d made a mistake.

It turned out that in many industrial electrical projects, lighting requirements are strictly defined, and the people placing the orders often have little to no say in which lighting products get used. They’re just following the specifications.

That insight made me pivot.

I decided to shift focus to Lighting Designers - they’re the ones who actually influence the choice of lighting fixtures. I conducted six additional interviews with them, which gave me much deeper insight into their needs and helped shape the next steps of the project.

Most important insights from IDIs:

1

They are data focused

Lighting Designers need access to detailed technical data. For them, the availability of clear and complete product specifications is crucial. The product name itself is usually just a reference code they use when communicating with the manufacturer.

2

They are overworked and busy

These professionals value their time. When they visit a website and can't quickly find the product they need, they don’t come back and try again. We need to support them in their day-to-day work to improve retention on our site.

3

They use new technologies

Building Information Modeling (BIM) is a 3D representation of a building, enriched with various types of data. More importantly, it facilitates communication and collaboration between all stakeholders involved in the design and construction process.

protopersona

protopersona

Lighting Designers

Jacek Lumen

Jacek Lumen

Lighting Designer

Lighting Designer

37 y.o. | Bydgoszcz

37 y.o. | Bydgoszcz

demography

demography

▪️Works in BIM and uses modern tools such as DIALux,

▪️Works in BIM and uses modern tools such as DIALux,

▪️Handles multiple projects at the same time,

▪️Handles multiple projects at the same time,

▪️Looks for verified and reliable solutions,

▪️Looks for verified and reliable solutions,

▪️Focuses on specifications and data,

▪️Focuses on specifications and data,

▪️Checks certificates and approvals.

▪️Checks certificates and approvals.

behaviours

behaviours

needs

needs

▪️ Delivers projects under tight deadlines,

▪️ Delivers projects under tight deadlines,

▪️ Avoids unnecessary repetition,

▪️ Avoids unnecessary repetition,

▪️ Find trusted, reliable suppliers he can count on,

▪️ Find trusted, reliable suppliers he can count on,

▪️ He needs to have some references and opinions.

▪️ He needs to have some references and opinions.

▪️ Open each product site to compare them,

▪️ Open each product site to compare them,

▪️ Unclear names, labels and symbols,

▪️ Unclear names, labels and symbols,

▪️ Has no idea who to contact with,

▪️ Has no idea who to contact with,

▪️ Doesn't know the real product quality.

▪️ Doesn't know the real product quality.

pains

pains

user-centric design

user-centric design

Let them find, what they need

Niech znajdą to,
czego potrzebują

In this case, users visit the website with a clear and specific need. They’re looking for a product that meets the exact technical specifications of their project and has the required certifications.

It’s crucial that users can find the right product easily - in just a few simple steps.

In this case, users visit the website with a clear and specific need. They’re looking for a product that meets the exact technical specifications of their project and has the required certifications.

It’s crucial that users can find the right product easily - in just a few simple steps.

❌ Product families are located on separate pages.
❌ No option to filter products.
❌ Products comparable by opening individual pages one by one.
❌ Product series tabs are not clearly visible.

❌ Product families are located on separate pages.
❌ No option to filter products.
❌ Products comparable by opening individual pages one by one.
❌ Product series tabs are not clearly visible.

before

before

before

after

after

after

✅ A single page with all products available.
✅ Multiple filters provided to simplify product selection.
✅ All tabs replaced with filters to streamline navigation.
✅ Clean grid layout with products sorted alphabetically.

✅ A single page with all products available.
✅ Multiple filters provided to simplify product selection.
✅ All tabs replaced with filters to streamline navigation.
✅ Clean grid layout with products sorted alphabetically.

user-centric design

user-centric design

user-centric design

Let them stay

During usability testing, many users expressed frustration with the difficulty of finding the right contact person. They preferred to continue searching online, looking for alternatives with clear pricing or at least a simple contact form. I identified this issue as critical because it hinders the site’s conversion rate and leads to significant loss of potential customers. Additionally, the lack of a clear CTA button prevents tracking user interest in products, depriving the company of valuable sales and product insights.

To address this, I designed a user flow that aligns with every stage of the sales funnel, providing users with support and guidance throughout the entire process.

❌ No call-to-action button on the product page,
❌ Confusing product configuration process,
❌ Unexplained manufacturer codes and labels,

❌ No call-to-action button on the product page,
❌ Confusing product configuration process,
❌ Unexplained manufacturer codes and labels,

before

before

before

✅ An inquiry button that generates leads,
✅ A product configurator that requires no specialized knowledge,
✅ A gallery showcasing products in various configurations.

✅ An inquiry button that generates leads,
✅ A product configurator that requires no specialized knowledge,
✅ A gallery showcasing products in various configurations.

after

after

after

user-centric design

user-centric design

user-centric design

Let's make a tool for them

Each project comes with unique lighting specifications and requirements, tailored to various standards and constraints depending on its application. Lighting fixtures designed for hazardous explosion zones differ significantly in terms of construction, wiring, connections, and installation. Additionally, the type of material stored in silos determines the required level of ingress protection and the chemical resistance that the fixtures must meet. This complexity results in an overwhelming amount of data tables, standards, labels, and certifications.

To simplify the workflow for lighting engineers, I created a dedicated Designer Zone. This practical tool is meant to become part of their daily routine, boosting productivity and efficiency. It also strengthens the company’s reputation as a professional and reliable partner by providing users with essential information and demonstrating the company’s commitment to their needs.

Each project comes with unique lighting specifications and requirements, tailored to various standards and constraints depending on its application. Lighting fixtures designed for hazardous explosion zones differ significantly in terms of construction, wiring, connections, and installation. Additionally, the type of material stored in silos determines the required level of ingress protection and the chemical resistance that the fixtures must meet. This complexity results in an overwhelming amount of data tables, standards, labels, and certifications.

To simplify the workflow for lighting engineers, I created a dedicated Designer Zone. This practical tool is meant to become part of their daily routine, boosting productivity and efficiency. It also strengthens the company’s reputation as a professional and reliable partner by providing users with essential information and demonstrating the company’s commitment to their needs.

Designer’s Handbook – sharing knowledge and clarifying terminology
DIALux Tools – providing the product catalog as a DIALux plugin
Designer Academy – training on using 3D design tools in DIALux
Personalized Projects – offering support to lighting engineers when needed

Designer's Vademecum - sharing knowledge and explaining terms,

DIALux tools - sharing products catalogue as DIALux plugin,

Designer's Academy - teaching DIALux 3D designing tools,

Personalized Projects - helping lighting engineers in need,

new feature

new feature

new feature

user-centric design

user-centric design

user-centric design

Products configurator that leads you

The project required adding a product configurator to the new website, and my role was to conduct research and propose the layout. One of the biggest challenges was analyzing all the data and deciding what should be included in the configurator. I managed to balance the needs of users, sales representatives, and stakeholders, which allowed me to deliver an MVP.

As a low-code developer on the project, I was also responsible for building part of the technical backend. Since the configurator was developed after the website launch, I had to redesign several data structures to accommodate decisions about the displayed information and the logistics of the configurator itself. This added a significant amount of extra work to my responsibilities.

Based on the list of configurable values and their priority, I designed the initial simple MVP version. I chose a clear two-column layout: dropdown menus on the left for selections, and configuration results displayed on the right.

The project required adding a product configurator to the new website, and my role was to conduct research and propose the layout. One of the biggest challenges was analyzing all the data and deciding what should be included in the configurator. I managed to balance the needs of users, sales representatives, and stakeholders, which allowed me to deliver an MVP.

As a low-code developer on the project, I was also responsible for building part of the technical backend. Since the configurator was developed after the website launch, I had to redesign several data structures to accommodate decisions about the displayed information and the logistics of the configurator itself. This added a significant amount of extra work to my responsibilities.

Based on the list of configurable values and their priority, I designed the initial simple MVP version. I chose a clear two-column layout: dropdown menus on the left for selections, and configuration results displayed on the right.

Simple layout – low barrier to entry
Product visualization – a single general product image
Too many steps – too many confusing choices to make
Hidden options – many options depend on previous selections and aren’t visible upfront
Lack of standardization – complicated and overwhelming to use

Simple layout - low entry barrier,

Product visualization - one general picture for product,

Many steps - too many incomprehensible choices to make,

Invisible options - many options are depending on previous ones, so they are not shown,

No standardization - complex and overwhelming in use.

version 1.0.

version 1.0.

version 1.0.

The layout is simple and easy to use, with a clear product image that helps users quickly understand the offering. However, the process involves too many steps, hidden options dependent on previous selections, and lacks standardization, which leads to confusion. To improve this, the choices should be simplified, dependencies clearly revealed, and a consistent design applied across the entire site.

Another issue was that users had to make selections twice: first during product search and filtering, and then again on the configurator page. To solve this, I merged these two user flows into one smooth process. It starts on the homepage and ends with submitting an inquiry and placing an order. I propose adding individual configurators to each product page, allowing users to make product-specific selections directly on that page.

Only 6 steps – type, optics, construction, connection, mounting, and optional versions
Improved information architecture – size, power, and luminous flux shown in a single step
Visualization of each selection – better understanding and user experience
Simple language – no specialist knowledge required to submit an inquiry

Only 6 steps - type, optics, construction, connection, mounting and optional versions,

Better information architecture - size, power and luminous flux shown in one step,

Each choice visualization - better understanding and experience,

Simple language - no need for specialistic knowledge to send an inquiry,

version 2.0.

version 2.0.

version 2.0.

usability testing

usability testing

usability testing

Testing time!

My goal was to evaluate the entire system—the website and the configurator—as a cohesive whole. Once the configurator MVP was ready for testing, I added two different products and conducted extensive usability tests with 10 real users, aged 18 to 56, with varying skill levels.

The user completing a survey as the final step of the usability test.

User filling the survey as the last step in usability testing.

The process began with a brief interview aimed at understanding users’ familiarity with lighting concepts, ATM Lighting products, and their motivations for visiting the website. Next, task-based usability tests were conducted, where users completed two tasks designed to evaluate the usability of the website and product configurator, focusing on navigation, information search, and product configuration. Observations and difficulties encountered were discussed in detail during an in-depth interview (IDI), intended to identify additional issues and gather overall impressions of the system. Finally, a survey was administered using the System Usability Scale (SUS) to measure usability and the Net Promoter Score (NPS) to assess user satisfaction.

The process began with a brief interview aimed at understanding users’ familiarity with lighting concepts, ATM Lighting products, and their motivations for visiting the website. Next, task-based usability tests were conducted, where users completed two tasks designed to evaluate the usability of the website and product configurator, focusing on navigation, information search, and product configuration. Observations and difficulties encountered were discussed in detail during an in-depth interview (IDI), intended to identify additional issues and gather overall impressions of the system. Finally, a survey was administered using the System Usability Scale (SUS) to measure usability and the Net Promoter Score (NPS) to assess user satisfaction.

Notes from usability testing.

Notes from usability testing.

Cluster analysis (Eisenhower Matrix).

Cluster analysis and tasks prioritization (Eisenhower Matrix).

redesign

redesign

redesign

Confusing step order – CRITICAL

Some users had difficulty understanding the order of configuration steps, which led to skipping steps or completing them in the wrong sequence.

To avoid forcing users to make decisions on aspects they might not fully understand, I allowed them to submit inquiries without filling out all fields. However, many users simply clicked on the steps that caught their attention, often ignoring the intended process order. As a result, they unknowingly skipped steps before submitting their inquiry.

To address this issue, the following recommendations are proposed:

  • Number the steps clearly,

  • Visually indicate completed steps,

  • Block skipping steps until the entire process is completed,

  • Add a summary stage that allows users to review and edit their selections.

Some users had difficulty understanding the order of configuration steps, which led to skipping steps or completing them in the wrong sequence.

To avoid forcing users to make decisions on aspects they might not fully understand, I allowed them to submit inquiries without filling out all fields. However, many users simply clicked on the steps that caught their attention, often ignoring the intended process order. As a result, they unknowingly skipped steps before submitting their inquiry.

To address this issue, the following recommendations are proposed:

  • Number the steps clearly,

  • Visually indicate completed steps,

  • Block skipping steps until the entire process is completed,

  • Add a summary stage that allows users to review and edit their selections.

❌ Users unknowingly skip steps,

❌ Hover state for step bars is the same as the background color,

❌ Only some steps have default values.

❌ Users unknowingly skip steps,

❌ Hover state for step bars is the same as the background color,

❌ Only some steps have default values.

❌ Users unknowingly skip steps,

❌ Hover state for step bars is the same as the background color,

❌ Only some steps have default values.

version 2.0.

version 2.0.

version 2.0.

✅ Skipping steps is disabled - editing allowed only after the summary stage,
✅ Each step has a default value set at the start,
✅ Additional notes provided below the configurator.

✅ Skipping steps is disabled - editing allowed only after the summary stage,
✅ Each step has a default value set at the start,
✅ Additional notes provided below the configurator.

version 3.0.

version 3.0.

version 3.0.

redesign

redesign

redesign

No system response - CRITICAL

Users felt confused due to delayed system feedback on their selections during the configuration process. Both product images and step descriptions don’t update in real time but refresh only after moving to the next step, disrupting the overall user experience and causing uncertainty.

Information on the step progress bar should update immediately after a selection is made, rather than waiting for the user to proceed to the next step.

Users felt confused due to delayed system feedback on their selections during the configuration process. Both product images and step descriptions don’t update in real time but refresh only after moving to the next step, disrupting the overall user experience and causing uncertainty.

Information on the step progress bar should update immediately after a selection is made, rather than waiting for the user to proceed to the next step.

❌ The value on the active step bar is visible only after moving forward.

❌ The value on the active step bar is visible only after moving forward.

version 2.0.

version 2.0.

version 2.0.

✅ The value on the step bar updates immediately upon selection.

✅ The value on the step bar updates immediately upon selection.

version 3.0.

version 3.0.

version 3.0.

redesign

redesign

redesign

Configurator location - SERIOUS

Users expressed confusion and disorientation when the configurator opened in a new browser tab.

During testing of configurator version 2.0, which launched in a new tab, some users felt lost trying to check product specifications and had difficulty finding the correct tab with the lighting fixture. Lighting Designers mentioned that opening multiple tabs during their research created chaos and confusion, and they preferred having catalog sheets directly accessible on the product page.

I decided to embed the configurator within a dedicated “Configurator” tab on the product page, providing easy access to specifications and catalog sheets. The configurator should open upon clicking the “Configure Fixture” button. Additionally, the configurator should retain its settings when users switch between tabs on the product page.

Users expressed confusion and disorientation when the configurator opened in a new browser tab.

During testing of configurator version 2.0, which launched in a new tab, some users felt lost trying to check product specifications and had difficulty finding the correct tab with the lighting fixture. Lighting Designers mentioned that opening multiple tabs during their research created chaos and confusion, and they preferred having catalog sheets directly accessible on the product page.

I decided to embed the configurator within a dedicated “Configurator” tab on the product page, providing easy access to specifications and catalog sheets. The configurator should open upon clicking the “Configure Fixture” button. Additionally, the configurator should retain its settings when users switch between tabs on the product page.

version 3.0.

version 3.0.

version 3.0.

result

result

result

What has been achieved?

Co osiągnęliśmy?

After six months of intensive but rewarding work, we have achieved the following results:

A new, modern website that aligns

with the company's image.

A new, modern website that aligns

with the company's image.

Many tools that increase

the efficiency of lighting engineers.

Many tools that increase

the efficiency of lighting engineers.

A product configurator

that increased product sales.

A product configurator

that increased product sales.

© Cezary Sobko 2025, All rights reserved

© Cezary Sobko 2025, All rights reserved

© Cezary Sobko 2025, All rights reserved