Research
Identifying ways to improve the commercial application experience
The first iteration of the Home Depot commercial credit card application had several issues with it, most saliently the overuse of dropdown drawers. While the were effective for condensing information, the many form fields and content dependencies quickly could cause them to become unwieldy and for error states to abound. We also recognized that much of the content was dependent on applicants' previous entries, and so we thought there could be a better way to lead them through the form without having to move back and forth or see content that was unnecessary given their previous responses.
Flow Mapping
Setting up the application to be successful for users
The biggest breakthrough we devised to solve some of those earlier issues we encountered with the previous iteration was the progress landing page, which we thought could serve as an inflection point, a review state, and a filter of sorts. This page would split the application into more bite-sized pieces that would reduce the proliferation of visible error states or the need to move backward or forward within the application. Once we established this pattern, the answers to the future problems we would have to face of saving and editing became more clear.
UI Buildout
Defining a streamlined atomic design system to build from
Finally, we needed to create a UI library of elements we could build from to keep the application looking consistent and clean. This would include headers and footers, buttons, text and links, form fields, cards, and colors, among other things. This way building out each page would be more streamlined and we could change each part quickly across the application if needed. The Home Depot logo, colors, and colors would be featured prominently.
The Home Depot Commercial Credit Card Application Update
The place we arrived at with the updated version of The Home Depot Commercial credit card application as a much more intuitive and easy application experience that we felt took into account the complexities of the information and presented them in a more digestible form. The spreading of the form fields across more bite-sized pages as well as the way-finding aspect of the progress landing page would lead the applicant through the flow with minimal drop-off, and would result in more successful sign-ups. Finally, the ability to save and edit would be built into the fabric of the experience from the start.
See the clickable prototype
Edit and Save
Functionality
Result
We created an application that would lead to less drop-off, meaning more benefits for customers.
One of the leading factors that Citi/The Home Depot was pursuing in this rebuild was the ability to collect more information on where customers were getting confused or dropping out of the application. This vision factored into the way we set it up from the get-go, most notably in the separated pages and sections we devised for dividing the form fields. We knew that this would provide a platform not only for customers to better sign-up for their new business card with The Home Depot, but also a way for our client to recognize how to make the application better and improve upon it.
