Bulk Editing Feature

Builders Capital is a private construction lender, having originated over 1.4Billion in loans last year alone. As such, it’s important to obtain as much information as possible for our loan officers to properly vet potential borrowers. However, these users were giving up part way through the loan application process because it was too tedious to fill out. You can see how long it took in the “Before” gif below.

My mission was to create an easy and fast way to input large amounts of information. See “After” gif.

AFTER

BEFORE

This is a GIF of after the bulk edit feature was released in our application. Inputting lots of data is now much easier!
 

THE Basics

ROLE: Sr. Product Designer

CHALLENGE: How do we make it easier for our borrowers to input large quantities of information?

TOOLS: Figma, Azure DevOps

METHODS: User interviews, Comparative analysis, Iterative design process, Usability testing

TEAMMATES: A great group of front end developers

TIMEFRAME:

  • Design + Research: April - May 2022 (2 months)

  • Development and QA: June - October 2022 (5 months)

 

Comparative analysis

I make it a practice not to reinvent the wheel, so I looked at how 5 companies edited mass amounts of data at once: Loom, Pipedrive, ADO, Monday.com, and Figma.

ADO and Figma use software that is for specialized jobs. I had to be conscious of my bias here because although I use both applications, our Builders Capital borrowers aren’t tech savvy. Upon investigation, our borrowers are more accustomed to applications like pipedrive and monday.com, which I used as my inspiration for the final solution.

Picture of Pipedrive's bulk edit feature

PIPedrive

Select multiple rows and edit each field type using the dropdowns in the right-side drawer.

Picture of ADO's bulk edit feature

Azure Devops (ADO)

Not for the faint of heart, ADO’s approach to bulk editing is powerful and can be complex for novices.

Picture of Figma's bulk edit feature

Figma

First select multiple layers, then right click to edit all layers at once or use the right side drawer.

 

Iterative design process

Picture of the Iterative Design Process

You’ve played the game telephone, right? It’s always funny how messages become garbled and end up completely different that was was originally whispered.

As a Product Designer, I am a subject matter expert on the feature I’ve designed and helped scope. When working in teams, I like to walk with features through the iterative design process of research, design, development and release so that the feature’s message and intent doesn’t become garbled. I also find that this approach provides consistency and team alignment, which makes for an easier and more fun work environment!

 

getting Stakeholder buy-in

Gosh, I’ve worked at a company where my primary stakeholders hated the product I worked on since before I even started there. There was nothing I could do to make them like it as it was, but over time, as I consistently got their feedback and buy-in about new features, I started to gain their trust for my team and the product we worked on.

That’s an important story to me - it illustrates how critical it is to loop in stakeholders at the very beginning of the research and design stages, while also continually keeping them in the loop until deployment.

That’s exactly what I did for this bulk edit feature; I looped in my primary stakeholders early and consistently throughout the process so that their voices were heard at every turn. This made for the most successful launch the Builders Capital tech team has ever seen.

Designing & Writing user stories

Picture of an example user story

Preferably, I work in tandem with a business analyst and together, we use my wireframes to ferret out all requirements that need to go into a user story. On this feature however, I was ridin solo. I’m very thorough so I created flows for all of our loan products because the bulk editing feature would need to behave differently for each product.

Having something visual to look at during stakeholder collaborations, helped me steer the conversation and ensure we were all on the same page. By the time I was done scoping, I had solid hi-fidelity wireframes and thorough, requirement-filled user stories.

Assisting the developers

When developers are building my features, I consider myself “on call” to answer any of their questions. I also led Sprint Plannings and created loom videos of me walking through user stories, wireframes, and explanations of business logic to revisit anytime there were questions.

Picture of my wireframe and picture of what was actually deployed
 

prepping for Deployment

QA Testing

In addition to our QA team testing each User Story against the acceptance criteria, I spent two weeks running flows and logging bugs to make sure we got this feature right.

user testing

After intense QA analysis, I conducted users testing in groups and held:

  1. Hour session with three Business Relationship Managers (these folks work with our brokers and borrowers the most, so other than our customers, they give me the best feedback)

  2. Hour session with five Loan Officers

  3. Half hour session with two Brokers

Inter-Departmental Collaboration

I said it before, I’m thorough. I wanted to ensure this feature launch was the best Builders Capital had ever seen so I worked with our Marketing Department and Learning & Development for all training and external communication to launch at the same time the feature was deployed.

Demo with leadership

Our leadership team was heavily invested in this feature. They wanted to alleviate the tedium for our borrowers just as much as I did, so after all bugs were fixed, I scheduled a half hour demo with our C-Suite. Because I had been getting their buy-in since the research phase of this feature, I wasn’t surprised it met all their expectations.

Before and after pictures
 

#winning

This new feature was a major win. Here are some impacts:

  1. Huge time savings

    1. 55% time savings to input 10 duplexes

    2. 31% time savings to input an apartment building with 20 units

  2. Removed unnecessary inputs! Through user interviews, I found that we were unnecessarily asking for the As-Is-Value (AIV) per unit being built. Not only that, but our users were actually dividing the entire project’s AIV by the number of units, to get the AIV per unit. After running this up through my primary stakeholders and leadership, I was able to remove these unit-level fields and re-use the pre-existing project-level AIV field for the internal calculation that needed to run. Whenever possible, I love removing unnecessary data entry!!

  3. Re-used this bulk edit component on 4 unique pages of the application! It’s my mission to always create re-usable components that fit nicely inside the company’s design library.

  4. Reduced user frustration and human errors. Created system calculations, so users wouldn’t have to get out their calculator and scratch their head. #worksmarternotharder

  5. Gave myself a pat on the back for spearheading the first ever well-planned and coordinated feature launch at Builders Capital