This was my most extensive project during my time at Zillow. I worked closely with two engineers on the Ad-Product teams to redesign the ad-product UI designs. The ad-products are the spaces on the home/rental listing pages that look like a listing, but are an ad. 

​

The Problem: From ad to ad on the website showed inconsistencies in terms of padding around logos, logo sizes, characters in a single line, the character count at which lines of text would wrap around. These inconsistencies were also complicated by the fact that when the screen would narrow or widen, the ads would resize at different breakpoints. The engineers coding these ad-products would adjust text and logo spacing based upon the given copy and logo as there was no single template to follow. 

​

Solution: To solve this problem, I created a template that specified how each ad-product should look at different breakpoints. I iterated upon the then-present design to see the breakpoints at which listings would shrink and use those points to guide my template. As these ad-spaces are meant to look like listings, I used the padding and character count of the ads to create the template. 

​

Below are the specifications for the ad-products that I designed and worked closely with the engineers to execute. 

​

​

​

​

​