Homepage UX Alignment
Upstart Pre-IPO Preparations
Upstart is a fin-tech company that uses AI technology to determine if a customer is qualified for a loan while considering their education and work history. Their mission is to expand credit to those who are excluded by traditional banking.
Accomplishing the homepage realignment was one of my favorite projects during my time at Upstart. The initiative was essential in supporting the company’s preparation for IPO. Since then, the company has become public, and the homepage remains top-performing, winning many tests.
Upstart’s homepage was becoming outdated in comparison to its successful marketing campaign landing pages. While the new messaging was about helping people get out of debt, the website remained dark and mysterious, with language written for investors. The disconnect created confusion for customers and muddled the brand.
Goals and Requirements
The objectives of this project are: improve the experience of the page by empathizing with customers; align visual experience and messaging of the homepage to existing successful brand campaigns; strategize the hierarchy of the homepage to be informative and build trust with customers; Finally, launch a new design that performs well and maintains conversion.
The Design Process
- User Research – We used existing knowledge and customer data to help us build empathy for customers and make informed design decisions.
- Competitor Research – We reviewed other fintech company websites such as SoFi, Lending Club, LendingTree, Marcus, LightStream, NerdWallet, and Payoff.
- Subjectivity Testing on Hero Imagery
- Desktop UX Strategy
- Mobile UX
During the wireframing stage, the team brainstorms on impactful content on the homepage and the hierarchy or arrangement so the audience can understand the information in a meaningful way. We’re focusing on the strategy, flow, and messaging part of the user experience. I will walk through the details of each content in the Desktop UX Strategy section.
Subjectivity Testing on Hero Imagery
The hero image of the homepage was critical in building a visual connection with customers. It told a more compelling story than words. Although the project was under a tight deadline, it was necessary to test imagery options and understand what appealed to customers. Hearing them spoke of their experience guided us to build a successful design.
Here are three variations of the homepage design I prepared for testing:
The subject in this image portrayed a familiar reoccurring theme that came up during user research. She is a new college grad who is joyful to gain financial freedom from the debt she accumulated from school. She knows her hard work deserved to be valued more than her credit score. Her body posture also directs attention toward the action box.
In the second image, I imagined a millennial spending time with his pet while feeling optimistic about his future. He might have made a few financial mistakes in the past, but he is now back on track, thanks to debt relief.
The last image told a story of a family taking a break from working on their new home. They made the smarter decision of taking out a loan for house improvements instead of putting charges on their credit card. This photo is vibrant and uplifting and adds a family aspect to the homepage.
The three hero variations were tested with 20 participants on Usertesting.com. The participants spoke about their reactions and experience upon seeing each homepage design. Here were the learnings:
- 11 participants found the family image to be very relatable and reminded them of their situations
- 8 of them mentioned, “You are more than your credit score,” which worked well with the family photo.
- 4 of the testers saw themselves as the young woman, but the family was more trustworthy
- 3 said they were animal lovers
- 2 of them does not have a preference
- 2 people only spoke about the copywriting
The family photo was a clear winner!
Desktop UX Strategy
Although most of Upstart’s audience apply for loans or convert on desktop devices, mobile was still important for search credibility and ranking. Mobile experience and desktop experience were designed at the same time for consistency. A key difference between the screen sizes is that the hero image is removed for optimizing the loading speed on mobile.