overview
Goal: Create an experience that helps users reach their dream of homeownership.
I collaborated with another designer and a content designer to redesign the existing “Buy A Home” page on RocketMortgage.com focused on buying a home. This work gave us the opportunity to refresh content with our brand voice, provide more relevant content to prospective home buyers and improve the visual design based on design system updates.
I collaborated with another designer and a content designer to redesign the existing “Buy A Home” page on RocketMortgage.com focused on buying a home. This work gave us the opportunity to refresh content with our brand voice, provide more relevant content to prospective home buyers and improve the visual design based on design system updates.
problem
Availability and affordability continue to be obstacles for first-time and repeat homebuyers. High rates, low inventory and rising prices make home buying and selling difficult. This has led to a lack in confidence amongst home buyers. This page needed to answer users' questions about home buying, give them confidence in doing business with Rocket Mortgage, and prepare and encourage them to take action through applying.
The audience for this page is primarily first time home buyers, repeat homebuyers and users thinking about buying in the future but who are not quite ready.
process
1. Competitive Analysis
We reviewed competitor and non-competitor sites to understand how others companies are communicating similar information and providing educational resources. We noticed a mixture of educational and interactive content, as well as text-heavy experiences that would be useful for increasing Search Engine Optimization (SEO).
2. Audit of Current Page
We performed a content and design audit of the current page to review and determine what was working well and what we wanted to improve.
We reviewed competitor and non-competitor sites to understand how others companies are communicating similar information and providing educational resources. We noticed a mixture of educational and interactive content, as well as text-heavy experiences that would be useful for increasing Search Engine Optimization (SEO).
2. Audit of Current Page
We performed a content and design audit of the current page to review and determine what was working well and what we wanted to improve.
3. Design and Content Wireframes
Based on the problem statement, new brand and content guidelines, competitive analysis and page audit findings, we worked together to create content strategy wireframes. We landed on two different themes to explore. Then, we individually created design wireframes based on the content strategy, focused on Empowerment (giving users the tools and resources they need to accomplish their goal of homeownership) and Partnership (being a trusted partner users can lean on during their home buying and owning journey).
Based on the problem statement, new brand and content guidelines, competitive analysis and page audit findings, we worked together to create content strategy wireframes. We landed on two different themes to explore. Then, we individually created design wireframes based on the content strategy, focused on Empowerment (giving users the tools and resources they need to accomplish their goal of homeownership) and Partnership (being a trusted partner users can lean on during their home buying and owning journey).
4. UI Refinement and Prototyping
After creating two wireframes based on Empowerment and Partnership themes, we refined designs using existing components in our design system to build out the two pages based on theme. I selected imagery and assets that would relate to the themes, align with our brand guidelines, and capture the diversity of our user base. Once we had refined designs, we created interactive prototypes in mobile, tablet and desktop sizes to prepare for user testing.
After creating two wireframes based on Empowerment and Partnership themes, we refined designs using existing components in our design system to build out the two pages based on theme. I selected imagery and assets that would relate to the themes, align with our brand guidelines, and capture the diversity of our user base. Once we had refined designs, we created interactive prototypes in mobile, tablet and desktop sizes to prepare for user testing.
5. User Testing
We presented the two designs to a group of 12 users who were prospective home buyers. They were asked a series of questions about the content of the page, how helpful the information was, if the experiences helped build trust with Rocket, etc. After reviewing feedback from users, we identified improvements we could make to the page before moving to A/B testing, including adjusting content and clarifying language on CTA buttons.
We presented the two designs to a group of 12 users who were prospective home buyers. They were asked a series of questions about the content of the page, how helpful the information was, if the experiences helped build trust with Rocket, etc. After reviewing feedback from users, we identified improvements we could make to the page before moving to A/B testing, including adjusting content and clarifying language on CTA buttons.
6. A/B Testing
Once we made tweaks to the designs after user testing, we launched an A/B test with the live page as a control, the Empowerment theme page as Variant A and the Partnership theme page as variant B.
7. Launch
After running the A/B test for many weeks and reviewing data on conversion from application, we determined that the Partnership theme (variant B) was performing well enough to push it live to 100% of users.
learnings
1. I gained a deeper understanding of A/B testing and how we measure the effectiveness of our design solutions.
2. Getting in the mind of a user is difficult. We anticipated they would prefer the Empowerment theme, but the Partnership theme ended up performing better.
3. I was challenged in crafting creative solutions for the page while being limited on using existing design components.
