Improving the user experience on mobile devices for IKEA co-workers with responsive design

Abstract

Abstract

Responsive web design is the technique lot of companies apply to their website today. The reason is, that with this technique the website’s content adapts nicely on all devices from mobile phones to desktops. IKEA recently followed this trend on some of their platforms and among these is their internal communication platform called IKEA Inside Outside.

IKEA is not entirely satisfied in how the mobile version of IKEA Inside Outside reflects the desktop layout and want to improve this from a usability and user experience perspective. The thesis aim was to examine if a better solution in the design could be done on the mobile graphical user interface. IKEA also feels that an important aspect to consider is the end users, the co-workers’, opinions.

An investigation was made on existing responsive web design sites in order to have a foundation of how responsive sites behaves. The thesis then worked in an iterative design process where prototypes were created, tested and evaluated. The design decisions were built on design principles and theory as well as the results from the usability tests. A survey was field out to gather information from the co-workers that later were considered in the final solution.

The thesis main result were a new login and navigation solution that worked on both mobile, tablet and desktop view. The solutions are described in this report and visualized in an interactive prototype.

The thesis conclusion was that it is possible to improve the usability and user experience on mobile devices with both the mobile first approach and with the responsive design technique. With survey responses that matched IKEAs HR departments hypotheses, the implication was that the final prototype achieved both the co-workers’ and the corporates needs.

Popular Abstract

Improving the mobile user experience for over 150 000 employees

The rapid growth of mobile browsing forces companies to make their websites user-friendly on mobiles. People also assume that a website can be reached from any device, and that it will be well designed to help the them achieve their goals. This thesis work has investigated the need and proposes a design of a mobile-friendly solution.

A global furniture company stands in front of this adaption. They wanted to know if any changes in their design could improve the user experience for their users. How should the navigation be designed in order to always help the users understand where in the structure they are? This thesis has investigated and shaped a mobile solution that not only works on this company’s website, but is optimized to work on all websites that uses one or two navigation solutions.





The thesis designed different solutions always with the user in mind. The aim was to make content on the website easy to access and that users always should find what they were looking for. Regular websites usually only provide one menu but this website needed two. And this has been the main challenge throughout the work. How to make a user understand the differences between two menus? To strengthen the design decisions made to shape the final solution four evaluations were performed. Persons without connection to the company performed tasks that were measured and analyzed. The final solution is the outcome from these four evaluations. An interesting issue were the users’ low patience of not being able to complete their tasks quickly. This proved mobile-friendly websites are very important, to not frustrate the users, but instead helping them achieve their goals.

The development in the graphical interface is shown in the figures. The left figure shows the existing design and the right figure show the result from the thesis. One purpose was to efficient the use of the header, which was done significantly. Unnecessary functions were eliminated and placed in a more efficient place. The participants from the final usability test found their way around quickly and enjoyed visiting the site. To indicate the differences in the navigation both menus where double-coded, placed at the most common locations in the interface using contrast to distinguish them from each other. The outcome was that the entire menu needs to be available at each page in the structure to always provide the user with quick navigation options.


Author: Charlotte Leifland
Supervisor: Johanna Persson
Master Thesis within Interaction Design, 2016
Faculty of Engineering, Lund University


Popular science article, Faculty of Engineering, Lund University

• author: Leifland, Charlotte
• supervisor: Johanna Persson
• organization: Ergonomics and Aerosol Technology
• course: MAMM01 20161
• year: 2016
• type: H2 - Master's Degree (Two Years)
• subject: Technology and Engineering
• keywords: usability, user experience, iterative design, viewport, co-worker
• language: English
• id: 8883924
• date added to LUP: 2016-06-22 08:59:11
• date last changed: 2016-06-22 08:59:11