4ROOM
Website concept

 

4ROOM is the largest luminaire manufacturer in Estonia. The ambition of 4ROOM is contemporary yet timeless products enhancing the interiors and providing great light.

This ambition should be realised in all aspects of production, but also in communication and sales. In 4ROOM physical stores, the sales representatives approach each client individually and guide them in navigating the various options of the product portfolio to find the most fitting luminaire for the client’s project. This experience is not currently implemented on the website, so I took the opportunity to figure out how it could.

Project length
One month

 
 

Three categories of clients

4ROOM clients can be roughly categorised into three:

  • end-users

  • re-sellers

  • interior architects/designers

End users tend to prefer to buy luminaires in physical stores. As they don't buy luminaires frequently, when the occasion arises, they would rather see the physical products before deciding. At 4ROOM Interior physical store, this experience is guided well by the sales staff. Through a few inquiries about the space, the sales staff gets an adequate understanding of the client’s needs and is then able to assist in finding the best fitting luminaire fitting the requirements of the client.

4ROOM’s re-sellers seek sets of products in combination that, although in a limited range, best describe the brand and demonstrate the materials and quality of the product range to their clients in their physical showrooms. Re-sellers communicate their requests directly to manufacturing.

The client base of interior architects and designers is of great value. Seeking to be a worthy assistant in their projects, 4ROOM’s product range is able to cater to various projects of different size. In addition, 4ROOM takes on projects to manufacture unique luminaires on architects’ request.

Interior designers are acquainted with 4ROOM’s product range, yet, more often than not, lack a deeper understanding of the specifics of lighting. Although professionals, lighting terminology and all aspects that need to be considered in order to choose the ideal lighting can make the head spin.

 
 
old_web.jpg

Current process on the web is overwhelming

The filters of the old website don’t take into consideration the preferred process of the customers for choosing luminaires. The amount of options in the filters is overwhelming and difficult to understand (for example in choosing the diameter, customers are left guessing the meaning of ≈600 vs 600). The lighting terminology doesn’t carry meaning for the customer. Choosing the colour from small swatches in a list is inconvenient, additionally, the number codes and indistinct descriptions only add noise.

In the product pages there are 1832 products displayed on 51 pages.

 
 

Focusing on interior architects

Although 4ROOM values interior architects and designers as essential partners, it has not been able to fully facilitate the way this customer group would like to interface with the products.

Choosing luminaires for their clients is only one small aspect of their work day. Although they would appreciate the assistance and knowledge of lighting of the sales staff, they value their time and would like to order the products online.

Some of them have even gone as far as developing the understanding of the product code system of 4ROOM to be able to order products by e-mail, but this archaic way of ordering products is not the experience 4ROOM wishes to offer its clients.

 
 
 

Giving them what they need

Having defined the need of the interior architects for a way to browse and purchase products online, I focused on finding a way to translate the store experience to the website. As in the store, the sales staff guide the client through the choosing process by asking questions about the requirements of the project, the website should equally reflect the same.

4ROOM offers many choices in terms of how clients can customise their lamps and this made creating the new website quite complex. At times the amount of options at hand seems overwhelming and when creating a website the first instinct is to simplify and reduce options for a smoother experience. But all these options are what 4ROOM is known for and are a big selling point for the interior architects and designers. This means the way forward was not to simplify, but to make the complex choices understandable and relatable.

All of these considerations led to the creation of a wireframe that describes a step-by-step guide for choosing a lamp, that in many ways mirrors the in-store experience.

 
 

Guiding the process

When choosing a lamp, everything starts from the type of lamp you need. The guide gives the user simple choices with clear visual indication about how it’s going to look. The process is also illustrated on the left by an element that shows which step the client is currently in and many steps are left.

After choosing the type, it’s important to map the space that is going to be lit. The guide asks the user how large their room is and how high are the ceilings to filter the lighting requirements of the offered products.
The goal of the guide is not to be excessively in-depth or long, as this would discourage website users by requiring too large of a time investment from them.

 
 

The lighting needed

The guide then gives the user a simple choice between the type of light the lamp should emit. This is an important distinction as it is a strong filter for the luminaires 4ROOM offers.

The next part of the flow lets the user visually define how bright the light should be and its colour temperature. Lighting can be used to create very different atmospheres in the room and have a strong effect on the emotions. The use of an image here is essential, as most people have a hard time relating to the technicalities of different types of light. By using a dynamic image that changes as the sliders are moved, the client is better informed in decision making.

Users have to choose whether the lamp they are buying is the main source of light in the room or not. This is an important distinction for the product selection they are offered as the use of other sources of light in the room affect the illuminance of the space.

 
 

Getting specific

After this, the user is presented with suitable product families. These are presented with an image and information about the sizes they come in as most of 4ROOM’s products come in various sizes and offer the client a lot of flexibility. Many have 8 options in size. The way we handled this complexity was to nest the different sizes into the product families. Once the user chooses a product family, they are presented with a short description of the product along with the sizes available. This solution means that users don’t have to navigate between pages when choosing a size, but it becomes all a part of the seamless flow.

Once the client has chosen a size, they end up on a preconfigured product page. Here they can review all the product details and the price of the lamp and choose the material and colour for it. The solution for the colour selection is based on the 4ROOM catalogue. Instead of showing colour swatches, the materials and colours are photographed on actual products, giving users a more accurate understanding of how the material and colour actually looks on the luminaires. Clicking on a colour applies it to the product photo at the top of the page.

One final important element on this page is at the bottom, where the user is suggested other types of compatible products. Users often look for combinations of luminaires for spaces, showing preselected compatible products would save their time and encourage additional sales.

 
 
 

What I learned

While the concept was never put to use for budgetary reasons, the analysis I did gave me insight into how a website could function. I understood, that, like with all projects, defining the purpose of the site is necessary in order to determine the functions of it.