Customers have the need and desire to learn about what they’re eating, and IKEA wants to take initiative to improve this communication through this new website to support healthy eating, promote sustainable food products, and communicate ingredients and nutritional information. This site is also utilized for the Food Kiosks in most stores, allowing consumers to get information while shopping.
Simple Purpose and Solution
As part of the initial brief, clients wanted a traditional product browsing experience that includes a landing page, category pages, detail pages and so on. To simplify the user experience, we replaced all the multiple steps with simple and optimized filters.
The Horizontal Sorting Bar
We wanted the site purpose to be clear and easy for users to find the information quickly. Using a unified horizontal filtering and sorting bar has proved effective. Users won’t miss it and can spot the tool as they scroll the page and alter the product list instantly. It’s also flexible for responsive website environment and allowing more room for larger product thumbnails to flow on the grid layout.
By selecting filtering options from the dropdown menu, content will be refreshed accordingly. Users don’t need to take extra steps or visit another page for more information.
Clicking on the Nutrition Details CTA will expand a panel beneath the respective food item where users can browse and toggle between each nutrition information sections.
Mobile-optimized view plays a crutial role in the website design. For a website that doesn’t have any sub-pages, the menu became its main method of showing and sorting content for the mobile view.
The clients were very happy with our solution and took it a step further by implementing this sorting method onto their other global sites and in-store kiosks.
Role: UX, Visual Design
Creative Director: Fernando Hernandez UX Designers: Iris Wu, Trevor Bell Copywriter: Darya Klymenko Agency: Leo Burnett Toronto
Client: IKEA Canada