Streamlining the mortgage process to 2x applications
The challenge
A startup was ready to grow — The Canadian Home Buyers’ Guide was on a mission to simplify the often daunting and stressful process of buying a home. Their initial product consisted of an accurate mortgage pre-qualification flow which led into a manual mortgage application.
With the MVP validated and working, more of the process could be automated by building out the app. The startup was also interested in designing a brand that would establish them in the online financial services area, and as local home buying experts.
The solution
To ensure the app stayed user-focused and cohesive as it grew, the startup hired me as the first designer. As the sole designer, with some previous marketing experience, I would also build out the brand and marketing. I even added development support on the frontend by implementing redesigned UI and new features, while starting a design system to accelerate future work.
Outcomes
The Home Buyers’ Guide succeeded in creating an enjoyable app experience for home buyers. After the initial excitement over discovering their pre-qualification budget, users are confronted with forms. Filling out forms and collecting documents isn’t exactly fun, but the user may be more motivated when it’s towards their bigger goal of getting into their own home. The app removes unnecessary friction and stress while keeping focused on the user’s true objective.
During my time at the company, we attempted to branch more into the realtor and real estate areas of the home buying process, but eventually ran out of funding. After the dissolution of the startup, the app remained active for a while as a useful tool for mortgage brokers to serve their clients.
UX metrics
- 38.8% sign-up conversion (from 13.8% over 4 mos)
- >2x pre-approval submissions
- 93/100 mobile PageSpeed (from 59)
What I did
Redesigned, faster marketing home page
As part of a small start-up, I did everything from designing the logo and business cards, to writing copy. Marketing isn’t my main focus, but the process of compiling a persona and researching competitors applies here too, as in product design.
We wanted local provincial versions of the site, but no one wants to do duplicate work, so I implemented a site generator script to quickly deploy provincial versions as business expanded.
Optimized sign-up
Iterative changes to the existing marketing page and sign-up form design informed the redesign and led to a high-converting version.
The sign-up flow also included a few personalization questions before asking for the user’s information. The hypothesis is that users will feel more invested and aligned before creating an account. The content of this step was mainly unchanged with the redesign, but surrounding factors could have improved its perception.
Doubled pre-approval form submission rate
Before changes to improve UX, 5.9% of users completed the pre-approval step (5th image). After, 14.8% submitted the form in one session.
✉️
Automated email follow-ups if user has not progressed
After sign-up, further reduced friction in the core app experience with:
- Guidance and introduction to the real human that would help along the way
- Smooth transitions and visual progress indicators on the stepped pre-qualification flow
- Highlighting the next step and tracking progress on the dashboard
- Automated emails to deal with drop-off between forms (saving manual effort from the mortgage underwriters)
Complex form design
The pre-approval application page is an example of a somewhat complex user input screen that needed to ask for a lot of information, some of which was sensitive or conditional based on answers given previously.
Form layout and style — On larger screens, the form mimics a traditional paper form but with greater whitespace for readability. We used the (now deprecated) Material Design underline-style fields from a 3rd-party code library. This style is more widely known to provide a poor UX now, I think it might work in the paper-like form. An updated design could use conventional bounded web form elements with top labels.
Conditional sections — An option to add extra addresses or jobs appear if the time entered doesn’t meet the requirement.
Longer forms — If a user had previously stated that they have a co-applicant, the whole form is copied into a collapsed section with their name.
Starting a design system
Starting a design system at the same time as building a product at a busy startup may seem like a time sink, but it saved me work on the very next features.
Instead of designing every possible element, I started with what we were already using, and added more components as the need arose.
Customer journey and document submission experience
The app started with the budgeting phase of the home buyers’ journey as they are seeing what they can afford for a mortgage. The next step was to move further into automating the financing stage. Here’s the process of a feature supporting that goal.
Customer Journey map informed by user and stakeholder interviews. It includes online and offline activities in the user experience. Dash-outlined areas show opportunities to expand. (Originally designed as a printable poster.)
Problem
Lenders need proof of an applicant’s financial situation to give a mortgage, but collecting proof (documents) is a hassle:
- Usually done in person (takes time) or over email (insecure)
- Different documents are needed depending on the unique applicant’s circumstances
- There may be a lot of pages...
- ...and then someone submitted poor quality files and it needs to be redone
How might we... get the client’s documents to the lender in a quicker, secure way?
Outcomes — Underwriters reported that the submitted documents were correct and good quality, helping them complete applications sooner.
Recordings from Hotjar confirmed that users were successfully using the document center.