commercial project

Boosting lighting manufacturer's sales
by creating useful tool for lighting engineers.

Role:

UX Designer

UI Designer

Low-code Developer

Scope:

Market Research

UX Design

Prototyping

UX Audit

UI Design

Usability Testing

Team:

Me (designer + low-code developer)

Blue-Mint Agency (developer)

Duration:

6 months

Problem:

The outdated website was misaligned with the company’s growth and failed to reflect its ambitions of expanding global recognition. With the ordering system relying solely on phone and email, it created significant friction and hindered the sales funnel.

Solution:

The modern website should function as both an intuitive platform for product inquiries and a trusted industry resource. By offering a rich library of technical knowledge for lighting engineers, it should foster engagement and highlights the company’s expertise.

Result:

The new website with rich features set like product configurator, inquiries form and designer's zone has been launched.

the context

Explosion-proof lighting is the key

The company was founded in 2011 and started from level zero. First couple of years, it devotes its resources, working on low margins, to build its own know-how and market position. They produce different types of industrial lighting, but there is one special products family - explosion-proof lighting. These light fixtures are dedicated to refineries, offshore platforms, distilleries - everywhere where the explosion hazardous atmosphere may occur. Thanks to efficient R&D Department, the company obtains the required ATEX certification for such applications. Orders are starting to arrive from all over the world, with most of them coming from Europe and the Middle East.

the context

New headquarters, old image

After covid, the company is experiencing a boom in orders. Suspended projects are being unblocked and the company is producing more and more lighting, sending it to all continents. In 2022 the new headquarters with brand new production plant is being opened. At this stage, the outdated website is not matching company anymore.

the context

And then the crisis comes

Due to the deprivation of cheap gas in Germany, a crisis occurs, causing a significant drop in orders from one of the largest recipients in the European Union. The company tries to secure orders from other parts of the world, but there are difficulties with this. After identification, it turns out that:

▪️the products are not as cheap as Chinese substitutes,

▪️the brand is not well known in the world,

▪️old website does not inspire customer confidence.

ux audit

First dive for some data

old website

Results of the ux audit:

▪️no CTA on the product sites which is a great marker for the sales funnel performance on the late stage,

▪️contact available only on 'contact' page, which forces the product page being closed,

▪️relatively high amount of users (75k in 2023) mainly from organic search,

▪️only 5,3% of recurring visitors indicating poor website retention,

▪️the site does not support conversion sufficiently,

▪️bad average session duration - only 38 sec.

▪️the website has an old-fashion layout.

pivot spot

Attention, an iceberg ahead!

For the next step - user research, I prepared a research plan, make a screener and I was already done with first in-depth interviews. So far, I have been relying on the customer list provided by the sales department. I analyzed what companies these were and tried to create a proto-persona. Those were people who bought our products in the last two years. I focused on the explosion-proof related orders, as it's company's advantage in the market. And then BAM!💥 I realized that I was very wrong!

In many electrical projects for industrial buildings, there are specific conditions required for the lighting. Sometimes, there are specific light fixtures included into the projects, and people that I already work with, they don't really have any choice on what they order. That's why I had to make a pivot and focus on Lighting Designers - those people have real impact on choosing light fittings. I conducted additional 6 interviews with Lighting Designers.

The most important insights from IDIs:

They focus on product specification

Ligting Designers work on light fixtures characteristics. The accessibility to the products specification is the key for them. The name work as a reference code only in case of any contact with the manufacturer.

They're overworked and busy

Specialists value their time. When they visit a website and can't find suitable product once, they don't even try again. We need to save their precious time to build our website retention.

They work smart, they use BIM

Building Information Modeling is a 3D building model completed with different kind of information. What's more, it allows to communicate between participants of the designing and constructing process.

proto-persona

Lighting Designers at a glance

Jack Lumen

Lighting Designer

37 y.o.

demographics

▪️works in BIM and uses modern tools (e.g. DIALux)

▪️does many different projects at once

▪️looks for verified and reliable solutions

▪️focuses on specifications and data

▪️checks certificates and admissions

behaviors & actions

goals & needs

▪️ finish project really fast

▪️ don't do too many reps

▪️ select lighting with the required parameters

▪️ need to trust the products good quality

▪️ opens each product to compare them

▪️ unclear names, markings and symbols

▪️ has no idea who to contact

▪️ no references and projects section

frustrations & pains

user-centric design

Let them find what they need

In this case, users visit the website with a clear and specific need. They are searching for a product that meets the exact technical specifications of their project and comes with the necessary certifications.

It is essential that users can easily find the right product in just a few steps.

❌ Product families are on separate pages.
❌ No product filtering options.
❌ Products can only be searched by opening pages individually.
❌ Product series tabs are not visible.

old website

new website

✅ General and sub-product listing pages accessible from the main menu.
✅ Multiple filters available for easy product selection.
✅ All tabs converted into filters for streamlined navigation.
✅ Clean grid layout with concise descriptions.

user-centric design

Give them chance to stay

During usability testing, many users expressed frustration with the difficulty of finding the right contact person to call. They preferred to continue searching online for alternatives with clear pricing or at least an easy-to-use contact form. I identified this issue as critical, as it hampers the site's conversion rate and leads to a significant loss of potential customers. Additionally, the absence of a clear CTA button makes it impossible to track user interest in the product, depriving businesses of valuable sales and product insights.

