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 Results

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/UI
–
Creative Director: Fernando Hernandez
Designers: Iris Wu, Trevor Bell 
Copywriter: Darya Klymenko
Agency: Leo Burnett Toronto
Client: IKEA Canada
Year: 2015