Gorenje Kitchen

Gorenje Kitchen is a European kitchen equipment brand. The client decided to expand their business by creating an online service, which helps to build a kitchen project with full 3D visualization and the possibility to order the entire kitchen set online

< BACK

Online kitchen constructor

To design an interactive kitchen configurator, incorporating the Gorenje brand's range of equipment throughout the system.

MAIN TASK

Research, Information Architecture, Feature prototyping, UX, Visual design & testing

Role: Lead Product Designer | iBrush LTD

Team of 2 developers

January 2018 - February 2018

The ambitious task of designing an interactive kitchen configurator included the need to incorporate functionality to allow clients to both build a kitchen design and to purchase additional kitchen equipment via the system.

Short and visually appealing version can be found on Behance. Here we will go into the details.

DESIGN PROCESS AND CHALLENGES
Prototyping the kitchen constructor

We tested the ideas on an interactive prototype in Axure. Once the mechanics and logic were set, we moved on to the design phase.

Design system and UI

The whole site is customized for tablet and smartphone. In total, we prepared 47 mobile screens and adapted a personal account, making it convenient for use on small screens.

Landing, Registration and Authorization

The first thing the user sees is the landing page. This describes the kitchen configurator and outlines its benefits.

On-boarding and introduction to the kitchen constructor

The user can dive into the kitchen configurator straightaway, with no need for registration and any progress they make is saved as they go. The first thing they see is a short on-boarding introduction, helping them to understand what to do and how to begin. All the other processes are self-explanatory and really easy to use.

KITCHEN CONSTRUCTOR FLOW
Step 1: Kitchen room setup

The user lands directly into a plain room view - constructed in 3D. The goal is to set up the things they would like to have in their own kitchen – walls, color, room and ceiling sizes. This step is technically important because it can configure the kitchen by sorting particular combinations of kitchen models and equipment for suitability. Most importantly, this step gives the user an opportunity to enter into the whole kitchen selection process.

KITCHEN CONSTRUCTOR FLOW
Step 2: Selecting kitchen model

Here they are presented with a set of suitable kitchen collections. All they need to do is to pick a favourite style and the exact kitchen model.

KITCHEN CONSTRUCTOR FLOW
Step 3: Customizing the colors

In this step the user will already see their selected 3D kitchen model showing how their future kitchen will look. It is now time to customize by picking the colors and textures. All the available color options can be found on the card below. Any changes selected are shown immediately on the screen.

To help avoiding mistakes we have included a lot of hints and guides as part of the process. By showing warning and confirmation pop-ups we have managed to decrease the percentage of mistakes and user frustration.

We've thought through dozens of amazing details, improving the user-flow

KITCHEN CONSTRUCTOR FLOW
Step 4: Selecting kitchen appliances

Here the user has the ability to add from an extensive range of appliances manufactured by our partner – Gorenje kitchen. The brilliance of this system was that the user was practically unaware that they were specifically guided to choose appliances from this manufacturer. We managed to create the process in a subtle way, allowing the user to skip the process if necessary, but clearly guiding them towards the manufacturer's product range. This has proven to be a highly successful sales methodology for our client.

The user can skip this step if they think that just the kitchen design is enough with no compulsion to proceed.

For cases where the user has decided to add extra appliances, we've designed 3 types of cards

Active by default

By default, only items that are already included in the set are displayed as active. They can be replaced by any other item from the catalogue.

Non active by default

Users can select or remove extra items they want to add to their kitchen project. The next step in this case will be picking the exact model of an item from the catalogue.

Changed

When you pick a new item from the catalogue they will see the change on the card.

Checkout

This is the final step in order to complete their project with an offer to login or register.

Dashboard and order monitoring

The Dashboard consists of 4 tabs: My projects, My orders, Payment and Profile. Projects, orders and payments are logically connected and show the user the dynamics of their order.

Before the project becomes an actual order it needs to be confirmed by a manager who will make sure that all furniture sizes are correct.

A newly created item from the kitchen constructor goes directly to My Projects tab and there are 3 types of cards with status indicators

Need to be confirmed

When project is confirmed it goes to My order tab and has a new status showing that it is time to proceed to payment.

Confirmed

If the project has some mistakes in the measurements, the user will get a notification and will be offered to contact a consultant.

Declined

In that case we show a CTA button, redirecting the user to the Payment tab.

The My Orders tab shows the progress of an order, indicating 3 steps: Pending, Producing, Delivering

Pending status means that the order needs to be paid

This includes all information about planning the completion and the delivery timescales.

Producing and delivery statuses show order details

The main purpose of this card type is to give the full activity history and ability to download the order details and legal contract regarding the services provided.

Archived order

Mobile adaptation

Dashboard consists of 4 tabs: My projects, My orders, Payment and Profile. Projects, orders and payments are logically connected and show user the dynamics of their order.