From sketches on whiteboards to pull-requests, I was responsible for using a human-centered design approach to ship the next-generation of credit risk management software for Dun & Bradstreet. I worked with technology and products teams to produce a high-fidelity prototypes and wireframes that used the unique rich data set of DNB. I also provided working code as a guide for interactions and submitted pull-requests to the front-end team to make sure our designs were pixel perfect in the final product.
The following is an example of some user flows I created for logging into our application. What was challenging about this task was that the application had a unique sign up process, account admins and a sub account creation process. Defining the user flows, creating wireframes and diagrams helped the product and development teams understand how this process would work.
Prototypes & Data Visualizations
Working to visualize D&B’s data set was a great experience because of the amount of data they had. Our team had to account for the different variations of data for millions of companies spanning countries all over the world. The best way to do this we found was to create high-fidelity prototypes of our visualizations in Axure and test them in front of existing customers. This allowed us to iterate quickly and provide detailed screens for our development teams to build from. The following is an example of some screens from our Axure prototype that shows the visualization of a user’s account usage and customer management.
I also got to use my development skills to provide detailed user interactions to our development team to make sure the user experience we envisioned in our prototype we executed properly in the final product. In this example, our product had a unique set of password validation requirements so to make it easy for a user when filling out their password. I wanted the validation interaction to happen as you type out the password in real-time so I created a Codepen with exactly how I wanted the validation work — saving our development team time in interpreting the complicated requirements.