2021 | UX/UI Design, Brand Design, Mobile App
A seamless digital experience designed for future and current homeowners to apply and review their mortgage loans online.

When applying for the right kind of mortgage loan, there is a consistent lack of guidance which requires customers to spend extra time doing extensive research before applying.

To remedy this issue, I re-designed Rhinebeck Bank’s current website to a responsive, mobile-friendly site that will create a clear and cohesive experience for users when applying for a mortgage loan online. The site will enable users to interact with the tools and resources provided directly on the site to make their loan application process as seamless as possible.

Rhinebeck Bank has been an integral part of the economic growth and a driving force for commerce along the Hudson River in upstate NY. Their mission is to help people and businesses flourish in the communities they serve. This is primarily done through lending money to new and existing businesses, new home buyers and those who need a new or used car. The Bank is looking to guide their growing community, and make an impact by delivering an easy to navigate and mobile-friendly digital experience for their customers.

THE CHALLENGE

Help users apply for a mortgage loan directly through Rhinebeck Bank's site while expanding the Banks's customer base and increasing customer satisfaction.

THE OUTCOME

A fresh product and simple user experience that allows users to bid and auction digital assets.

RESEARCH

When you’re under 30, applying for a mortgage loan seems daunting and arduous; that makes loan lending to a younger crowd a tough sell for Rhinebeck Bank. To find a way to become relevant to younger generations I analyzed what competitor banks and tech companies are doing to help make the process of applying for loans easier. I compared different corporate banks, digital mortgage lenders, and fin-tech companies to get a better scope of the market and understand current trends.

After reviewing analogous industries, I discovered that corporate and longer established banks like Wells Fargo and Chase have a better reputation based off their reliability, but when it comes to having a smooth and inclusive digital experience, fin-tech and digital mortgage lenders like Better.com, Chime and Varo take the cake.

To further my research I met with five people from the ages of 31 to 36 who have experience with applying for a mortgage loan. The main frustrations people shared about the loan application process is waiting for approval, high interest rates, and collecting numerous documents and statements that are required. I found that most people rely on finding information about applying for a mortgage loan online through their own research. My research revealed that a user's main motivation when choosing a lender is good customer service and a lender that aligns with their job or comes with extra assistance or benefits.

DEFINE

Based on the information I gathered from my competitive analysis and interviews I was able to create a two user personas to represent Rhinebeck Bank's common customers. This process helped me understand what was actually needed to fit the Rhinebeck Bank's customer’s needs. Meet Andrew and Sue.

INTERACTION DESIGN

After doing the research and identifying the user’s main pain points, goals, and motivations, I began to work on building a sitemap with the necessary information and features to ensure a smooth experience for the customer. To begin I wrote down a list of features based on their priority level.

Feature Roadmap

MUST HAVE FEATURES:

• Responsive site
• Login / Sign up
• Navigation Options
• Search Bar
• Products Menu
• Get Started CTA
• Account /Privacy Settings
• Contact Us
• FAQs / Learn More Section
• Manage Application

NICE TO HAVE FEATURES:

• Tools and Resources
• Company About Page
• Language Translator

CAN COME LATER:

• Social Media
• Blog
• Live Chat with Agent
• Mobile App

I continued my exploration with a user flow to illustrate the main tasks a typical user would complete in order to apply for a mortgage.

Wireframes

When beginning to create the wireframes I wanted to research alternative ways to arrange the navigation bar and display information on cards. I searched through Dribbble, Google, competitor sites and other resources to find design patterns that worked well to solve the problems on Rhinebeck Bank's current site.

UI DESIGN

After putting together the wireframes, I began to work off Rhinebeck Bank's visual identity to stay true their personality. I mainly focused on refreshing the UI elements and design libraries to create a clean, yet modern look and feel through out the site.

It was important to add characteristics that will create trust between the bank and the customer, and colors in places that will soothe and guide the user while browsing. I used soft orb like shapes in the background and added round edged icons to achieve this approachable feel.

I went with Halyard Display as the main typeface because it is very similar to the logo, and because it also exudes an approachable feel overall.

TEST

Testing the product is essential to gaining a deeper understanding of a potential users, frustrations, and goals when interacting on the site. To begin to get ideas into the hands of the people I was designing for I created a desktop prototype that allows a user to apply for a mortgage loan on Rhinebeck Bank's website. It was important to note how testers navigate through the site and observe any areas of difficulty when completing the tasks.

I met with four participants from the ages of 24 to 40; all participants shared their screens and voiced their thoughts while navigating through the pages. The main task given was to browse through the homepage and complete the application process to apply for a home. Within the first rounds of testing I was able to see that users generally don't spend time reading through the information on the homepage and prefer to select the primary CTA's to get a feel of how easy or how complicated the process will be. There were comments concerning the order of steps to take when wanting to buy a home. The testers wanted to know whether using the mortgage calculator was a mandatory first step or if all the steps interchangeable. Some felt like providing more context could be useful in guiding the user in this process. Fortunately everyone was able to arrive to the online application and found the onboarding scripts and questions to be helpful and concise. Overall the testers were able to complete the task of submitting their application without any errors.

END RESULTS

After gathering feedback from the testers I was able to begin iterating on the design. Meeting with people and utilizing their feedback was a critical part towards discovering the main problems users face when exploring an unfamiliar process like applying for a mortgage loan. My insights reveal the importance of simplifying the process so that it is accessible to both new and experienced home owners.

I’m content with how the navigation bar is kept minimal to easily narrow down options a user would potentially be looking for. Having access to all the relevant information directly on the homepage keeps the process simple for the customer and makes it easy for them to interact with the rest of the site.