The Xbox hardware product pages hadn’t seen a meaningful update in over three years. They worked well enough but felt outdated, especially with the next-gen console launch just around the corner. When Microsoft migrated to Adobe Experience Manager (AEM), we saw a chance to refresh these pages and bring the customer experience up to speed.
This wasn’t about flashy new features—there weren’t any engineering resources available for that. Instead, the challenge was to improve the design within the existing framework. By leaning into AEM’s capabilities and performing a thorough design audit, we delivered a cleaner, more modern look while improving usability and accessibility—all in just four weeks.
The refreshed pages now feature updated colors, typography, and patterns that bring the design in line with current standards. Key product details are more prominent, creating a page that’s not just visually appealing but also more effective at delivering information.
Finding information and taking action is now seamless, thanks to improved navigation:
Sticky Navigation: We replaced the old sticky tabs with a streamlined navigation bar that lets users jump between sections using anchor links. No more embedded pages to click through—just smooth scrolling.
Hero Design with Quick Access: The hero section now highlights pricing and product configurations while keeping the “Start Building Yours” call-to-action visible as users scroll.
Our goal was to highlight Xbox’s best features while reducing the effort required to discover them. We achieved this by rethinking the content organization and emphasizing immersive visuals:
Simplified Layouts: Previously nested components were restructured into logical sections, making the content easier to explore.
Spotlight on Game Pass: We added a dedicated section to showcase the Xbox Game Pass library. This not only emphasizes its value but also acts as an entry point for browsing thousands of games.
Hover over the screen below and interact as if you were viewing a web page
With no time or resources to build new components, we worked within the constraints of AEM and existing design libraries. I led design audits to identify which components worked well and explored how they could be enhanced by blending in newer elements from the Surface product pages.
During this process, I discovered that key product details were often buried in carousels or oversimplified. By rethinking the layouts, we surfaced this information more effectively, improving both usability and storytelling.
The Store team was thrilled with the results. Not only did we deliver a refreshed design within the constraints, but we also uncovered opportunities for improving the design system in the future. As part of the hand-off, I explored ideal-state designs to inspire what these pages could become beyond AEM’s current capabilities.
Accessibility was a top priority. We worked with Fable and testers with disabilities to validate our designs. Their insights were invaluable in ensuring the new pages are truly inclusive.
This project was a testament to making the most of what you have. By focusing on creativity and resourcefulness, we transformed the Xbox hardware PDPs into a modern, user-friendly experience without requiring new development. It was a fast-paced but incredibly rewarding project that pushed the boundaries of what I could achieve within existing limitations.
