Rhinebeck Bank

Mortage Center

2021 | UX Research, UX/UI Design, Responsive Web Design

A seamless digital experience designed for future and current homeowners to apply and review their mortgage loans online.

As the sole designer on this project, my tasks involved UX research, user interviews, competitor analysis, mapping the user flow, creating wireframes, responsive UI, and building a rapid desktop prototype. This is my individual work that I created as an assignment through Designlab’s UX Academy.

OVERVIEW

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 project results will translate into expanding its customer base and increasing customer satisfaction.

THE CHALLENGE

Build a responsive, mobile-friendly website that creates a cohesive and concise experience for users when applying for a mortgage loan online.

OUTCOME

A simplified experience and comprehensive product that aims to guide and educate potential homeowners in their journey towards applying for a mortgage loan.

UX 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 a mortgage loan 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 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 take the cake.

I interviewed people from the ages of 31 to 36 to better answer what matters most to people when they applied for a mortgage loan. All participants revealed that they mainly prioritized low interest rates when they were choosing a lender and were mainly motivated to complete an online application for its convenience. Most users relied on finding information about applying for a mortgage loan online through an outside source such as Google. Everyone felt that the most frustrating part about the application process was waiting for approval, while one participant mentioned that the most frustrating part was collecting numerous documents and statements that are required.

DEFINE

So how to define the main demographic Rhinebeck Bank is trying to reach? I developed two main personas that could summarize the different patterns I found within my research.

INTERACTION DESIGN

After identifying the user’s main pain points, goals, and motivations, I began to work on building a site that was both convenient for the user and made information easy to understand. I created a sitemap to illustrate what a user would see when arriving on the Mortgage Center hompage, and how the information would encourage and guide them to use the tools and resources, and ultimately to the online application process. There is a good amount of information that needs to be presented to the user in order to guide them in the right direction during this process, that’s why it was the most challenging to build a sitemap that would accurately present information. It was important to build a simple navigation bar that is not over crowded and to create a homepage and langing page that guides the user with minimal links or external pages.

I continued my navigation exploration within a user flow to illustrate the alternative paths, key user actions, and decision points our users might face. When would they decide to start the online application? At what point would reviewing the tools and resources help with that decision?  I wanted to give users the chance to browse the products menu, help center, and mortgage process prior to applying online. Users can choose to browse through the tools provided to help narrow down their search or skip browsing through the informational pages and quickly access the application process which will also provide relevant information and tools. The will provide the flexibility users are looking for and will help  are ahead in their search for a loan.

Selecting the best sections from my hand drawn sketches, I created mid-fidelity responsive wireframes to begin visualizing the main user flow from mortgage landing page.

UI DESIGN

I worked within the brand’s exisiting visual identity to stay true to the original colors and brand’s 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.

When designing the UI, I felt it was important to add characteristics that will soothe the user, and colors in places that will guide their eye 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.

Desktop Prototype Link

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 happy 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.