Mortgage Center
Partner Portal

Experience Design UI Design Brand Design

Timeline

6 months

Roles

UX Designer UI Designer Visual Designer

Deliverables

Information Architecture Wireframes Style Guide Updates Interactive Prototype Interface Design User Testing

Overview

Mortgage Center's partners have a lot on their plate. They're running a credit union as well as managing their relationships with their members and vendors. Mortgage Center partners with midwestern Credit Unions to help their members get easy and affordable home financing. To help support our partnerships, we set out to create a secure online platform for our partners to access details and reports on their business with Mortgage Center.

Where I Come In

I was brought into the project once the development team was brought on board with senior management. I assumed the roles of UI, UX, and Visual Designer.

Objectives

Defining the Problem

We wanted to create a secure online platform where our partners could view their home financing program activity through Mortgage Center. It would become a one-stop shop for reporting and loan activity for our credit union partners.

The reporting process that we were replacing required a lot of manual work for employees and partners. By creating this portal we would increase efficiency and improve the overall partnership experience of our business.

image showing the optimal flow of interaction between partners and Mortgage Center

Process

Scope

Create the data system and flow for the portal between internal systems. Define features and project requirements for the users. Design and develop the portal for our partners. Conduct UAT and launch final product in 6 months.

Understanding Our Users

Our users are somewhat familiar with using financial and reporting technology. They work at a credit union and use a computer or tablet, at work. They are familiar with navigating financial portals through their browser. They also have at least some experience using Microsoft office products such as Word and Excel. Some users will be more advanced when it comes to using spreadsheets and Excel to build reports.

Image showing some of the characteristics the audience of the product has

Deliverables

After seeing the initial wireframes proposed by the external development team, our team felt that there were pieces of the experience missing. I was responsible for redesigning the wireframes based on stakeholder, executive, and SME (subject-matter expert) feedback to better reflect the needs of our audience.

My process and its deliverables included the portals information architecture, wireframes, data visualization, interactive prototypes, and style guide.

Information Architecture

Structure the data and content in and around the goals and tasks the users are trying to accomplish.

Wireframes

After coming up with and approving the initial wireframe sketches, I built upon them creating medium fidelity mockups for our team to review and provide feedback.

Data Visualization

I was responsible for figuring out how to visually display the data in the portal. There were important statistics about loan activity that we needed to display in a way that was easy for users to digest.

Interactive Prototypes

Making high-fidelity versions of the wireframes with clickable links and component states.

Style Guide

Once we started adding the colors to the platform, I redefined our digital style guide to match the current brand and define the visual systems of the portal. This allowed us to use some of our secondary colors to call importance to different areas of the portal.

User Testing

Prototype Feedback

Once we had a prototype of the first few pages of importance, we took it to a user group to get their reactions and feedback. We learned more about the way they were currently using what we were supplying them and that inspired additional changes to structure and hierarchy of the information on the pages.

Image of screen with thought bubbles containing insights our users provided during testing

UAT (User Acceptance Testing)

We conducted UAT prior to launch to make sure that all content and features were designed and functioning correctly.

Changes Discovered

Issues during testing had us push some of the features and pages to the next phase to ensure they were working as intended.

Outcomes

While we had to make the project a little leaner than initially expected, we learned a lot and delivered an exciting product that delighted our users. The new portal ended up being easier to use than the previous platform and we received valuable feedback to look into in the future.

Mortgage Center Partner Portal

Overview

Where I Come In

Objectives

Defining the Problem

Process

Scope

Understanding Our Users

Deliverables

Information Architecture

Wireframes

Data Visualization

Interactive Prototypes

Style Guide

User Testing

Prototype Feedback

UAT (User Acceptance Testing)

Changes Discovered

Outcomes

Mortgage Center
Partner Portal