Saving for a Down Payment Page

U.S. Bank Home Lending

Problem:

Page had low traffic despite being highly useful to first-time home buyers.
Content was not aligned with what users actually wanted to know.
Needed a refresh without introducing new technical dependencies.

Outcome:

Successfully launched an Adobe Experience Manager (AEM) authorable page on the company's customer facing site.
Updated content helped users understand their options for affording a home.
Design was on-brand, accessible, and built entirely within existing component constraints.

My Role:UX Architect & Designer

Deliverables: Information Architecture & Page Layout, Wire frames with SEO and WCAG Annotations, Visual Design, Plans for A/B Testing

Collaborative Discovery

I partnered with the Content Writer and SEO strategist to ensure the new design met our goals. This included analyzing SEO metrics and Quantum data, along with past test results. I completed a competitive analysis to identify content patterns on high-performing savings pages.

Key Things We Learned:

Long-form educational content and lists performed best for SEO.
The calculator CTA was the most clicked element.
This page did not get much traffic besides being extremely beneficial to First-time Home buyers.

Deliverable:

A Miro Board where the team and I could work together, share thoughts, and collaborate.

Information Architecture, Accessibility, & Wire Frames

My team and I regrouped and decided our approach would be to combine long form content and existing AEM component to provide a refresh to keep the design on-brand and make sure the content resonated with the current market and user's needs.

Annotated accessibility and AEM considerations and questions.

Recreated a page hierarchy with the Content Strategist to map the new content flow.

Design Ideation & Testing

Product Comparison Card Ideation Goals:

Ensure the language on the product comparison card component was appealing and understandable to real people.
Work within the confines of the AEM component so as not to create tech debt.
A/B test the options to get user feedback on which of the three designs will lead to conversions.

Decide what your down payment should be Section Goals:

Boost visual appeal to make it more interesting to address repetitive and boring design.
Understand AEM component restrictions around sizing and spacing that blocked certain designs.
Document items to bring to the AEM component design team as a future enhancement request.

Saving for a Down Payment Page

U.S. Bank Home Lending

Page Design on All Devices

Collaborative Discovery

Key Things We Learned:

Deliverable:

Information Architecture, Accessibility, & Wire Frames

Annotated accessibility and AEM considerations and questions.

Recreated a page hierarchy with the Content Strategist to map the new content flow.

Recreated a page hierarchy with the Content Strategist to map the new content flow.

Design Ideation & Testing

Product Comparison Card Ideation Goals:

Decide what your down payment should be Section Goals:

Final Design