Streamloan
A web responsive app making the mortgage application process a breeze
About
Streamloan launched after one of its founders experienced severe inefficiencies and annoyances involved in the home loan application process. Launched in 2015 as white labeling software for banks, Streamloan streamlines the mortgage application process through its mobile iOS platform.
Design Challenge
Our design challenge was to translate Streamloan's existing mobile iOS app into a web responsive platform. Through this design process we made improvements to existing flows and visuals, all while keeping in feel to Streamloan's existing brand guidelines.
Role: UI Designer
As primarily a UI Designer on a team of 5, my role during this 6-week intensive sprint consisted of analyzing current processes, ideating lo-fi wireframes, synthesizing the team's working style guide, generating hi-fidelity wireframes and performing user testing.
The Cliff Notes
Translating a Native iOS app to a web responsive platform on an 11 person design team within a 6-week timeframe was a complex and challenging process. The team strategically broke down into two micro-teams including both UI and UX teams which were further broken down by application sections. As a UI Designer of the home section, I analyzed current processes in the Native iOS platform, performed iterative lo-fi wireframe development, generated hi-fi wireframes for user onboarding, synthesized the UI team's working style guide and performed user testing.
Below shows our ultimate translation of the web responsive design for the home loan folder. Feel free to also click through our Marvel tablet prototype.
Ultimately, we delivered an MVP that performed well with users and established a strong foundation for Streamloan.
Design Process
So how do you apply for a mortgage?
To launch this project, considering the team knew very little about the mortgage process, we first took it upon ourselves to understand how one applies for a mortgage and where in the process Streamloan was stepping in. To learn about this foreign process, we mapped out a home buyer's mortgage process through a task flow. This first step really helped us begin to understand this complex and confusing process as well as what part of the process Streamloan was addressing.
Understanding the Native iOS Existing Architecture
Next on our agenda — we needed to understand how the existing Native iOS application worked. We charted the existing information architecture and began to look at initial ideas for translating the app first to web for mobile and then to web for desktop. We took it upon ourselves to work with mobile first as mobile constraints are more stringent.
Iterative Wireframing
Through a series of developments, the team produced 4 major iterations of the design, from lo-fi to hi-fi for both mobile and desktop. Being assigned to the home section team, 3 of us collaborated closely together. On the home team, I specifically worked on desktop translation within the home loan folder as well as first time user experience in creating a loan folder. Below you can see an example of our home loan folder iteration process for desktop.
Working Style Guide
Prior to jumping in to mid/hi-fi development, the UI team created a working style guide using Adam Frost's system design approach called Atomic Design. Frost uses the analogy of chemistry as an outline for building pages (e.g. building atoms first, to create molecules, to create organisms, to make templates and to eventually, create pages). Fundamentally, this building block approach improved efficiency and provided a smart working system in case UI elements needed to be altered in the future.
My specific role involved compiling the various sections of the style guide within Sketch and organizing the final structure by incorporating naming conventions, refining symbols, and creating smart styles. Below is a quick gif showing our working style guide:
Hi-Fi Wireframes
After incroporating use of the working style guide and a few more iterations, we ended up with a final deliverable screen set that we ran user testing on. Below are a few of the primary screens we developed:
Property List
Loan Folder Checklist
Accounts
Messages
Prototypes
In order to reach valuable insights from testing, the team created two working prototypes for mobile and desktop. Below is a quick gif of the desktop (shown in tablet) prototype displaying some of Steamloan's key product features. Feel free also to browse more extensively through the actual Marvel prototype.
Testing + Results
Using a series of usability and comprehension styled questions, we performed user testing on 4 mobile and 5 desktop users. Users ranged in familiarity with the mortgage application process from never applying to a mortgage to applying to several. Below were some of our findings: