11 min read
Shopping can be a daunting task, especially when it’s at a store as big as IKEA. IKEA Store is a mobile app designed to enhance a user’s in-store shopping experience by making it easier to prepare for your visit to the store, and more efficient to find the items you need when there in-person. It is described in the App Store and Play Store as a “perfect shopping companion” that helps users plan visits as well as find everything in store when they get there. The IKEA Store app is different than the IKEA Place, IKEA Catalogue, and IKEA Meeting apps, which offer different services and user experiences to IKEA customers.
I chose to conduct a user experience analysis on the IKEA Store app because I recently moved to a new condo with my partner and I’ve been doing a lot of online shopping for furniture. I shop at IKEA a lot, so I decided to test out the app. Now as a UX Designer, I have a natural inclination to analyze digital products and I immediately saw an opportunity to conduct a review and usability redesign on the product because there are some potential areas of improvement. Please note that this article is not intended to attack IKEA in any way (I love IKEA!); rather, I hope to present some opportunities for the app and share my experience with fellow UX Designers on how they can tackle user experience designs and problems while building out their own apps and digital projects.
Research and analysis
Current state app
I started off my process by downloading the app to my iPhone. Over the next few days, I made notes about what I liked and what I thought could use some improvements on the UX side.
On the home screen, I thought it was nice that I could see new products front and center, however, I somehow wished I could more than one at a time without having to scroll to see the next one. Analyzing the tab bar at the bottom of the home screen, I felt the icons could have included labels and been less obscure with the design. I can guess what the icons are, but it definitely isn’t intuitive, especially for a first-time user.
On the product screens, there are lots of categories! Off the bat, the all caps are hard for me to read. It would be nice to have some more visuals or examples of an item in that category to help differentiate. On each individual product page, some of the information, such as sale price and date limitations, is cluttered and therefore hard to read. The reviews are also hard to read and get to. When looking at availability, I’m unsure how to change the store location or view any store location’s inventory. If anything, I think it would be nice to see the number in stock. One thing that really stands out is the item location (aisle and bin number) in a way designed identical to the in-store signs. When using the filter, I felt the behavior was quite complex and not what I expected a filter to be like.
On the shopping list page, I am required to swipe left to collect an item, which is not intuitive at all. Here, I found how to change my store location. I like that it shows me if one of the items on my list is low in stock or out of stock. As I change my store location thought, I again find the all caps hard to read. It currently shows distance in kilometers; it would be nice to see the store address, too, in case there are two locations in the same city. Going back to the shopping list page, I am unsure what the out of stock icon is, but I like how this page shows the total number of packages the item has and where to find them.
My favorite things
Overall, I really like how the shopping list gives you detailed information, such as the item number, where it’s located, and whether the product is in or out of stock. The item number and location visuals are identical to the in-store tags, which makes a lot of design sense and the process of in-store shopping easier. I liked the ability to mark items as ‘collected’ once they’ve been picked up in-store and, in particular, how lists are synced on both the app and the website. It was nice having the ability to scan barcodes on item tags in store and to add items to the shopping list. All-in-all, the app brand and UI match each other well.
Areas of improvement
Navigating and using the features of the app requires a lot of guesswork. I feel the usability can be improved by providing more context and information on some screens while implementing more standard user flows for certain features. One thing that really bothered me was that I was only able to change my store location from one screen. I would love to have access to change this from more than one place. There is an apparent disconnect between the app and the website where the app also only displays one shopping list whereas the website can have multiple shopping lists. In my opinion, it’s not a good user experience if a user is relying on their secondary shopping lists and are unable to access it on the app. Overall, I find there’s a lack of visual hierarchy between text and images.
Part of my research included an analysis of IKEA’s closest competitors. Competitive analysis is important in order to find a niche market and to ensure that the product I’m designing for is adequately different from other products in the industry. Competitor research can also give insight and ideas into components that I could potentially add into my own product design. I chose Wayfair, an ecommerce specialist and online furniture leader, and Urban Outfitters, who is not necessarily focused on furniture but a good ecommerce comparison which I could use to compare and analyze.
I compared Wayfair and Urban Outfitter’s mobile apps with IKEA Store on the basis of usability, user interface, features, simplicity, and innovation. Here are my notes:
Wayfair (Direct competitor)
- Information and visuals are labeled and consistent across the app
- There are lots of visuals used throughout the app making the information clear and easy to understand
- Categories are very in-depth, so users can search and find exactly what they’re looking for
- There are many filter options
- Search can be accessed across many screens
- App shows related items or items customer typically buy when viewing an item
Urban Outfitters (Indirect competitor)
- User interface is very clean and simple
- Categories are laid out with good hierarchy
- There’s an ability to check inventories at different stores
- There’s a good selection of ads and promos
- Heavy photography used
Before finally redesigning the app, I conducted user research on the existing IKEA Store app. Sometimes designers will go out and survey actual users, but given limitations in time and budgeting for this project, my method was to read reviews on the App Store and Play Store. I started by breaking the feedback into categories based on usability, functionality, user interface, and then everything else.
Summarizing my findings, I was able to group what users of the IKEA Store app liked and didn’t like.
- It is easy to add items to the shopping list
- Item numbers and locations are helpful
- Making a shopping list is more convenient on the app than on the website
User didn’t like:
- Related products are not shown on product screens
- The stock status of products displayed in app are not accurate to what’s in store
- It’s hard to change the default store
- ‘Collecting’ items on the shopping list isn’t intuitive
- There’s too much information (it’s not simple enough)
- The shopping list doesn’t show a map of the location of the item
After going through user reviews, my competitive analysis, and comparing persona goals with user research, these are the pain points I have chosen to tackle in this redesign:
- The shopping list isn’t intuitive for marking items as collected and lack of help in locating products.
- It’s hard to change or view inventory in other stores (stock status displayed in the app is often inaccurate to the actual status of what’s available in store).
- The overall information hierarchy is poorly laid out (there is often too much information displayed without necessary importance).
User Flow Scenarios
Scenario 1: Pre-store visit (at home browsing)
A simple linear user journey.
Scenario 2: In-store companion app experience
A simple linear user journey.
Redesigning the IKEA Store app
After conducting research and analysis of the IKEA Store app, the solutions proposed in my redesign aim to:
- Improve and enhance the usability based on the addressed pain points above.
- Make the app more accessible and user-friendly for all user types to decrease the guesswork required to use the app.
- Maintain current on-brand UI elements with web and print.
Sketching and wireframes
After establishing the goal of my project, I set out to sketch and wireframe my redesign. I used a standard ballpoint pen and A4 paper to sketch and wireframe.
Alas, I began my mockups. For my mockups I used Sketch.
Home Screen – Offers, New Products, Navigation
Home screen; before and after.
Starting with the home screen, I separated the offers section to a horizontally scrollable view of visual-focused ads. New products are laid out in a gridview so that users are able to see more. In addition, I labeled each navigation item to reduce guesswork and ambiguity originally required to navigate the app.
Product Screen- Search and Catalog
Product screen; before and after.
Moving on the product screens, I decided to add visual images for each product category to easily differentiate between categories. Looking back, you’ll see that the all caps text lacked differentiation and was, therefore, harder to read. Here, I also added a search bar so that the home screen isn’t the only screen where the user can access search.
Product List – Search Results
Products list; before and after.
For product lists, I simply changed the way that products are laid out to a gridview such that users can browse and see more on screen. Before, there were only a couple of products shown at one time on a screen.
Product Details – Product Information
Product details; before and after.
The product details page contained a lot of information and an odd visual hierarchy. I was also unable to change store locations or view another store’s inventory. In my redesign of this screen, I reorganized and shuffled the placement of information to provide better legibility. This included grouping together item number information with location numbers, adding ability to view other store inventories or changing the app’s default store, and a timestamp to show when the stock was last updated to provide users with more assurance that stock quantity results match up to each store’s real-time stock. Users are also able to see products that other users have bought with this product as a bonus recommendation feature.
Shopping List – Shopping Items and Store Map
Shopping list, before and after.
For the last screen, the shopping list, I shuffled the overload of information displayed and the, again, odd visual hierarchy. I did this by reorganizing and simplifying the information to only display the necessary information. I also cleaned up the placement of components and added a counter to the location section headers so that users can easily identify how many items are in that section with an added ability to minimize a section. There was also an issue with collecting items in the earlier app, which was not intuitive, so I redesigned this component to simply checking the product off. The final piece was a store map view which can be toggled by the level they are on (depending on the store), which will display where you currently are in store.
I was able to turn my mockups from Invision into a codeless prototype. Typically, this prototype will go through approval from my Director of Product Design before heading off to development. There will of course be revisions and iterations (the nature of an agile organization), but Invision makes it easy to accommodate changes.
The IKEA Store App is a useful product that helps users navigate through the experience of shopping at IKEA. There are some really great features that the current app includes, like how easy it is to add items to the shopping list, particularly in comparison to adding items to the shopping list on web. It also does a great job of maintaining the IKEA brand, my favourite example being how the item numbers remain in sync on the app with the in-store design.
The app, however, does have some opportunities for improvement based on user experience testing and feedback. It’s most interesting to see the power of white space and how simplicity in design can change the overall functionality of an app. The majority of my redesign, for example, was simply changing the visual hierarchy by moving text, icons, and images and giving the app more white space and balance. This demonstrates the benefit of how adding white space can change a visual design and lead users in the right navigational direction.
This was a fun project and I hope you can take away a few things from my analysis of the IKEA Store App and redesign suggestions. Please note that this project is not endorsed by IKEA (or at least not officially) and it doesn’t reflect the views of anyone working within the IKEA Store App team or IKEA, Inc. I don’t take personal credit for any third party content used within this project.