UI/UX Case Study — IKEA Application Redesign
This case study is a final project for UI/UX Course at Dibimbing.id Bootcamp. So, this case study is not affiliated with or endorsed by IKEA. The project was evaluated on 19 June 2021, and I will share the process from start to finish in working on this case study. Happy reading everyone :D
Overview
We all know IKEA is one of the largest furniture companies in the world. This Swedish company has a variety of products with simple designs and it’s very useful. However, why don’t they have a simple and useful app like their products? I don’t know why, but I believe in one thing that everything can get better!
App Version
Android version 2.0.6.
The Challange
The scope of this case study is the discoverability of items in the IKEA application so that it is easier for users to search for items based on what they want. Therefore, the redesign includes creating a new flow and design for users to search for items by keyword or by category, searching for items using a search filter, lastly adding the selected item to the shopping list and users can easily find the shopping list menu.
Design Process
The design process carried out in this research is using the Design Thinking methodology.
“Design Thinking is a design methodology that provides a solution-based approach to solving problems.”
https://www.interaction-design.org/literature/article/5-stages-in-the-design-thinking-process
Stage 1 — Empathize
Observation
I make observations by trying out the current IKEA app and see where I feel constrained when interacting with this app. After trying the app, I noted a few points that could potentially be problems when users use the IKEA app. By interacting with the application first, I can also create several scenarios for Usability Testing that will be carried out at a later stage.
Research Plan
Background
Based on user reviews on the Google Play Store, many users have complained about the user interface of the IKEA app. The problem that users complain about is that it is difficult to search for the items they want in the IKEA app. Therefore, UX Designer wants to evaluate the current user interface to find out the problems that make it difficult for users to search items, then find solutions to these problems by creating a new user interface that makes it easier for users when they want to search for items in the IKEA application.
Objectives
- Find out how user’s behavior while searching items on the IKEA app.
- Find out what pain points users face while searching for items on the IKEA app.
- Find out how users feel after searching for items on the IKEA app.
Methodology
Qualitative — In-Depth Interview
Sample Specification
Key Information Areas
- User profile.
- User behavior when finding items on the IKEA app.
Timeline
Discussion Guide
Introduction
Hello, my name is Rezza Ananda Yoanko.
Thank you for taking your time to help me do this research.
In this session I will ask about your experience when search for items in the IKEA application.
There is no right or wrong answer, you just need to explain to me how you think/feel.
This discussion is confidentiality, so feel free to answer based on what you think.
User Profile
Please introduce yourself such as name, age, occupation, etc.
Behavior
Can you explain to me what you usually do when you want to searching items on the IKEA app?
Can you explain to me what do you do when you want to see items in the IKEA app?
Can you explain to me what do you usually do when you find the items you like on the IKEA app?
User Perspective of IKEA Application
Have you ever purchased items on the IKEA app?
How was your experience in searching for an item on the IKEA app?
How do you feel when you want to search for items using the item search filter on the IKEA app?
What do you think of the Products menu on the IKEA app?
What do you think of the search results on the IKEA app?
When you want to search for items on the IKEA app, what steps do you go through?
When you want to save the items you like to your shopping list in the IKEA app, what steps do you go through?
Conduct Research
Usability Testing of the Current IKEA App
Usability testing of the current application is to find out how users interact with the application and to find out what pain points are felt by users. 6 users participated in this test. This test is carried out remotely (Moderated) and uses the zoom application as a tool to interact with users. In this test, I have prepared 6 tasks for users and asked them to do screen recording so I can analyze how they interact with the app and can record important points when the user runs each task. Some of these tasks are.
Testing Result
In this test, I recorded the user’s time and success after running a task on the IKEA application. The results of these tests noted that there was 1 task that failed and got 94 seconds. The task is to search for the shopping list menu, which the user cannot find the menu, and gives up looking for it. The results of usability testing of the current IKEA application can be seen in the table below.
An error occurred in task 6 where the user was unable to find the shopping list menu. This is because the shopping list menu on the IKEA application is currently on the Account page, and the user is not aware of the existence of the shopping list menu on the account page. When I asked the user why he couldn’t find the shopping list menu, he replied because I didn’t think there was a shopping list menu on the account page and I thought the account page was only for editing profiles. I also asked other users, and they replied that the shopping list menu should be a menu that is easy for users to find, and it will be very helpful if placed in a place where users can immediately see the menu consciously, for example, paired with love or favorite icon so that users immediately understand that it is a shopping list menu. From here, I immediately recorded some insights from users who became their problems when trying tasks in the current application design. And there are what the users said and felt in an in-depth interview session after the users had run the task of the current application design.
Stage 2 — Define
User Persona
The next step I did was to create a User Persona. I created user personas from 6 interviewed users after running usability testing. User personas are needed to describe potential users based on the research that has been done. The user persona that I’ve created describes user profile and biodata, user personality, user goals of using the application, user behavior using the application, frustration when using the application, and what the user needs from the application.
User Journey
From the user journey map, I can find out how users behave when search for items on the IKEA application and what steps they go through. I can also find opportunities based on user pain points that are useful for design improvements.
Identifying the Problem
Based on the results of the analysis on usability testing and the user journey map, there are 6 main problems faced by users.
- Searching items by typing keywords are not simple (Critical).
Detail: Search Field.
Problem: Users who want to search for items by typing keywords for these items must enter the Products menu on the navigation bar, and select the Search button. The steps that the users must take are not simple, because the search field should be as accessible as possible for the users to make it easier to find items.
Solution: Placing the search field at the top of the homepage so that the search field is the first component that the user sees and is most aware of. This solution also intends to facilitate the perspective of the human eye who reads and sees the application by forming a “Z” pattern (especially most people who read sentences from left to right) so I put the search field at the top of the IKEA application’s homepage.
2. The information in the product category list is only the product name (Critical).
Detail: Products / Rooms Name, Products / Rooms Image, Search Field.
Problem: List of product categories with incomplete information because only the name of the product category is listed. This menu also doesn’t include a search field, where many product categories will make users have to scroll to find the category they want.
Solution: Adding an image to the product category list as complementary information, so users have an idea of what category they are viewing. The next solution is to add a search field in the product category menu, making it easier when users want to search for product categories and don’t need to scroll through quite a lot of categories.
3. It is difficult to adjust the filter by using the slider (Critical).
Detail: Filter Feature.
Problem: Users find it difficult when they want to set the item price filter by sliding the slider until it matches the price they want. The prices of the items shown are also not detailed from the cheapest to the most expensive, which makes the user have to guess the price of the item himself.
Solution: Changed the option to select item prices on the filter feature with the checkbox button.
4. There is no detailed information in the item search results (Medium).
Detail: Search Result.
Problem: The information displayed in the search results is only the name of the item and the price of the item. There is no stock information, item rating, number of items sold in item search results.
Solution: Add detailed information about item stock, item ranking, and the number of items sold in item search results, so users have clear information regarding the item they are looking for.
5. The image size and the item price font are too large in the item details menu (Medium).
Detail: Item Image, Item Price.
Problem: The image size and the item price font are too large in the item details menu so users need to scroll down to find the add to shopping list button and the cart button. Item images and font sizes that are too large also make the design look unbalanced because one screen looks full and the information visible on one screen is minimal. Users need to scroll down to find the add to shopping list button and the cart button because of their placement at the bottom.
Solution: Change the item image size and item price font to a smaller size than before to create a more balanced design. This solution can also make more information go on a single screen item detail page. The next solution is to make the add to shopping list button and add to cart button a fixed position at the bottom so that when the user scrolls down, the button is still accessible.
6. The shopping list menu is difficult to find (Critical).
Detail: Shopping List Menu.
Problem: Users have difficulty finding the shopping list menu because the shopping list menu is in the account menu. Users consider the account menu only for editing user profiles, and the shopping list menu is not common if it is in the account menu.
Solution: Changed the buttons in the navigation bar and placed the shopping list button in the navigation bar so that users can more easily find the shopping list menu.
Prioritization Matrix
From the opportunities that have been found in the user journey map, I create a priority matrix to consider which opportunities I will implement into design improvements.
Actionable Insight
- Place the search field at the top of the homepage.
- Adding an image to the list of product categories as complementary information.
- Adding a search field in the product category menu.
- Changing filter options with a checkbox button.
- In search results, add detailed information on stock items, item ratings, and the number of items that sold.
- Create a more balanced font size hierarchy and reduce the image size of items in the item details menu.
- Placed the add to shopping list button at the bottom of the screen, and made it a fixed position, so that when the user scrolls down, the button is still accessible.
- Changed the button in the navigation bar and put the shopping list button in the navigation bar.
Stage 3— Ideate
At this stage, I create User Flow, Information Architecture, Wireframe, Design System, and Mockup Design.
User Flow
I created a User Flow to describe the steps the users will go through to searching for items in the IKEA app then adding them to the shopping list and shopping cart.
Information Architecture
Information Architecture is created for documentation of all the flow, design requirements, content, and other components that will be implemented on the wireframe.
Wireframe
I created lo-fi wireframes using Figma, based on the information architecture that I’ve created before.
UI Design
Homepage
The homepage is a menu that will first appear when the user opens the application. The changes made in the homepage menu are placing the search field on the application homepage. Then the next change is the size of the ad banner which is reduced so that all menus can be easily seen by users. After that, change the navigation bar buttons and put the shopping list button on the navigation bar so that the shopping list menu is easier to find.
Search
This is a menu if the user presses the search field. This menu is an improvement that I made for users who want to type item keywords in the IKEA application.
Shopping List Menu (Wishlist)
The shopping list (wishlist) menu, which was previously on the account menu page, has been repositioned so that users can easily see the contents of their shopping list. In this menu, the shopping list button is next to the home button and is named Wishlist in the navigation bar.
Products Menu
Menu products are divided into two categories. Users can still search for the items they want based on Product and Room categories. I added an image to each category list so that users understand what the category name means. After that, I added a search field in the product category menu.
Search Result
This page is a menu that will display all search results from users. I added detailed information about item stock, item rating, the number of items sold in item search results.
Filter
Filters are used to filtering search results according to user needs and desires. The change I made to the item search filter feature is the filter options were changed to checkbox buttons to make filter selection more specific.
Item Detail
The user can see the details of the item he has selected. The changes that I’ve made are placing the add to shopping list button at the bottom of the screen, and making it a fixed position, so when users scroll it down the button is still accessible. Then I create a more balanced font size hierarchy and reduce the size of the item image in the item details menu.
New Design Flow
Stage 4 — Prototype
I make the prototypes of the IKEA app's new design using Figma. If you want to find an item in this prototype, the journey will be the same as the explanation I discussed earlier. Please click the link below to try the prototype.
Disclaimer: The prototypes that I made are not all clickable. Enjoy the prototype :D
Stage 5— Test
Usability Testing After Redesign
After redesigning the application, I re-evaluated the new design that I had created. I tested 6 users who had participated in the first test using the same task scenario as in the first test. This test is carried out using a Figma prototype, and users are asked to run the prototype according to the task on their device. This test also wanted to see how the user’s expectations of the new design that I created, and find out whether the solution I implemented had addressed all the pain points that users felt in the first test of the current IKEA application.
Task 1
Task:
Search for items by typing specific keywords in the search field.
Scenario:
Imagine you want to search for IKEA ADILS products in the search menu. What steps did you take to search for this item?
All users can complete this task properly and correctly, due to the placement of the search field at the top of the homepage. Users immediately press the search field and then start looking for items by typing the keywords for the items they want to search for. After the search results for the items typed by the user appear, they select one of those items. This task is completed easily by all users because to search for items by typing keywords, users no longer need to go to the products menu in the navigation bar and select search manually. With a separate search field at the top of the homepage, it makes the user faster to perform this task.
Task 2
Task: Search for items by product or room category on the Products menu.
Scenario:
Imagine you want to buy a new sofa, and you are interested in sofas from IKEA products. How do you search for the sofa that suits your needs on the IKEA app?
All users managed to complete task 2 easily. The steps that the user went through to achieve the goal of this task were also completed. The majority of users choose to search for sofas through the Product item category, and the rest search through the room category by selecting the “Living Room” category. Users can easily perform this task because of the effect of changing the appearance of the Product menu, where each category on the Products menu is equipped with an image that defines each category so that users will easily understand those categories.
Task 3
Task: Use the item search filter feature.
Scenario:
Imagine you want to find an office chair and you need to adjust the price according to the budget you have. How do you search for searching that office chair?
All users completed task 3 because the steps they went through were almost similar to task 2 but users needed to use the item search filter feature. The steps that the user goes through to complete this task is that the user needs to filter the price of the office chair which will be displayed in the search results according to the budget they have. Users can easily find the filter button and use it successfully. When the user has entered the item filter menu, they can understand this filter which has been changed to a checkbox button on the filter options. Users no longer need to adjust the price of the item they want to filter because the options are listed, and are also described as the lowest to highest price. After they finish selecting the price of the filtered item, users also have no trouble finding the CTA button so that the price of the item they have filtered is displayed in the item search results.
Task 4
Task: Add the item to your shopping cart.
Scenario:
Imagine you have been looking for a table lamp product that you like and after you find it, then the item wants to be added to your shopping cart. How do you do this?
All users managed to complete task 4 easily. To complete this task the user needs to add a table lamp to the cart by pressing the add to cart button. The steps they go through are the same as in task 2, but after the searched item has been displayed in the search results, they have to choose one of those items, so they can go to the item details. The user has no difficulty in finding the add to cart button because the position of the add to cart button has been moved to the bottom of the screen with the same placement as the navigation bar and the position of the bar is fixed, so when the user has to scroll down, the position of the bar that contains add to cart button, add to wishlist button, and buy now button will not move.
Task 5
Task: Save the item to your shopping list.
Scenario:
Imagine you want to search for a wardrobe that you like and then after you found it, you want to save the wardrobe into your shopping list. How do you do this?
All users managed to complete task 5 easily because the task is very similar to task 4. The difference is that in this task the user needs to add a wardrobe to the shopping list by pressing add to shopping list button. Because the steps are the same as task 4, all users can complete this task perfectly and quickly.
Task 6
Task: Go to the Shopping List menu.
Scenario:
Imagine you want to see the wardrobe that you save on your shopping list. How do you do this?
All users have completed it again in this last task. This task is a task with the fastest processing of the existing 6 tasks because the changes made are very significant. Users have to find the shopping list button, and they managed to find it easily because the shopping list (wishlist) menu is in the navigation bar. The impact on this task is also the most obvious when you see the results of the previous test (there was even 1 user who had an error in carrying out this task). Users no longer need to search for where the shopping list menu is because it is visible in the navigation bar. Even if the user is not on the homepage, it will still be easy to find this shopping list button.
Testing Result
The results of the usability test of the new design get more positive results and feedback than the first usability test on the current IKEA application. All users can perform every task and get better results from the first usability test. That’s because I have implemented all the opportunities that came from user feedback in the first test to be applied to this new design. The average of each task gets better results and is done faster in terms of time, especially on task 6 to search the shopping list menu, because in the first test the task where the user had to search for a shopping list was the task that the users complained the most and got an error result by 1 user in the first test. However, there are still some improvements that I have to make because there are new opportunities that can be developed further.
The table below is the result of the time and success of all the tasks that have been done by the users.
New Design Feedback
Worked Well
- Searching for items will be simpler because there is a search field on the homepage, and the products menu is less confusing.
- The feature for filter items is easier to use.
- Opening the shopping list menu is faster because the button is in the navigation bar.
- Detailed information that completes the search results so there is no doubt if you want to buy some items.
- Images in product categories are very useful.
Need to Change
- The image component on the shopping list menu is still too large, and maybe it can be reduced again, because if the user’s shopping list has a lot (for example more than 10), the user will have a little effort to scroll.
- At least on the shopping list menu on one screen, users can still see their 2 shopping lists.
- The Products menu button on the navigation bar is a little confusing because the icon is a search form, but the name of the button is products. It will be easier if it is made more consistent, and avoids redundancy because there is already a search field on the homepage.
Conclusion
Overall, users have a pleasant experience after trying out the new design prototype. The problems that users complained about have also been resolved in this new design prototype. The new design makes searching for items faster, and easier to use. Faster to use because of the placement of the search field on the homepage and the placement of the shopping list menu in the navigation bar. Easier to use because users find it helpful to have a search field in each product menu. Furthermore, users feel visually and functionally happy by adding images to the category name information in the Products menu. The search results for items are also more informative, which in this new design adds a description of the number of items in stock, the number of items that have been sold, and the rating of the item.
The image below is what users say and feel in in-depth interviews after users carry out tasks on the current application design.
Closing
This is the final part of my case study project, I got a lot of new knowledge in completing this project. Special thanks to Dibimbing. id who has taught me for 3.5 months which is very useful for my UI/UX career in the future. I am very open to receiving criticism and suggestions from you to help improve my knowledge in UI/UX.
Thank you for your time and attention to read.
