UX Designer

Google Catalogs

A co-worker had designed an interactive catalog iPad App. I was tasked to create a web-based system for the marketing teams to upload and annotate their exisitng printed catalogs. I had to make sure that the upload process fufilled the end user-facing product, create a flexible system to account for a wide variety of retailers, and build a new annotation system levereraging existing Google products.

CatalogsTop.png
Google Catalogs

Google Catalogs

The shopping team had recently completed an iPad app that enabled users to look through interactive catalogs. The initial launch had several large retailers attached to it, and the design had been finalized.

I was brought in to create the web interface that enabled the merchants to upload and then annotate their existing catalogs. I needed to match the functionality in the final iPad app, and make sure that the upload process was simple and yet comprehensive enough to meet the wide range of retailers’ needs.

Existing iPad App

Existing iPad App

I was tasked with designing a system to enable the retailer to upload an existing PDF, overlay their product data-feed, and add layers of multimedia.

Data Sources

Data Sources

My first step was to document where the data sources would come from.

Flow Diagram

Flow Diagram

I outlined the process a user would take to add a catalog to our system.

Wireframes

Wireframes

Once the flow and data sources were finalized, I began to wireframe each page. These were used in discussions with the product and engineering teams.

Mock: Pottery Barn Dragging Annotation

Mock: Pottery Barn Dragging Annotation

As I brought the mocks into higher fidelity, I began sharing them and working with some external marketing teams.

Mock: Sephora & YouTube

Mock: Sephora & YouTube

Some marketing teams had a very robust online presence and needed a way to make their catalogs interactive.

Mock: Nordstrom & YouTube

Mock: Nordstrom & YouTube

I used the feedback to crate a flow that was flexible enough to ensure different needs, but still be consistent for each retailer.

Landing Page

Landing Page

While working on the creating process, I also began to plan out the landing page.

I created detailed spec for each major page and worked with the front-end engineers to make sure the visual design was precise.