IKEA AR Map App

01 Project overview

A class project for CSE 170, Interaction Design. I came up with IKEA AR Map App, a navigation app that aims to address common navigation challenges in large retail stores. The app provides customers with tools to locate specific items or products efficiently, reducing confusion and improving accessibility.

What I did

I navigated the entire design process for this project, starting with needfinding through direct observations of my target audience in real life. I ideated through sketching initial concepts, created low-fidelity and high-fidelity prototypes, and refined the design through iterative improvements. My focus included information design, visual design, and interaction design, all validated through user testing. Throughout the process, Figma served as my primary design platform.

02 The Problem

First, I had to decide on a target audience for my final project. I chose to focus on shoppers in physical retail settings. After 3 hours of observation in various retail stores, I gathered a specific need:

Customers need to be able to find their way to specific items with less confusion.

This came as a result of observing this interaction (and many other similar ones):

A mom and her daughter at TJ Maxx looking at a product

Mom and daughter roaming the entire right side of TJ Maxx. They split up to find a certain supplement, showing signs of difficulty navigating TJ Maxx, even though aisles were marked with what stuff they had in them. Eventually, they found it, but the aisle itself is pretty disorganized.

03 Ideation

I first began with ideation strategies: mindmapping, analogies, reverse thinking, and challenging assumptions. What ideas, no matter how wacky, could potentially address my needer group's needs?

Then, I chose five of the most compelling ideas from the pile and created sketches for them. From those sketches, I drew ten more that built off of those original ideas. It's all about quantity with sketching.

I settled on one specific sketch: the phone with an arrow on it, meant to depict an augmented reality experience guiding the user through a store. I drafted up a storyboard. With a storyboard, me as a designer can step into the shoes of someone actually using my chosen idea.

04 Prototypes

The lo-fi served as the foundation for my app’s information design, and the hi-fi put my visual design skills to the test.

Low-fidelity

High-fidelity

05 Features

Figma mockup displaying IKEA AR Map App home screen

🔍 Store directory and search page

Simplifying in-store navigation.

Search Bar at the Top: Enables users to quickly locate specific items by name or category.

Deals/Sales Carousel: Highlights promotions, helping users make informed purchasing decisions while navigating.

Product Categories Section: Provides an intuitive overview of store offerings for easy browsing.

Shopping List Integration: Ensures users can efficiently locate items they’ve pre-selected, streamlining the shopping process.

This screen reduces confusion and enhances the shopping experience by providing clear, layered access to essential information.

🗺️ Store map

Clear store navigation with a visual map.

Search Bar at the Top: Enables users to intuitively locate specific items by name or category directly within the navigation tab of the app.

Labeled Store Areas: Easily identify sections like "Baby," "Bathroom," and "Bedroom," helping users locate specific departments at a glance.

Real-Time Position Tracking: Keeps users oriented, showing exactly where they are within the store.

Interactive Map Navigation: Allows users to explore the layout, fostering a sense of direction and reducing the likelihood of getting lost.

This screen empowers users to navigate IKEA confidently and efficiently, transforming the shopping journey into a seamless experience.

🧭 Directions preview

Preview of guided navigation to specific items.

Dynamic Directions Drawer: Provides step-by-step directions (e.g., "100 ft, turn right at aisle B46") while allowing users to toggle between map visibility and detailed guidance.

Interactive Heading with Item Link: Ensures quick access to item details for added context.

"Start Route" Button: Enables users to activate a detailed AR-guided path to the selected item.

Customizable View: The drawer is draggable up and down. This balances map and directions visibility, giving users control over how they navigate.

This screen integrates precision with interactivity, making item discovery in IKEA intuitive and stress-free.

👓 In-store AR navigation

Immersive augmented reality navigation.

Real-World AR Overlay: AR arrows guide users in real-time, visually aligning with their surroundings for intuitive navigation.

Written Instructions with Icon: Reinforces visual guidance with clear textual cues (e.g., "Turn Right, 100 feet"), ensuring accessibility for all users.

"End Route" and "Add Stop" Options: Empowers users to personalize their navigation experience by ending the journey early or adding extra destinations.

This screen simplifies in-store navigation by seamlessly merging digital directions with the physical environment.

06 Design Decisions

Information design

I chose to implement a navigation bar at the bottom of my prototype’s screens, containing four tabs: store directory, navigation, product search, help menu.

Why? This design decision was informed by the results of a card sorting activity that I did, seen below. I recruited two participants to sort the features I wanted in my app into categories that made sense to them. Then, I combined the categories created by my two participants to inform the creation of my architecture diagram for the app. Finally, I used the main categories of the architecture diagram as the foundations for the tab.

Interaction design

In my directions preview screen, I have an interactable drawer that is able to be dragged up and down to reveal more or less of the store map. This feature must have good affordance -- otherwise, it might not even be used (since people won’t know it can be dragged without a proper affordance).

So, I added a little “pull tab” to the top of the drawer.

Zoomed-in photo of pull tab interaction design choice

Why? This follows design standards set by popular apps, like Instagram’s comment section drawer. By following common design patterns for drawer features, I have provided a good affordance for its interaction.

Screenshot of Instagram comment section highlighting pull tab

Visual design

Throughout the entire prototype, I practice repetition:

Color usage is repeated throughout similar elements: All route-related buttons are blue, the background is yellow, and minor CTA buttons are in white.

Graphic illustrating repetition in color usage in my design

Spatial relationships are maintained between each group of elements in the product page. Only one typeface is used throughout all of the screens (Noto Sans). Rounded corners for elements.

Graphic illustrating repetition in spatial relationships in my design

Why? Repetition is a crucial element of the PARC principles for visual design. It also allows me to maintain a similar, familiar “feel”, ensuring the user experience is comfortable no matter what screen they’re on.

07 User Testing

My design decisions still need to be validated by actual users. Iteration based on feedback is key in UX. I recruited two participants for a moderated usabililty testing session, and discovered two findings:

Both of my participants first went to the navigation (map) tab to search directions for the BRIMNES item. During post-task questions, they clarified that they thought that they would be able to search for the item within that tab. Change: I added a search bar to the map screen to allow for this intuitive functionality. If I’m on a map, I should also be able to search directions directly on that map.

Graphic illustrating changes between old store map and new store map after user testing

Change: I added a search bar to the map screen to allow for this intuitive functionality. If I’m on a map, I should also be able to search directions directly on that map.

Both participants struggled with figuring out how to scroll the carousel displaying all of the IKEA deals.

Graphic illustrating changes in old carousel and new carousel after user testing

Change: I added clickable buttons on the side of the carousel, adding another affordance to how it can be interacted with (not just swiping).

08 Reflection

This project was my first solo experience with the entire design process, making it an invaluable learning journey. I gained hands-on experience with needfinding by observing user challenges directly, which helped identify core pain points. Developing the architectural diagram and user flows honed my information design skills, ensuring clarity and functionality in the app structure. The card sorting exercise was particularly enlightening, as it provided a deeper understanding of how users categorize and prioritize features. It directly influenced the app’s navigation structure, ensuring it aligned with user expectations. Prototyping and user testing showed me how important it is to constantly refine designs based on feedback.