To address this, I recommend designing a user flow that aligns with each stage of the sales funnel, ensuring that users are supported and guided throughout their journey.

❌ No call to action button on product site,

❌ Difficult product available configuration scheme,

❌ Unknown manufacturer markings without explanation,

old website

✅ Inquiry button that generates leads,

✅ Products configurator that not requires specialist knowledge,

✅ Gallery of products in different configurations,

new website

user-centric design

Make it a tool for engineers to use daily

Each project comes with unique specifications and lighting requirements, tailored to meet various norms and restrictions depending on its application. Light fittings designed for explosion-hazardous zones differ significantly in their construction, wiring, connections, and mountings. Additionally, the type of material stored in silos determines the required ingress protection level and the degree of chemical resistance needed for the light fittings. This complexity results in an overwhelming array of data tables, standards, markings, and certifications.

To streamline the workflow for lighting engineers, I developed a dedicated designer's zone. This practical tool is intended to become a part of their daily routine, enhancing productivity and efficiency. It reinforces the company’s reputation as a professional and reliable partner. provides essential information to users, and demonstrates the company’s commitment to their needs.

✅ 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,

✅ 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 features

user-centric design

Products configurator that leads you

The project required adding a product configurator to the new website, and my role was to research and propose its layout. One of the most challenging aspects was analyzing all the data and deciding what should be included in the configurator. Balancing the perspectives and needs of users, sales representatives, and stakeholders, I successfully delivered an MVP.

As a low-code developer on the project, I was also tasked with building parts of the backend environment. Since the configurator was developed after the website had already been launched, I needed to redesign several data structures to accommodate the decisions about the data displayed and the logistics of the configurator. This added a significant amount of additional work to my responsibilities.

Based on the list of values to configure and their order, I designed an initial simple version of the MVP. I opted for a straightforward two-column layout: the left side features dropdown lists for making selections, while the right side displays the configuration results.

✅ 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.

✅ 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

The layout is simple and easy to use, with a clear product image for quick understanding. However, the process has too many steps, hidden options that depend on previous choices, and lacks standardization, making it confusing. To improve, simplify choices, reveal dependencies clearly, and ensure consistent design throughout.

Another issue was that users had to make their selections twice: first during product search and filtering, and then again on the configurator page. To address this, I combined these two user flows into one seamless process. This starts from the main page and ends with sending an inquiry and placing an order. I proposed adding individual configurators to each product page, allowing users to make choices specific to that product directly.

✅ 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,

✅ 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

usability testing

It's time for big testing

I aimed to evaluate the entire system (website and configurator) as a cohesive unit. Once the MVP of the configurator was ready for testing, I incorporated two different products and conducted extensive usability testing with 10 real users, spanning a range of ages (18 to 56 years) and skill levels.

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

The process began with a brief interview to understand users’ familiarity with lighting concepts, ATM Lighting products, and their motivation for visiting the website. This was followed by task-based usability tests, where users completed two tasks to evaluate the usability of the website and product configurator, focusing on navigation, information retrieval, and product configuration. Observations and challenges encountered were explored further during an in-depth interview (IDI), which aimed to identify additional issues and gather overall impressions of the system. Finally, a survey was conducted using the System Usability Scale (SUS) to measure usability and the Net Promoter Score (NPS) to gauge user satisfaction.

Notes from usability testing.

Cluster analysis and tasks prioritization (Eisenhower Matrix).

redesign

Confusing step sequence - CRITICAL

Some users struggled to understand the configuration sequence, leading them to skip steps or complete them in the wrong order.

To avoid forcing users to make choices about things they might not understand, I allowed them to send a query without completing all the fields. However, many users simply clicked on the steps that caught their interest, often overlooking the order of the process. As a result, they unintentionally skipped steps before submitting their inquiry.

To address this, it is recommended to number the steps, visually mark the steps taken, disable skipping steps until the full sequence is completed, and introduce a summary stage for editing.

Some users struggled to understand the configuration sequence, leading them to skip steps or complete them in the wrong order.

To address this, it is recommended to number the steps, visually mark the steps taken, disable skipping steps until the full sequence is completed, and introduce a summary stage for editing.

❌ Users skip the steps unnoticingly,

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

❌ Only some steps have standard value,

❌ Users skip the steps unnoticingly,

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

❌ Only some steps have standard value,

version 2.0

✅ Skipping step is disabled. Editing available after summary,

✅ Every step has set a standard value at the beginning,

✅ Additional notes under the configurator,

version 3.0

redesign

No system feedback - CRITICAL

Users felt disoriented due to the system's delayed feedback on their selections during the configuration process. Both product images and step descriptions fail to update in real time, instead refreshing only after progressing to the next step, which disrupts the overall user experience and creates uncertainty.

Information in the step bar should refresh immediately upon selecting an option, rather than waiting until the user moves to the next step.

❌ Value on active bar (orange) shows up after progressing to next step.

version 2.0

✅ Value changes immediately after making a choice.

version 3.0

redesign

Configurator location - serious

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

Users tested version 2.0 of the configurator, which opened in a new browser tab. Some felt lost when trying to check product specifications and struggled to find the correct light fitting tab. Lighting engineers mentioned that opening multiple tabs during their research caused chaos and confusion, and they preferred having data sheets readily available.

I decided to embed the configurator within the 'Configurator' tab on the product page, ensuring all information and data sheets are easily accessible. It should open when users click the 'Configure the Luminaire' button. The configurator should also retain its state when users switch between tabs.