CSS in 2010

Aside from the actual product image, I figured out a way to create most of this entire layout using CSS and HTML with minimal images. Even the round “offers” circle was created with CSS. Since the number of offers would change per vertical, per zip code, no image could be used since it was a dynamic number.

Affordance

I purposefully aligned the top of the first product just above the browser controls to show there was something to scroll and see.

Dark Image

This was an example to show how a staged product shot would look with light style text, since the other images (Appliances and Clothing) were clipped and photoshopped to look minimalistic with depth of field shadows and placement.

Local Deals

UX / UI Wireframes, Mockups, Front-End Development

Challenge

How can we create a mobile web location-based module for every local ad and deal in every Sears location? ..and in less than 2 MONTHS!?

Solution

Worked very closely with our back end development team to design and develop a bulletproof framework that integrates the user’s current location inventory API data (conditional content = available product categories and quantity of items for each category), Google map location API, mobile swipe gestures, and CSS to optimize visual UI.