Brand Identity for Real Estate Brokerage App
Objective. Polish the UX/UI for bank loan iOS app
Background. Digital Alchemy is a white label financial product for real estate brokers and agents. It non-intrusively guides home owners and house hunters through each stage of the complex home financing process with in-depth information uncommonly found in tools for mass markets.
Duration. 9 months, completed in 2017
Approach. I worked with Digital Alchemy's leadership team to refine their existing UI and provide branded mockups for client presentations. For particularly cumbersome interactions, such as searching for properties on a map, messaging, and reviewing ever-changing mortgage rates, I presented multiple user flows and animation for them to consider.
Mortgage Options
Keeping an eye on interest rates is top-of-mind for house-hunters. I explored a few design concepts that would allow users to cycle through saved mortgage rates without having to navigate through the app to get to them.
![My Account My Mortgages Font Updates My Account My Mortgages Font Updates](https://karikdesign.com/wp-content/uploads/2022/10/My-Account-My-Mortgages-Font-Updates.png)
Saved mortgages. The ability to save mortgages made it easier to shop for the best rates.
![Digital Alchemy Tab Bar Discussion Notification Orig Digital Alchemy Tab Bar Discussion Notification Orig](https://karikdesign.com/wp-content/uploads/2022/10/Digital-Alchemy-Tab-Bar-Discussion-Notification-Orig.png)
Shortcut for saved mortgages. Mortgages were displayed in the tab bar to help keep an eye on fluctuating interest rates.
![Digital_Alchemy_Tab Bar My Mortgages Summit Opt 2 Digital_Alchemy_Tab Bar My Mortgages Summit Opt 2](https://karikdesign.com/wp-content/uploads/2022/10/Digital_Alchemy_Tab-Bar-My-Mortgages-Summit-Opt-2.png)
Stock-ticker style mortgages. This design treatment allowed users to glance at interest rates without having to interact with the tab bar. They could drag along to view previous and next rates.
![Digital_Alchemy_Group 158 Digital_Alchemy_Group 158](https://karikdesign.com/wp-content/uploads/2022/10/Digital_Alchemy_Group-158.png)
Expanding tab bar. A long-press would animate to display mortgage details, and allow the user to cycle through a few saved mortgages.
Mortgage Application
The app drastically reduced the burden of finding properties, gathering and comparing mortgage estimates, and hunting down loan officers' contact information. Once a house-hunter found their ideal property, the app made it convenient to connect them with a loan officer directly to begin their mortgage application.
![Summit Cash to Close May 2017 Summit Cash to Close May 2017](https://karikdesign.com/wp-content/uploads/2022/10/Summit-Cash-to-Close-May-2017.png)
Dynamic sliders. Users could explore financing options based on their desired downpayment.
![Summit Saved Loan Estimates Summit Saved Loan Estimates](https://karikdesign.com/wp-content/uploads/2022/10/Summit-Saved-Loan-Estimates.png)
Saved for comparison. Weighing the pros and cons of each loan was made easier by consolidating saved estimates in one place.
![Digital Alchemy Summit Cash to Close Total Expanded Digital Alchemy Summit Cash to Close Total Expanded](https://karikdesign.com/wp-content/uploads/2022/10/Digital-Alchemy-Summit-Cash-to-Close-Total-Expanded.png)
Cash-to-close. Cash to close is a complex set of calculations, so scrolling is required to see it all (hover to scroll).
![Digital Alchemy Loan Application Request Digital Alchemy Loan Application Request](https://karikdesign.com/wp-content/uploads/2022/10/Digital-Alchemy-Loan-Application-Request-1.png)
Convenient in-app messaging. Rather than having to hunt down a number for a loan officer, users could simply click a button to be connected with one in-app.
![Digital_Alchemy_My Account wLoan Application In Progress Digital_Alchemy_My Account wLoan Application In Progress](https://karikdesign.com/wp-content/uploads/2022/10/Digital_Alchemy_My-Account-wLoan-Application-In-Progress-1.png)
Loan Application Status. Once an application is submitted, house-hunters can see the status as it moves throughout the lengthy approval process.
![Digital Alchemy Contact Loan Officer Modal Digital Alchemy Contact Loan Officer Modal](https://karikdesign.com/wp-content/uploads/2022/10/Digital-Alchemy-Contact-Loan-Officer-Modal.png)
Recent Threads. If a discussion had previously been initiated, the thread would conveniently appear above the message box so users didn't accidentally contact multiple loan officers.
![Digital Alchemy Mortgage Application Status Rev Digital Alchemy Mortgage Application Status Rev](https://karikdesign.com/wp-content/uploads/2022/10/Digital-Alchemy-Mortgage-Application-Status-Rev.png)
A face to go with a name. The loan officer's portrait appears next to the status bar to reassure the user they're in good hands.
![Digital Alchemy Mortgage Application Status Filled Digital Alchemy Mortgage Application Status Filled](https://karikdesign.com/wp-content/uploads/2022/10/Digital-Alchemy-Mortgage-Application-Status-Filled.png)
Confirmation. Once the loan is approved, a confirmation message is displayed, and the loan application process is marked complete.
Messaging
Discussion threads support conversations with verified loan officers assigned via the app, as well as personal contacts, such as a spouse who may need to co-sign documents. Images, property links and documents are consolidated from messages in a separate area for easy reference.
![New Message Type to Search Contact New Message Type to Search Contact](https://karikdesign.com/wp-content/uploads/2022/12/New-Message-Type-to-Search-Contact.png)
New Message. Contact names would populate as users typed.
![Digital_Alchemy_Discussion Landing Digital_Alchemy_Discussion Landing](https://karikdesign.com/wp-content/uploads/2022/10/Digital_Alchemy_Discussion-Landing-1.png)
Message inbox. Arranged with most recent messages on top.
![Discussion Contacts - Search Agents Discussion Contacts - Search Agents](https://karikdesign.com/wp-content/uploads/2022/12/Discussion-Contacts-Search-Agents.png)
Contacts. Loan officers' images were automatically imported, and were used to help build trust.
![Digital_Alchemy_Discussion Contacts Copy Digital_Alchemy_Discussion Contacts Copy](https://karikdesign.com/wp-content/uploads/2022/10/Digital_Alchemy_Discussion-Contacts-Copy.png)
Contact search. Dynamic search made it faster to find contacts by typing the first letter or two.
![Digital Alchemy Discussion Shared Empty State Digital Alchemy Discussion Shared Empty State](https://karikdesign.com/wp-content/uploads/2022/10/Digital-Alchemy-Discussion-Shared-Empty-State.png)
Shared—Empty State. Until property links or documents are shared, this is displayed.
![Digital_Alchemy_Discussion Properties 3 Msgs Digital_Alchemy_Discussion Properties 3 Msgs](https://karikdesign.com/wp-content/uploads/2022/10/Digital_Alchemy_Discussion-Properties-3-Msgs.png)
Shared Content. Both property links and documents could be communicated in-app, cutting down on cluttered email inboxes.
![Digital_Alchemy_Messaging Archived Animating 1 Digital_Alchemy_Messaging Archived Animating 1](https://karikdesign.com/wp-content/uploads/2022/10/Digital_Alchemy_Messaging-Archived-Animating-1-1.png)
Message archives. Discussions can get long, so the app archives them by month. Tapping on the count unfurls them for viewing.
![Digital_Alchemy_Discussion Message Thread wAttachments Digital_Alchemy_Discussion Message Thread wAttachments](https://karikdesign.com/wp-content/uploads/2022/10/Digital_Alchemy_Discussion-Message-Thread-wAttachments.png)
Unarchived messages. After a session, the messages archive again to keep threads tidy. (hover to scroll)
![Digital_Alchemy_Discussion Shared Digital_Alchemy_Discussion Shared](https://karikdesign.com/wp-content/uploads/2022/10/Digital_Alchemy_Discussion-Shared.png)
Built-in organization. Important content is consolidated in one place keeps all parties organized throughout the process.
![Digital_Alchemy_View Shared File Portrait Digital_Alchemy_View Shared File Portrait](https://karikdesign.com/wp-content/uploads/2022/10/Digital_Alchemy_View-Shared-File-Portrait.png)
Save time uploading. Rather than using a scanner, users could take pictures from their phone and upload important documents to keep things moving.
![Digital_Alchemy_View Shared File Expired Digital_Alchemy_View Shared File Expired](https://karikdesign.com/wp-content/uploads/2022/10/Digital_Alchemy_View-Shared-File-Expired.png)
Automatically locked content. As an extra security precaution, sensitive documents could be set to expire after a number of days.
You must be logged in to post a comment.