ATL MORTGAGE
-
ATL MORTGAGE Site Redesign Project
-
Two Weeks
-
Three Person Team (All UX Designers)
-
Desktop and Responsive
My Role: User Research, Rebranding,
Low-High Fidelity Mockups
WHAT IS ATL MORTGAGE?
-
Mortgage Brokerage Company
-
Value Proposition: Affordable, Quick, and Understandable
-
Market Positioning: No Appraisal, Credit Report or Underwriting Fees (Compared to Standard Mortgage Loan Fees, totaling up to $1,400)
-
In-Person or Remote Meetings to Learn More
-
Target Audience: 50% First-Time Home Buyers, 50% Refi, Second Home, Experienced Buyer
ATL MORTAGE GOALS
-
Increase Numbers of Visitors
-
Increase Visitor Retention
-
Increase Conversions on Lead Generating Forms
GIVEN INITIAL TASK
-
The client wanted to focus on updating or overhauling ATL Mortgage's Pre-Approval form
SECONDARY TASKS PROMPTED BY RESEARCH
-
Total brand and website redesign
-
Adjust current language and add new language
-
Overhaul sitemap and user flow
-
Mobile development
ATL MORTGAGE GOOGLE ANALYTICS
Desktop
Mobile
WHAT WAS LEARNED ABOUT THE CURRENT TARGET VS DATA ANALYTICS
PERSONAS
Jim Jansen
-
27
-
First time home buyer
-
Requires education on the home buying process
Tim Baxter
-
44
-
First time home buyer
-
Has knowledge in the home buying process
Donna Jones
-
52
-
On her third mortgage
-
Looking for trustworthy broker
CONTEXTUAL INQUIRY QUOTES WITH THE TESTING QUESTIONS
Users were observed using ATLMTG.com and given tasks to complete.
Tasks:
-
Find how much fees are to use this broker.
-
Find Estimated Time for Pre-Approval.
-
Find How Much You Can Put Down for a Home (Instant Quote, Afford Calc)
Insights:
-
Users felt the site didn’t allow them much freedom.
-
Users felt like they needed more information about the mortgage process to assist them before proceeding.
-
Some users found context of the form system to be hard to understand.
-
Users thought the navigation made it hard to complete tasks.
"I felt really lost"
"I can't find what I'm looking for and I don't think I'd stay on the site."
"This site makes me feel stupid."
VISITORS NEED A TRUSTED ONLINE EXPERIENCE NO MATTER WHERE THEY ARE IN THE MORTGAGE PROCESS TO CREATE A SUCCESSFUL BUSINESS-TO-CUSTOMER RELATIONSHIP.
-
Help first time home buyers learn about relevant topics in the mortgage process.
-
Prolong user engagement on the website. (Business)
-
Establish transparency and brand confidence on our website in order to provide trust to the user. Alleviate navigation issues for user research.
-
Portray professionalism so that users feel comfortable using our business.
-
Provide relevant online tools to help users get their financial answers.
BY CREATING AN ONLINE BRAND THAT PROVIDES ACCESSIBLE TOOLS, ENCOURAGES TRANSPARENCY, AND SHOWCASES EDUCATIONAL RESOURCES, VISITORS WILL BE MORE ENGAGED WITH THE BUSINESS AND TRUSTFUL OF THE PROCESS.
WHITE BOARDING, INFORMATION ARCHITECTURE, & USER FLOW
White boarding assisted greatly in quickly visualizing and refining our sitemap, user flow, and information architecture. It was also the beginnings of the visual and design language for the wireframes.
One of the more unique discussions was how to break up (or if it should be separated at all) the form for the "Personalized Interest Rate". It was decided to try both a three-page separation and a single-page for the form.
COMPETITIVE L. A.
Referencing competitors and successful design patterns helped establish norms and design languages to help inform future visual and informational development.
-
Zillow
-
Rocket Mortgage
-
Quicken Loans
-
Bright Path
-
Moreira
SKETCHES
WIREFRAMES
CREATION
The wireframes were sketched based off the competitive analysis, our given task and existing content, and our white-boarding of information architecture. They went through user testing multiple times for given tasks: "Find the benefits of using ATL Mortgage, Start and complete the form for a Personalized Interest Rate, and "Get Pre-approved".
WIREFRAME TESTING RESULTS
-
Order of cards was not clear and CTA names were changed.
-
Form system was seen as a bit daunting and was subsequently split into multiple pages in order to further process understanding and enjoyment.
-
Progress design, while quite rough, was not giving enough feedback to the user. A more robust visual was implemented.
-
“Overview” was not clear as what action would next occur. Changed verbiage to “Get Results”.
-
All information supplied by the user and all information that would be provided in documentation needs to be available on the conclusion of the form process.
BRAND DEVELOPMENT -TYPOGRAPHY & PALETTE
The typography was chosen to bring a modern and assertive, trustworthy appeal.
The palette development was created based on ATL Mortgage's successful Instagram blasts. The teal accents were introduced to add a bit more "fun" to the potentially daunting and dry mortgage process.
BRAND DEVELOPMENT - LOGO
ATL Mortgage's original logo did not inspire professionalism or trust. It also did not target most the company's broader market. The new logo aimed to incorporate nods to house ownership and bright futures with a broader target audience.
DESIGN SYSTEM
WIREFRAME ITERATIONS
INSTANT QUOTE FORM REDESIGN
MOBILE EXECUTION - HOME
MOBILE EXECUTION - MORTGAGE ROUTE
THE CLIENT WAS THRILLED WITH THE REDESIGN AND WANTED TO START IMPLEMENTING DESIGN ADJUSTMENTS IMMEDIATELY
NEXT STEPS
-
Data visualization across the site but specifically for the end of Mortgage Approval process needs to be cemented
-
General spacing and certain design elements need to be adjusted
-
Mobile testing and typography adjustments to mobile standards