Ikea_layout-cocneptIkea_layout-cocnept

The Problem

After moving into a new flat in Cologne, I found myself visiting Ikea (too) many times. One thing that always stood out in my store experience was the Info-Screen where customers could search for products and their location inside of the store. These screens feature a user interface design from years ago and are being used in an unpractical combination of mouse/keyboard/touch functions, leading to an overall really annoying user experience. Ikea also offers a mobile app covering the functions of these screens, but nevertheless, I experienced that these screens inside the store were always crowded and people of all ages were using them. While observing those people, it quickly became clear that they were not satisfied using this product.

The current Ikea-Screen

Ikea_layoutIkea_layout

My Challenge

I don´t believe my solution is ready to be implemented as I didn´t work for Ikea or got any further insights in their users and Ikea's needs. I wanted to create a complete UX/UI product-design to challenge myself and prove my skills as a UX and product designer. 
 

The Process

In the first step, I analyzed the current Interface and people using Ikea screens. As mentioned earlier I identified that all kinds of people of different ages were using the screens. The user-group is widely spread.

Conceptualisation and Wireframing

Ikea_layout_3Ikea_layout_3

I analyzed the user's needs through interviews and observing their behavior. After that, I went into a phase of ideation, in which I collected all kinds of Ideas for features that could be implemented into the new product. I narrowed these Ideas down to the most usable/realistic ones and started creating user-flows and user-scenarios based on my research. These Ideas and user-flows were quickly translated into low fidelity wireframes on paper. (please don´t blame me for those fancy sketches, I´m working on it ;-))

Example of user-flow

flowflow

Testing and evaluating those first prototypes lead to a deeper understanding of features which support the usability. After this first phase, I started creating high fidelity UI-Designs in Sketch and created interactive prototypes in InVison to deliver a realistic experience and test them with users. 

Realistic user-testing

Ikea_layout_testingIkea_layout_testing

The Solution

Testing the high-fidelity prototypes led to new insights and implementation of different features.

 

Onboarding

As I am designing for a touchscreen which measures 2500x2100 pixels, I choose a simple onboarding experience with large sizes which directly communicate their hierarchy and offers a practical interface for the diverse user-group.

OnboardingOnboarding

Product Search

The Search function is an important feature of the product, as many users require a direct search function to quickly find their products. Some users directly navigate to the product search page and others might be frustrated or feel the need to directly search a product on their way through the interface. This is why I made the search function always accessible on every screen.

Product SearchProduct Search

Product Page

The product page features a sticky sidebar-navigation which is always visible, to offer a clear navigation through product sections. The user has the ability to close the navigation to have more products displayed on the page. An important feature is the ability to directly add products to the notelist without opening the details of a product. 

Product Page Closed CopyProduct Page Closed Copy

Direct Access

A product can either be directly added to the notelist, or send to the Ikea-App, WhatsApp and Facebook-Messenger, to offer the user a variety of options.  

CombinationCombination

Product Details

The product-details-page features high-resolution images and access to all the detailed information about the product. On this page, it is also possible to directly send a screenshot to a service or adding it to the notelist. 

Shopping Copy 14Shopping Copy 14

Notelist

On the notelist page, the user can find all of his selected products and their most important specifications. The products can be sent to different services and can be deleted.

Product Page Selected Closed Copy 10Product Page Selected Closed Copy 10

Offers and discounts

The offers page doesn´t feature a sidebar because it isn´t necessary for the usability and to leave more space for presenting large images and videos. The offers-page is accessible from the onboarding screen because some users directly want to access the discount page. This page isn´t included in the sidebar-menu but will pop up after users completed their task to target them at the right moment and mood without being too offensive.

Angebote Copy 2Angebote Copy 2

Final Product

After finishing the final high-fidelity designs it was time for the last discipline:
implementing motion to create a realistic product. Principle was my tool of choice for this process.
I created a storyboard to plan all interactions from screen to screen. Every animation should serve a purpose and improve the user experience and solve communication problems. Microinteractions like subtly animated arrows can solve user problems as they let users understand certain functions. 

 

I would feel blessed if this offers some impulses for a new concept.

 

Thanks for your time! Now take a look at the product in action: