Door Configurator
The design and layout of the company’s door configurator tool was limited, slow, and cumbersome. I produced a new design that not only made configuring a door more efficient, it created a pleasant user experience.
The design and layout of the company’s door configurator tool was limited, slow, and cumbersome. I produced a new design that not only made configuring a door more efficient, it created a pleasant user experience.
We wanted to give students a place where they would have a complete and confident understanding of their journey as they navigate their way through their online adventure.
My Roles
Research
Art Direction
UI Design
UI Design
The Goals
Efficiency
The door configurator tool is used on a daily basis by hundreds of individuals around the country to build custom door orders for their clients. The client wanted to improve the speed in which a user could 1) build a door, and 2) navigate large orders with ease and the ability to go back and edit orders.
A Better Experience
Since the old configurator tool was vastly outdated and gave off a feeling of dread to the user who was about to build a door, I proposed a redesign that would be a joy to use while maintaining a sense of familiarity to the user.
My Design Process
Discovery
After speaking with users who interacted with the current configurator on a daily basis, it was clear to me that frustrations came from small and hard to read interactive areas and losing sight of the doors created. Once you finally completed a door, there was no indication as to where that door information lived.
Old Door Configurator
The Approach
Sketches were drawn out to convey the ideas to the immediate stakeholders and technology leaders of the company. I then used Adobe XD to design interactive mockups to show the user flow and functionality of the new configurator design.
My first thought, since this configurator was going to live on the desktop, was to take advantage of a full-screen fluid layout. The current design is jam packed inside of a tiny pop-up window. Going full screen would allow for plenty of real estate.
Concepts for a version of the door builder for residential owners were even explored
Wireframe Gallery
Here are some earlier concepts depicting different stages of the door builder.
The Prototype
I constructed a high fidelity prototype in Adobe XD to share with stakeholders as well as for user testing with our retailers. This allowed the users to see what it would be like to construct a door from scratch using the new interface.
Having an in-house relationship with retailers proved very beneficial as it gave me the opportunity to collect valuable feedback early on in the design process. This allowed the final product to be quickly fleshed out and I was able to create the most accurate product that would serve the needs of the user well.
Prototype Gallery
Conclusion
I was able to work closely with users and get a clear picture of what their needs were early on. This allowed me to maintain familiar user functionality in a new design that presented them with the things they needed most. The result was a streamlined process that provided a clear and easy to navigate experience that was a pleasure to use.
Although no longer at the company, I was glad to provide users with a new door configurator, which was much needed and offered them the superior experience they were looking for.
Selected Works
Prison SimInteractive Learning Object
Glossary with Flip Cards Study Tool
Various UI DesignInteractive Learning Objects
Microsite - Faculty PlaybookMicrosite
Card GuruNew Brand and Website
Student HomeApp Design
Door ConfiguratorDesktop Application