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
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.
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
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
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.
Testing the high-fidelity prototypes led to new insights and implementation of different features.
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.
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.
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.
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.
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.
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.
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.
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: