Microsoft Store Configurator
Surface Configurator walks customers through buying options to help them easily select a new Surface Laptop or custom Xbox controller. The configurator was customized for smooth experiences on mobile, desktop and Xbox.
The Problem
When purchasing a Surface laptop or custom Xbox controller, Microsoft customers were presented with a long list of options, some of which were technical. The process of selecting these options needed to be more smooth, intuitive and organized.
The Solution
Breaking down the configuration steps into categories with helpful tips offered along the way created a less overwhelming user experience.
My Role
I was in charge of the visual and UI design for this project. I worked with a senior designer who offered UX guidance and feedback.
Surface Laptop Configurator
The configurator was designed to work smoothly and intuitively across mobile, desktop and Xbox.
Mobile first design
A mobile flow for the surface configurator. To avoid a long vertical scroll, configuration steps were broken down into horizontally scrolling "drawers". The progress bar at the top lets users know where they're at in the process.
Surface configurator for desktop
On desktop, the configuration "drawers" are laid out vertically to make use of the extra space. Users can navigate back to previous selections easily by expanding and collapsing each drawer.
Xbox Design Lab configurator
The updated configurator flow was also applied to the Xbox Design Lab to walk users through creating custom controllers.
