Designing a Homepage: Balancing Aesthetics, Functionality, and User Experience with business needs.
Designing a homepage is tricky because you need to balance what users want, technical limits, your brand's style, and how it looks. It can feel overwhelming, but by breaking it down and focusing on what’s best for the user, the process becomes easier. We’ve been designing and re-designing the front door at sallie mae for over 2 years.
A timeline: over the years
The overhaul
Phase 01: 8 weeks to concept, design, and test
Through comprehensive research, three key themes were identified that align with user needs: building trust, offering personalization, and reducing clutter. By incorporating white space, consistent branding, relevant data, and personalized elements, we successfully addressed these priorities.
-
This time was dedicated to developing inspiration boards and conducting a comprehensive competitive audit. The insights gained from the audit allowed us to identify elements we could eliminate or refine in our own user experience.
-
The goal was to develop 2-3 innovative concepts for the homepage, challenging existing conventions. Key questions included: Do we need to display rates? Is photography necessary? How many tools are essential for the user? Which content best aligns with the three themes identified during discovery? A creative brief was formulated, and the team moved forward with developing enhanced user experiences.experience delivering on what customers want.
-
Move forward with chosen concept into A/B testing and validation. We tested two styles of on page navigation, one with text labels and one with icons from the original concept.
Research Goals:
To see how confident users are to move forward with the application process. We wanted to learn about peoples’ expectations about the very start of the online student loan application process. Including:
What they expect to see / learn
What would make them progress / abandon
Interactions with the navigation
Methodology
Conducted 2 sets of unmoderated user testing on Usertesting.com.
1. Undercurrent with Icons Desktop
2. Undercurrent with Text DesktopConducted 2 sets of moderated tests.
1. Undercurrent 2.0 Desktop
2. Undercurrent 2.0 MobileAudience
Unmoderated:
• 20 users total (5 borrowers and 5 cosigners per test.)
• College students who currently fund their schooling through Private Student Loans.
• Cosigners who fund borrowers through PSL.
• Based in the United States.Moderated:
• 16 users total (8 new customers and 8 serial borrowers)
• College students who currently fund their schooling through Private Student Loans.
• Based in the United States.Insights
Users appreciated the simplicity and clearness of the page.
It was clear to users what action they need to take to move into the application.
Most users who read the "10 minutes" line positively received how quick the application would take.
Users didn't know they could interact with the icons, they moved right into the application instead. However, when replaced with text, some users clicked on the CTAs and interacted with the content.
Users who interacted with the rail had trouble understand what REQs meant, but when clicking on it stated that having requirements listed was helpful
-
With a clear direction established, we will consolidate all feedback into a working prototype, which will then be tested and refined based on user input.
Factoid here from research XX% lorem ipsum lorem XX% lorem lorem ipsum.
At this moment, you'll have to reach out to me to see the work.
The students spoke.
47% chose concept 03
This design focuses on deeply understanding our users and addressing their specific needs during the transition from high school to college. The concept leverages ample white space and features customizable tiles that display content tailored to the user’s journey—whether based on the season, a personalized session, or general information to help them navigate and become comfortable with the knowledge required for college life.
Inspirations
Designers present inspiration boards to clients as a visual tool to communicate the direction and aesthetic of a project early in the process. This approach fosters better collaboration, encourages feedback, and ensures alignment on the overall vision before proceeding with detailed design work. It helps prevent misinterpretations and ensures the final product aligns with the client's expectations.
Competitive audit
A comprehensive analysis of your competitors in the market to assess their strengths and weaknesses. This enables you to identify opportunities for differentiation and enhance your market position by comparing your product or service against theirs across key factors such as features, pricing, marketing strategies, and customer experience.
Concepts
Presenting multiple concepts with distinct organizational structures and unique offerings enables the client to reflect on what is most important in conveying their overarching story to the user. This approach allows for a more thoughtful consideration of how they wish to communicate their identity, value, and product/s.