My UX Toolbox

Design System, Whiteboard, Wireframe, User Flow

User experience design is a very iterative process. I use different tools and processes for different business needs and projects.

During the process, I communicate with the stakeholders, developers, managers and other team members to get buy-in for the design concepts.

The examples below represent tools I use to convey ideas and functionality to the development team and users.

UX Toolbox

Design System

Four years ago, rateGenius started a complete overhaul of an 18-year-old Loan Origination Software (LOS) system. I designed the new platform (B) based on the consumer-facing website (A). Last year, rateGenius was rebranded with a fresh look and feel (C). I created a design system in GitHub using some of the elements of the new site (D).

View Living Design System

rateGenius Design Systems
rateGenius Colors

Whiteboard and User Flow

In this rateGenius project, we discussed an idea of how to get a customer’s approval to pull their credit. This is a compliance requirement called Permissible Purpose. We wanted to display if the customer granted, denied or if the decision was pending. Below is a whiteboard drawing of an initial idea I had.

rateGenius whiteboad

Here is a user flow I created in Lucidcharts for the Permissible Purpose project mentioned above in whiteboard.

rateGenius userflow

Wireframes

In the very beginning of the redesign project for the business workflow, it was agreed that a task-based approach was needed so that the user understood which applications called for their attention. The Legacy version used an overall “status” approach where users had to determine which applications out of thousands must be moved through the process.

This is an early Balsamiq wireframe I created to show what information a fulfillment team member could see when they logged into the portal.

rateGenius wireframe

User Flow

In this project, we needed a way for the loan officer to opt the customer in or out of rateGenius communications. This is a compliance requirement, so I wanted it to be as easy as possible for the loan officers.

Within the edit mode of the application, the user can opt in/out a customer using the icons next to the contact information. Once they save this selection, the application updates to the appropriate preference. This would also disable/enable the “link” to the phone numbers and email addresses.

Here's a user flow map I created in Balsamiq.

rateGenius user flow

Interactive Prototypes

Here's an interactive prototype of an address manager feature where I used HTML, CSS and the front-end framework.