Home Page Design Case Study

The homepage drove metrics and engagement and testing showed that users who entered via the homepage were more engaged, sending 60% more leads. Our challenge was to design a home page with a new component system that would improve the user experience, increase engagement, and build trust with updated brand positioning.

Hypothesis
1) By reducing clutter and improving page performance, engagement would increase. 2) Providing a consistent visual experience across the site, starting with the homepage, would build trust.
User Profile
Consumers looking to buy or rent a home: “New user, never been here before” and “returning consumer, not logged”. People who arrive via Google search, and those who arrive from an internal link.
Business objectives
Get users to the Search Results page as quickly as possible. Show Trulia is a mobile company. Differentiate from competitors.
Brand objectives
Buying a home is aspirational yet attainable goal. Trulia will give you the information you need when you need it, bring clarity, and make home-seekers feel confident they can find a home with ease.
Design objectives
Simplify. Modernize. Make visually consistent with new brand styles. Delight in the details.
Technical objectives
Fast load time. Modular. Testable.

Exploration with quick sketches. How do we connect the design to the brand principles?

Rough UI sketches on paper.

By skipping basic wire framing and jumping right into designing/sketching in Illustrator, I was able to quickly get buy-in on the looking feel. This process was helped by the fact that I was intimately involved in developing the brand style guides.

Once the basic layout was set, it was all about playing with the details. Should the image be an interior shot or exterior shot? How much functionality should there be on the search bar? How to design the marketing modules so they are simple, yet can hold enough information to tell a story?

Prototyping: I made a quick Keynote prototype to show an expanding search box and how the page would scroll under the global navigation bar.

Design highlights
Reduce clutter: Aggressively simple search with clear call to action. Very basic one page scroller. Content modules are easy to update and test. Concise, action-oriented copy. No banner ads(!). Flexible grid.
Build consistency: Hero image is aspirational and human. Built from scratch from component library. After inputting mobile number, jumps back up to search.
Delight in the details: Simple layered effect when scrolling. Simple hover effects. As user scrolls, menu disappears and is replaced by Search.