Streamlining the investment mortgage lifecycle from
origination to securitization
Project Date | March 2020
Platform | Desktop Website
Design Tools | Figma, Usability Hub
My Role | Project Manager/Visual Designer
WHO IS elphi
Elphi is an early-stage start-up that is taking on the mortgage processing industry head-on. They are building software that makes the loan application process less painful and arduous on the borrower side and speeds up mortgage processing on the lender side.
Their company goal is to white label their software to mortgage brokers and they would like a redesign to keep the interface fresh and efficient.
WHY THE REDESIGN
Current platforms are difficult to use, typically causing users to abandon the application process. The current industry standard for online application conversion is 30%-40% depending on the lender; elphi would like to increase this to 80%.
My design team was called to elevate their current design to a fresher, more motivating user interface within a 4 week timeframe.
“Users expect a smooth, intuitive interface but are typically met with bloated, redundant systems that cause aggravation and typically end in abandoned applications” -Daniel G., elphi COO
Redesign the responsive web design of the borrower-facing POS origination to eliminate borrower pain points, create more efficiency in their logic-branching loan application process, and promote application completion.
Deliver a style guide of solid layout and UI components ready for the white labeling of their software to mortgage brokers.
STARTING WITH THE BASICS
VISUAL COMPETITIVE ANALYSIS
After meeting with the client to discuss design expectations and better familiarize my team with elphi's target audience, I conducted a visual competitive analysis to see the current lay of the land.
This was the first opportunity to understand what is currently working in this industry and where my team could implement innovation and help set elphi apart from their competitors.
Progress bars help to motivate and gamify arduous applications.
Vertical scanning in forms promotes vertical momentum and prevents Z-pattern eye scanning.
A minimal design with consistent looking form fields creates calmness.
Collecting our brand research and competitor analysis,
I created a style tile displaying the redesign direction. I wanted to combat the intimidation of lengthy applications with subtle, inviting colors and minimalist design, yet keep the professionalism.
With a more engaging color palette to build the UI elements with, I was able to create a neutral, yet friendly appearance.
Through this brand exploration, I was reminded again of the delicate balance between setting a brand apart meanwhile keeping it in the same recognizable realm as their competitors.
Going forward I knew one of our main goals would be to elevate the design to a place users would find refreshing yet not unfamiliar.
A FORK IN THE ROAD
Upon closer examination of the previous screens, my team and I found some concerning UX issues that quickly became our priority concern. It was clear that these needed to be addressed before updating the UI.
This meant dedicating the 2nd week towards defining the problems and ideating solutions. Although overwhelming given the project's limited timeframe, these design problems had uncomplicated fixes. By simply applying what we already knew best practices of web forms to be, I was able to quickly lead the team towards solutions.
The real obstacle was persuading the client of our design changes. To best do this, we needed to present the client with user-backed research -- we needed to test our assumptions by performing visual design tests.
VISUAL DESIGN TESTING
The most important issue to test was the selection options. Did users prefer horizontal selection options that elphi was currently using? Or did they prefer the standard vertical radio options? (In the next section you will see this issue in more depth).
"The vertical list format feels more accessible."
- Participant A
"This is easier because it’s the standard multiple choice type of questions which is used almost everywhere and people are more familiar with."
- Participant B
- 40 participants
- 58% of participants preferred vertical selection options.
This process of testing the UX changes was an unexpected constraint that called for more time than I anticipated -- nearly 2 weeks to be exact. However, the end goal and one of the design principles was to create an intelligent design. This step was vital in achieving this expectation and getting the client confidently onboard with our redesign.
Backed by my teams research and visual design testing,
I improved upon the following designs: progress indicator, web form usability, and transparency.
Defining the Problem
The previous progress indicators were grouped in the side navigation, combining two important user tools in the same, limited area.
Many competitors used progress bars to indicate the user’s status. This tool helps the user stay more engaged with their progress. I chose to add this in to gamify the arduous form filling experience and motivate the user using visual feedback.
USABILITY OF WEB FORMS
Defining the Problem
The previous design had horizontal scanning of selection buttons. This took the user’s eye in a zig-zag pattern across the form, slowing the application process. Some buttons had 2 lines of text creating additional zig-zags. It also wasn’t clear that the user could only select one option.
Successful web forms generate and maintain user momentum. By simply changing the direction of the selection options to vertical scanning I created vertical momentum, speeding up the application process via the eye being now able to fluidly go down the form. Radio options also indicated that the user can select only one option.
Defining the Problem
elphi utilizes logic-branching questions to create a more customized form. However, their previous solution resulted in the sudden appearance of additional hidden questions that were not forthcoming. The implications of this previous design blindsided the users and created transparency issues.
In this redesign I wanted to make visible the possible add-on questions without having to hide anything from the user. I created a question branching form design which displays any additional questions as deactivated card titles that will active and expand depending on the applicability to the user’s previous selected option.
It's easy to want to please the client, but being a successful designer means remembering that I am the expert that they hired and that I have the tools to help their product succeed. Essentially, a designer's job is done right when the design first satisfies user's needs and accomplishes the client's business goals.
This was a great experience in learning how to make strong cases to the client and maintain a working relationship with them throughout.