IKEA AR Map App

01 Context and overview

Going on a shopping spree?

‍This was a class project for CSE 170, Interaction Design, at the University of California, San Diego. 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

As a solo project, I navigated the entire design process from needfinding to user testing on my own.
I ideated through sketching initial concepts, created low-fidelity and high-fidelity prototypes, and refined the design through iterative improvements.

02 The problem

Taking observations in person

First, I had to decide on my target audience. I chose to focus on shoppers in physical retail settings. What better way to scope out their needs and pain points than watching them in real life?

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

After 3 hours of observation in various retail stores, I came across this interaction. Here, a mom and daughter roamed the entire right side of a TJ Maxx. They split up to find a certain supplement, showing signs of difficulty navigating the 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.

Okay... so what?

This insight into shoppers' behavior in physical retail settings helped me immensely with defining, understanding, and contextualizing a problem to solve. After all, there's no point in designing a solution to a problem that doesn't exist. I distilled this (and many other similar interactions) into a core need:

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

03 Ideation

Sketching and storyboarding

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 Design

Lo-fis and hi-fis

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

Decisions, decisions

I thought deeply about my prototype's information design, interaction design, and visual design. Each of the choices I made are backed by user research, common design standards, and well-founded principles.

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.

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.

05 Polish

Testing with real people

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:

Improvements on intuitive searching

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

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.

Improvements on affordances

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

Both participants struggled with figuring out how to scroll the carousel displaying all of the IKEA deals. Upon observation, they did not realize that the carousel was "swipable".

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

06 Final design

Conquer your local IKEA by finding your own path

IKEA AR Map App provides customers with tools to locate specific items or products within the store efficiently, reducing confusion and improving accessibility.

Figma mockup displaying IKEA AR Map App home screen

Store directory and search page

The in-store navigation screen simplifies the shopping experience by offering clear, layered access to essential information. At the top, a search bar allows users to quickly locate specific items by name or category, reducing the time spent wandering through aisles. A deals and sales carousel highlights current promotions, enabling users to make informed purchasing decisions as they navigate. The product categories section presents an intuitive overview of store offerings, making it easy to browse and discover items. Additionally, shopping list integration helps users efficiently locate pre-selected products, streamlining the process and ensuring a more organized and satisfying shopping journey.

Store map

The clear store navigation screen features a visual map designed to make in-store exploration intuitive and stress-free. At the top, a search bar allows users to easily find specific items by name or category directly within the app’s navigation tab. Labeled store areas, such as "Baby," "Bathroom," and "Bedroom," help users quickly identify departments at a glance. Real-time position tracking keeps users oriented by showing their exact location within the store. Additionally, the interactive map lets users explore the store layout, fostering a sense of direction and minimizing confusion. This screen empowers users to navigate IKEA confidently and efficiently, turning the shopping journey into a seamless and enjoyable experience.

Directions preview

The guided navigation preview screen combines precision and interactivity to make item discovery in IKEA intuitive and stress-free. A dynamic directions drawer offers clear, step-by-step instructions—such as "100 ft, turn right at aisle B46"—while allowing users to toggle between a broader map view and detailed guidance. An interactive heading includes a link to the selected item, providing quick access to product details for added context. The “Start Route” button launches a detailed AR-guided path, enhancing navigation with real-time visual cues. The customizable, draggable drawer lets users adjust the balance between map and directions visibility, giving them control over how they explore the store.

In-store AR navigation

The immersive augmented reality navigation screen simplifies in-store exploration by seamlessly merging digital guidance with the physical environment. Real-world AR overlays display arrows that guide users in real-time, aligning naturally with their surroundings for an intuitive experience. Complementing the visuals, written instructions paired with icons—such as "Turn Right, 100 feet"—ensure clarity and accessibility for all users. Functional options like “End Route” and “Add Stop” allow for a personalized journey, giving users the flexibility to conclude navigation early or include additional destinations. This screen transforms the shopping experience by making in-store navigation both engaging and effortless.

Figma click-through

07 Conclusion

What I learned

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.

In retrospect...

I'd revisit the idea of a store directory page. It kind of detracts from the main goal of the app to help with navigation.