Configurator Flow
PROJECT NAME: Configurator Flow
EMPLOYER: PNI Media
CLIENT: Staples US
ROLE: Product Designer
DATE: 2019
LINK: Staples Document Printing
PROJECT DESCRIPTION
The Configurator Flow is a project to improve the UX for the Staples document printing configurator. The configurator allows customers to upload their own documents and go through steps to select feature options for printing.
OBJECTIVES
There were several requested changes to the configurator's look and functionality:
- Increase Document Preview Image Size
- Redesign Space Allotment
- Evaluate Placement of Elements
- Understand How Users Enter & Exit
- Include Staples Header Elements
COMPETITIVE ANALYSIS
After assessing the product design of many other competitors, some in a related field and others not, I decided the Tesla configurator had the cleanest look, good functionality, and a positive engaging user experience.
Competitive Analysis of Tesla Configurator
RESEARCH
Research from a Nielsen Norman Group study of customizable applications showed users struggled the most with low findability and poor page design. Can the users easily find what they need to complete their task and does the design of the page have a usable layout, good readability, and use clear intuitive graphics.
USER FLOW
After a careful assessment of how users were entering and exiting the configurator several significant changes were made for the new design. Most importantly any previous jumps in the user flow journey were designed to be continuous.
Configurator Flow User Flow Sketches
Configurator Flow User Flow
WIREFRAMES
By making the width of the print options right column smaller more width was available for the document preview area allowing for the user to be able to see a larger default preview. Originally the price was at the top of the screen. The price was moved to the bottom right of the screen next to the call to action button.
Configurator Flow Wireframe LoFi
PROTOTYPE
Prototypes of the entire flow were built and tested using InVision's prototype functionality. Configurator Flow User Testing Prototypes
Configurator Flow Redesign Prototype Step 2 Screen
RESULTS
The new configurator design saw drop-offs decrease and conversion rates to cart increase significantly. Customers commented on how the design made all the steps seem seamless. Customers were very happy with a much larger document preview that was nearly double the size of the previous configurator design.
CO-WORKER'S THOUGHTS
Some comments from some of Mike's team members about working with Mike on the PNI projects in this portfolio.
“You were so great to work with and you are a great designer I wish I had the opportunity to learn more from you! I know you'll kill it wherever you end up!”
- Kat J., Junior Product Designer
“I learned a lot while working with you. You are always positive and proactive. You are a great teammate and an awesome support and friend.”
- David R., Senior Product Designer
“I see great things in your future. You are a delight to work with and a total pro.”
- Troy M., Manager & Scrum Master