IKEA Planning Experiences (IPEX) has a dozen home furnishing planners developed by independent product teams and vendors.
However, this diversity led to inconsistent and confusing navigation across products. I was responsible for an initiative to fix this issue.
The challenge wasn't just determining how navigation should function across different touchpoints (desktop, kiosk, mobile), but also finding a solution that wouldn't require major UI architectural changes. Additionally, I worked to gain buy-in from the product teams.
IKEA Planning Experiences (IPEX) has a dozen home furnishing planners developed by independent product teams and vendors.
However, this diversity led to inconsistent and confusing navigation across products. I was responsible for an initiative to fix this issue.
The challenge wasn't just determining how navigation should function across different touchpoints (desktop, kiosk, mobile), but also finding a solution that wouldn't require major UI architectural changes. Additionally, I worked to gain buy-in from the product teams.
IKEA Planning Experiences (IPEX) has a dozen home furnishing planners developed by independent product teams and vendors.
However, this diversity led to inconsistent and confusing navigation across products. I was responsible for an initiative to fix this issue.
The challenge wasn't just determining how navigation should function across different touchpoints (desktop, kiosk, mobile), but also finding a solution that wouldn't require major UI architectural changes. Additionally, I worked to gain buy-in from the product teams.
Fact sheet
Years: 2022-2023
Initiative: Navigation and Global menu
My contribution:
program strategy
group alignment (10+ ux, 5+ teams)
brand alignment
design concept work
interaction and component design
testing strategy
design specification
implementation review
In all honesty, what I designed and landed on is not much to look at. IPEX now has Navigation and Menu components that look like this in production:
In all honesty, what I designed and landed on is not much to look at. IPEX now has Navigation and Menu components that look like this in production:
In all honesty, what I designed and landed on is not much to look at. IPEX now has Navigation and Menu components that look like this in production:
(It's a little more complicated than that.)
(It's a little more complicated than that.)
(It's a little more complicated than that.)
Solving it
Solving it
Solving it
The typical user journey starts from the "Planners" page on IKEA, then moves to one of the IPEX apps. A website-like page, the "Gallery", is the first app screen. A 3D planning step follows, and finally the app concludes with another webpage-like layout, the "Summary" page. Journey usually exits to the Shopping Cart:
The typical user journey starts from the "Planners" page on IKEA, then moves to one of the IPEX apps. A website-like page, the "Gallery", is the first app screen. A 3D planning step follows, and finally the app concludes with another webpage-like layout, the "Summary" page. Journey usually exits to the Shopping Cart:
The typical user journey starts from the "Planners" page on IKEA, then moves to one of the IPEX apps. A website-like page, the "Gallery", is the first app screen. A 3D planning step follows, and finally the app concludes with another webpage-like layout, the "Summary" page. Journey usually exits to the Shopping Cart:
Structuring this was an important first step when I presented my concepts to the teams as it helped with why's and how's when it came to solving things in a specific way.
Structuring this was an important first step when I presented my concepts to the teams as it helped with why's and how's when it came to solving things in a specific way.
Structuring this was an important first step when I presented my concepts to the teams as it helped with why's and how's when it came to solving things in a specific way.
I narrowed down the problem to focus on just a couple of key identifiable areas and how they were handled in the apps:
IKEA logo
back button
hamburger menu
finalize / forward button
I narrowed down the problem to focus on just a couple of key identifiable areas and how they were handled in the apps:
IKEA logo
back button
hamburger menu
finalize / forward button
I narrowed down the problem to focus on just a couple of key identifiable areas and how they were handled in the apps:
IKEA logo
back button
hamburger menu
finalize / forward button
Mapping these functions into high level overviews for various touchpoints I could identify the issues. To give an example, the in-store kiosks in production at the time, on three planning engines exhibited the following differences (left to right: Gallery-Planning-Summary):
Mapping these functions into high level overviews for various touchpoints I could identify the issues. To give an example, the in-store kiosks in production at the time, on three planning engines exhibited the following differences (left to right: Gallery-Planning-Summary):
Mapping these functions into high level overviews for various touchpoints I could identify the issues. To give an example, the in-store kiosks in production at the time, on three planning engines exhibited the following differences (left to right: Gallery-Planning-Summary):
When discussing a dozen planning apps, it's essential to consider the rationale behind their design. Distinguishing between a genuinely unique feature of a planner, and a similar pattern that's merely applied differently, is the key to move forward.
When discussing a dozen planning apps, it's essential to consider the rationale behind their design. Distinguishing between a genuinely unique feature of a planner, and a similar pattern that's merely applied differently, is the key to move forward.
When discussing a dozen planning apps, it's essential to consider the rationale behind their design. Distinguishing between a genuinely unique feature of a planner, and a similar pattern that's merely applied differently, is the key to move forward.
Having the birds eye view helped me realize that functions weren't separated by concerns. It was unclear where the header extended, CTA was sometimes in the header, sometimes in the scene, and there were other findings as well.
By defining the functions of the header and sidebar, I was able to determine the optimal placement for various elements.
Having the birds eye view helped me realize that functions weren't separated by concerns. It was unclear where the header extended, CTA was sometimes in the header, sometimes in the scene, and there were other findings as well.
By defining the functions of the header and sidebar, I was able to determine the optimal placement for various elements.
Having the birds eye view helped me realize that functions weren't separated by concerns. It was unclear where the header extended, CTA was sometimes in the header, sometimes in the scene, and there were other findings as well.
By defining the functions of the header and sidebar, I was able to determine the optimal placement for various elements.
Branding issues
Branding issues
Branding issues
When it comes to home furnishing and 3D planning, IPEX has little control over the full customer journey. My design challenge was to decide how much we should integrate into the IKEA overall experience and aesthetics, and the rationale for making the choice.
One problem I saw early on was the fact that the menu, if looks the same as on IKEA website, is really confusing. Imagine you're browsing IKEA, then you land on a planner, suddenly the main menu is behaving differently.
When it comes to home furnishing and 3D planning, IPEX has little control over the full customer journey. My design challenge was to decide how much we should integrate into the IKEA overall experience and aesthetics, and the rationale for making the choice.
One problem I saw early on was the fact that the menu, if looks the same as on IKEA website, is really confusing. Imagine you're browsing IKEA, then you land on a planner, suddenly the main menu is behaving differently.
When it comes to home furnishing and 3D planning, IPEX has little control over the full customer journey. My design challenge was to decide how much we should integrate into the IKEA overall experience and aesthetics, and the rationale for making the choice.
One problem I saw early on was the fact that the menu, if looks the same as on IKEA website, is really confusing. Imagine you're browsing IKEA, then you land on a planner, suddenly the main menu is behaving differently.
One way to solve this was to make IPEX built apps strikingly different.
I explored several directions for branding our apps. This fits into a bigger narrative as those need to integrate not only the website, but IKEA's native app offerings, the UPPTÄCKA kiosk platform and so on.
I also explored introducing breadcrumbs in the vicinity of the logo. People would get lost all the time not knowing where they were in the journey. (One typical problem area was to click on the logo, leave the app, and not be able to find their way back to a planner.)
One way to solve this was to make IPEX built apps strikingly different.
I explored several directions for branding our apps. This fits into a bigger narrative as those need to integrate not only the website, but IKEA's native app offerings, the UPPTÄCKA kiosk platform and so on.
I also explored introducing breadcrumbs in the vicinity of the logo. People would get lost all the time not knowing where they were in the journey. (One typical problem area was to click on the logo, leave the app, and not be able to find their way back to a planner.)
One way to solve this was to make IPEX built apps strikingly different.
I explored several directions for branding our apps. This fits into a bigger narrative as those need to integrate not only the website, but IKEA's native app offerings, the UPPTÄCKA kiosk platform and so on.
I also explored introducing breadcrumbs in the vicinity of the logo. People would get lost all the time not knowing where they were in the journey. (One typical problem area was to click on the logo, leave the app, and not be able to find their way back to a planner.)
The logo and breadcrumbs placement concept went through many iterations throughout visual development. Final version has IKEA logo at the bottom of the sheet.
It was an intriguing question to ask whether IPEX built solutions could "own" a color. I mapped the full journey to see what impact a change like this would mean.
The logo and breadcrumbs placement concept went through many iterations throughout visual development. Final version has IKEA logo at the bottom of the sheet.
It was an intriguing question to ask whether IPEX built solutions could "own" a color. I mapped the full journey to see what impact a change like this would mean.
The logo and breadcrumbs placement concept went through many iterations throughout visual development. Final version has IKEA logo at the bottom of the sheet.
It was an intriguing question to ask whether IPEX built solutions could "own" a color. I mapped the full journey to see what impact a change like this would mean.
Even though everyone involved liked the direction, we ultimately decided against introducing such a strong branding element and resorted to just making the menu different (with a meaning).
Even though everyone involved liked the direction, we ultimately decided against introducing such a strong branding element and resorted to just making the menu different (with a meaning).
Even though everyone involved liked the direction, we ultimately decided against introducing such a strong branding element and resorted to just making the menu different (with a meaning).
The arrow problem
The arrow problem
The arrow problem
The backward-pointing arrow was a significant element in our overall navigation pattern, but it presented several challenges:
Firstly, its function was occasionally confused with modality. For instance, users frequently clicked it to exit specific modes, such as the "Edit room" mode.
Secondly, our qualitative testing revealed that a standalone back arrow is often interpreted as an "Undo" function within the scene. This misunderstanding frequently led to unintended actions.
Lastly, from an aesthetic perspective, the arrow pointing towards the IKEA logo was often considered internally as an afterthought.
Moreover, we learned from data that the hamburger menu wasn't performing well. It's hosting important functions, such as Open, Share, yet, it was always used in the top right alignment and our users couldn't find it. It also exhibited the pointing arrow problem:
The backward-pointing arrow was a significant element in our overall navigation pattern, but it presented several challenges:
Firstly, its function was occasionally confused with modality. For instance, users frequently clicked it to exit specific modes, such as the "Edit room" mode.
Secondly, our qualitative testing revealed that a standalone back arrow is often interpreted as an "Undo" function within the scene. This misunderstanding frequently led to unintended actions.
Lastly, from an aesthetic perspective, the arrow pointing towards the IKEA logo was often considered internally as an afterthought.
Moreover, we learned from data that the hamburger menu wasn't performing well. It's hosting important functions, such as Open, Share, yet, it was always used in the top right alignment and our users couldn't find it. It also exhibited the pointing arrow problem:
The backward-pointing arrow was a significant element in our overall navigation pattern, but it presented several challenges:
Firstly, its function was occasionally confused with modality. For instance, users frequently clicked it to exit specific modes, such as the "Edit room" mode.
Secondly, our qualitative testing revealed that a standalone back arrow is often interpreted as an "Undo" function within the scene. This misunderstanding frequently led to unintended actions.
Lastly, from an aesthetic perspective, the arrow pointing towards the IKEA logo was often considered internally as an afterthought.
Moreover, we learned from data that the hamburger menu wasn't performing well. It's hosting important functions, such as Open, Share, yet, it was always used in the top right alignment and our users couldn't find it. It also exhibited the pointing arrow problem:
One of the design solution I tried was to move the hamburger menu to the top left and include back navigation as part of the menu. My hypothesis was that by keeping the menu front and center users were bound to interact with it. (This change also was in line with how the website-like layouts at IKEA operated at that time.)
One of the design solution I tried was to move the hamburger menu to the top left and include back navigation as part of the menu. My hypothesis was that by keeping the menu front and center users were bound to interact with it. (This change also was in line with how the website-like layouts at IKEA operated at that time.)
One of the design solution I tried was to move the hamburger menu to the top left and include back navigation as part of the menu. My hypothesis was that by keeping the menu front and center users were bound to interact with it. (This change also was in line with how the website-like layouts at IKEA operated at that time.)
I checked this change against our apps by creating mockups for touchpoints for all planners. I found this especially useful because teams and stakeholders could immediately relate to the change.
I checked this change against our apps by creating mockups for touchpoints for all planners. I found this especially useful because teams and stakeholders could immediately relate to the change.
I checked this change against our apps by creating mockups for touchpoints for all planners. I found this especially useful because teams and stakeholders could immediately relate to the change.
Testing the concept
Testing the concept
Testing the concept
Knowing the Menu component would contain the back navigational arrow raised interesting questions: is it strange to have it there? Will customers find it? I wanted to find out because saving one button from the UI was a big win.
Knowing the Menu component would contain the back navigational arrow raised interesting questions: is it strange to have it there? Will customers find it? I wanted to find out because saving one button from the UI was a big win.
Knowing the Menu component would contain the back navigational arrow raised interesting questions: is it strange to have it there? Will customers find it? I wanted to find out because saving one button from the UI was a big win.
To learn this I needed a somewhat complete journey and show it to customers. We built a very simple mock planner that had a Planning step with 3D interaction and a Summary page. We repurposed this and built our planner test app with the new navigation.
To learn this I needed a somewhat complete journey and show it to customers. We built a very simple mock planner that had a Planning step with 3D interaction and a Summary page. We repurposed this and built our planner test app with the new navigation.
To learn this I needed a somewhat complete journey and show it to customers. We built a very simple mock planner that had a Planning step with 3D interaction and a Summary page. We repurposed this and built our planner test app with the new navigation.
I begun by doing a a hallway testing on the first version in the office, we then changed a couple of things already based on that feedback
we did two rounds of customer testing with more fine-tuning in between
to understand whether back navigation is discoverable, I prefaced testing as "a new planner" without putting navigation in focus at all – this way we could learn if the new navigation pattern caused any issues or remained "invisible"
I begun by doing a a hallway testing on the first version in the office, we then changed a couple of things already based on that feedback
we did two rounds of customer testing with more fine-tuning in between
to understand whether back navigation is discoverable, I prefaced testing as "a new planner" without putting navigation in focus at all – this way we could learn if the new navigation pattern caused any issues or remained "invisible"
I begun by doing a a hallway testing on the first version in the office, we then changed a couple of things already based on that feedback
we did two rounds of customer testing with more fine-tuning in between
to understand whether back navigation is discoverable, I prefaced testing as "a new planner" without putting navigation in focus at all – this way we could learn if the new navigation pattern caused any issues or remained "invisible"
Most issues found were around clarity what "Exit" means and where the logo takes you. The menu and navigation performed well and we moved ahead with the actual implementation.
Most issues found were around clarity what "Exit" means and where the logo takes you. The menu and navigation performed well and we moved ahead with the actual implementation.
Most issues found were around clarity what "Exit" means and where the logo takes you. The menu and navigation performed well and we moved ahead with the actual implementation.
Specs
Specs
Specs
In addition to technical handovers, I made internal blog post illustrations to help implementing teams with the new components. These technical documents play a major role in bigger teams usually looking for documentation and references.
In addition to technical handovers, I made internal blog post illustrations to help implementing teams with the new components. These technical documents play a major role in bigger teams usually looking for documentation and references.
In addition to technical handovers, I made internal blog post illustrations to help implementing teams with the new components. These technical documents play a major role in bigger teams usually looking for documentation and references.
Next steps
Next steps
Next steps
A while after the components went live, a few concerns came up. One around the lack of logo during 3D scene, and the omission of the back arrow. This was seen as an additional click.
Although it seemed impossible for mobile, I eventually found a way to feature the IKEA logo in the scene where it wouldn't conflict with any other elements. This required that I addressed scene controls, undo-redo, object selection, and room editing scene function UI dependencies.
A while after the components went live, a few concerns came up. One around the lack of logo during 3D scene, and the omission of the back arrow. This was seen as an additional click.
Although it seemed impossible for mobile, I eventually found a way to feature the IKEA logo in the scene where it wouldn't conflict with any other elements. This required that I addressed scene controls, undo-redo, object selection, and room editing scene function UI dependencies.
A while after the components went live, a few concerns came up. One around the lack of logo during 3D scene, and the omission of the back arrow. This was seen as an additional click.
Although it seemed impossible for mobile, I eventually found a way to feature the IKEA logo in the scene where it wouldn't conflict with any other elements. This required that I addressed scene controls, undo-redo, object selection, and room editing scene function UI dependencies.
The concept was extended to website-type layouts as well, and a gray "Utility Bar" was introduced. This contained the menu, back navigation, and global functions. The logo is not part of this which results in an even more balanced composition.
The concept was extended to website-type layouts as well, and a gray "Utility Bar" was introduced. This contained the menu, back navigation, and global functions. The logo is not part of this which results in an even more balanced composition.
The concept was extended to website-type layouts as well, and a gray "Utility Bar" was introduced. This contained the menu, back navigation, and global functions. The logo is not part of this which results in an even more balanced composition.
