Screen Shot 2021-07-13 at 6.19.55 PM.png

MORTGAGE PROCESSING PROS

NEW WEBSITE  - BRAND DESIGN 

Client

MORTGAGE PROCESSING PROS (MPP)

Project

Brand new website and Client Communication Portal 

My Role 

UX design- UI design - Brand Developing -Interactive Design - Creative Direction - Creative Lead 

Duration

3 Weeks

Methods - Tools 

Research - Service Design - UI design - Branding Design- Lean UX - Design Studio - Design Thinking - Interactive design - Participatory Design - Figma - Photoshop - Illustrator 

Deliverables 

High Fidelity Clickable Prototype - Research Insights - Brand Identity - Executive Summary - Presentation 

High Fidelity Clickable Prototype - Research Insights - Brand Identity - Executive Summary - Presentation 

Team 

Kasey Miller - Mallika Shetty

Overview 

We were asked to create a brand new website for the Mortgage Processing company. Mortgage Processing Pros is a Start-Up company that wants to streamline and simplify the loan's processing process. They dedicate to transparency, accuracy, and customer service, all while shifting the mortgage industry by focusing on building diversity and social equality. 

My team and I were tasked to develop the brand identity for the business and high-fidelity clickable prototype. With the 3 weeks timeframe, we identified with MPP to design the communication and marketing of the website. In the following step, we will develop the Client portal communication. 

My process 

 Research 
Personas
Ideation/Sketching 
Copywriting
Brand Developing
User Testing
Presentation
Prototype

Research 

We want to understand the Mortgage Processing market's landscape and how users reviewed the existing services. Who is the best, and what latest trends and techs are out there? Then find the best creative way to tell Mortgage Processing Pros' story. 

  • Built foundation of what a mortgage processor does and the steps involved when processing a mortgage

  • dentified needs, pain-points and how tools were
    being used through user reviews of top-rated loan origination software

SWOT Analysis

Competitive Analysis

Understand the foundation of what a mortgage processor does and the steps involved when processing a mortgage, how we can be differentiating our website experiences, the brand voice that will attract people. Identified needs, pain-points and how tools were being used through user reviews of top-rated loan origination software

Affinity mapping

INSIGHTS

We found that the majority of the competitors focused on these 5 items when talking about their services.

  1. They see themselves as partners with their clients and care about their businesses

  2. By outsourcing clients reduce their overhead and use those funds to invest in marketing

  3. Everyone has a streamlined process

  4. Communicate with everyone of the loan’s progress

  5. Everyone guarantees to close on time


Not only do we do all of these, but we stand out from the rest because of our mission to be a diverse company that hires women and underrepresented groups within the mortgage industry.

Research insights.png

Personas

Problem statement 

Mortgage brokers need experienced loan processors to help them close the loans efficiently and provide good customer service to the borrowers, thereby generating more leads.

Hypothesis

If mortgage brokers hire Mortgage Processing Pros, they will close more loans on time because MPP has experienced loan processors, streamlined processes, and real-time communication.

User Flow 

With all the details that we found through our research, I drafted the user flow that addressed the pain points and what users are looking for in an outstanding mortgage processor. 


The message we wanted to convey to users when they visit the website is building trust and credentials. 

Ideation
Sketching

Building trust and credentials are the goals that I focus on when ideation and sketching. How to invite the user interest in what we say? How to get them interacting with our website? 


Interaction design and learn the user behaviors when visiting the website and scan through the information.

 
Inviting the user to respond, moving through, and engaging with the information we present is the key. We want the user flow to feel like a conversation between MPP to users. 

Wire frames

We studied users' behavior, What information they will look for in the mortgage processing field, and how to engage and share the critical information that differentiations MPP to the competitors. 

The wire flow is the way to strategy how to place the "Call to action" buttons, how to invite the users to the conversation. Understand we need to simplify and break down the Step-by-step process, which helps to ease out the complex information to our audience. 

BRAND IDENTITY
DEVELOPMENT 

The Brand's voice 

We worked closely with the client to understand who they are, their vision, their mission, and how they want to present themselves to the world. From there, we created the tone of voice and the Brand's personality.

  • The approachable experts are willing to answer questions and get to know your clients and their business.

  • Empathetic for social causes and also toward your clients and their needs.

  • They are dedicated and passionate, shifting the mortgage industry by focusing on building diversity and social equality. 

  • We wanted the tone to be conversational and easy for anyone to understand. 

The Brand's personality

Visual Identity 

We carefully crafted the Brand visuals from typography, color theory, photography, and illustration style based on the MPP brand's personality.

Typography

Color theory 

Our client shared that they'd love the green color as the central theme for their Brand, and through our market research, we found green represents the trend of progressive thinking in the financial and mortgage industry. So then, we added yellow and white to enrich the Brand's color palette and reflect the MPP brand's personality. 

Logo design 

The idea was how can we highlight the social mission as the focus of the logo design and embrace the New in the Mortgage industry. 


The combination of a heart and house icon expresses warmth and stability, plus the green colors add freshness and renewal to the design. 

ideation sketches

design options

Final design 

The combination of a heart and house icon expresses warmth and stability, plus the green colors add freshness and renewal to the design. 

UI - Delight moments 

Add FUN and delight moments to the user experiences. Animations, movement, happiness, and optimism are the goals in the creative process. 

We wanted to move away from the corporate images and graphics we saw on other competitive sites. Instead, we wanted to incorporate pictures that show diversity, and they're lively and fun. They keep interested throughout and add delight.
 

UI - Overall look and feel of the design 

High-Fidelity
Prototype 

We built the design theory, and it's time to apply those concepts to the product. Every detail in colors, shapes, flow, and interaction of the website be created to build trust and establish MPP's credentials. 

Applied design annotations

Screen Shot 2021-07-21 at 7.12.17 PM.png
Screen Shot 2021-07-21 at 7.12.31 PM.png

View Design prototype here 

We conducted 3 in-person user testing on the usability and navigation of the prototype. Here are what we learned from the testing. 

TESTING

users testing take away.png

Next steps

  • Working with the developer to build the launch the site

  • Phase 2 - Design the Client Portal 

Summary 

The client was over the moon happy when they saw their vision of the Brand comes to life. Agile working and Lean UX helped our creative process tremendously. We were keeping the process transparent, streamlining, and keeping the client in the KNOW. Communicating and sharing each step of the design process with the stakeholders not only help us stayed in the right direction of the design, but we also archived our goals of schedule, time, and budget.