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.
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.
Breaking down the configuration steps into categories with helpful tips offered along the way created a less overwhelming user experience.
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.
The configurator was designed to work smoothly and intuitively across mobile, desktop and Xbox.
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.
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.
The updated configurator flow was also applied to the Xbox Design Lab to walk users through creating custom controllers.