Userflow

The first challenge was to map out all of the possible journeys an applicant could go on. The choice of refinancing or purchasing a home gives us 2 journeys. In each of those, whether the home is the one they are living in or own as an investment then becomes 4 possible journeys, and it goes on.

We couldn't move forward without mapping this out because we're afraid of something appearing later and then being shoved in (which sometimes happens anyway, but we should always try to minimize that).

Seeing the complete flow made it easier to bundle tasks together, which came to be the navigation in the wireframes. It also helped build a checklist of all screens needed to be designed, which gave us a better handle on projecting the timeline.

Wireframes

In one of the simpler walkthroughs of the form, there were still over 50 interactions - typing in text fields and selecting radio buttons all included.
So we broke up the structure into two phases: the first phase would be a set of simple, straightforward questions any user with an interest in a home loan could go through. The second phase would be the rest of the form, with all the finer details that upon completing, would be the end of the journey.

Breaking the flow up into two phases achieves two important things:

‍It rewards the user early on in their experience. At the end of the first phase, they're presented with a summary of what they've completed - real information, their information. They can attach to what's in front of them, and so we ask for their name and email to save their progress if they'd like to continue. We've established a valued checkpoint for the user, and a contact point for Yard.

‍This flow also gives the user flexibility in their decision making. This checkpoint prompts them to consider their commitment to the application, hence the request for some personal details. Rather than slipping them into a lengthy application they're not ready to do and quit halfway in, they get some value from what they've done, and can stop if they like to.

Brand & Website

Through workshops with the Yard team and lots of exploration, we settled on a brand that’s honest, friendly and intelligent.We wanted Yard to appear capable of handling the complexities of this journey, but also assure the user it would be transparent and fair, that any bit of stress was not needed.

The project was rounded out with a website that showcased the core elements of Yard, which we did with my classic take on websites - minimal, modern and filled with simple storytelling that just makes sense.

UI & Design

Given the repetitive components in the form (text fields, checkboxes, buttons), we created all the symbols in Sketch so designs were consistent and easy to scale. So, we drew out and defined every state of input fields, heading style, containers and navigation elements and all the rest of the things.

Result

Yard launched in early 2019 with a competitive 2.91% variable rate and 2.94% comparison rate.