Objective

An adaptable browser-based platform helps users understand nutrition details from IKEA food products and make purchase decisions accordingly.

Process

Exploring and Observing

We first started with understanding the current site structure and flow. We then investigated and analyzed the relationship and the information hierarchy between each page. We also did quick stakeholder interviews and went to the IKEA stores to observe the people's behaviours in the Food Market area.

Our Key Insights:

• Dietary preferences are crucial for consumers with specific allergic reactions or when they are purchasing food for their kids or family
• The food source labels are important for the environmentally conscious consumers
• Consumers also want to know nutritions details from the IKEA restaurant meals

Original Site Structure
The original site IA was rather clear and organized. Users could follow through with the main categories and the secondary filters to get to the products page to view the nutrition details. However, that took users three clicks/ pages to get into the key information – the nutrition tables and details, that they cared about the most.

Simplifying Navigation
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.

Role: UX/UI
–
Creative Director: Fernando Hernandez
Designers: Iris Wu, Trevor Bell 
Copywriter: Darya Klymenko
Agency: Leo Burnett Toronto
Client: IKEA Canada
Year: 2015