Planning and designing a set of tools to manage the Shop.com homepage
This project was done in tandem with the Shop.com homepage redesign. I was tasked with designing tools that would allow mutiple teams to manage all of the various dynamic elements on the new Shop homepage.
When a user first hits lands on the main admin page, they have the option to change the site country and language. As they make changes to the page, they can preview, save (saves the changes, does not publish), stage (saves the changes and publishes to our staging environment) or publish (saves and publishes to live).
The Hero Manager
This tool allows for the configuration of rich HTML & CSS hero banners. User can upload 730x360 background images, and then layer type on top using box-model padding to control the positioning of the text content. User can apply specific header and button styles to the elements as well. Together, these elements create consistency within our hero banners while still allowing for an immense amount of creative freedom.
Campaign Containers
Most screens in this tool are presented in an overlay/lightbox window. Before a user can add any type of content below the hero, they must first add a campaign container. Campaign containers control the flight schedule of modules included in the container. Using this system, we can have multiple modules start and stop at the exact same time.
Modules
The actual content bits (images, products, text, etc) are added with modules from within containers.
Product Modules
One of the most common modules used on the homepage, the initial screen gives the user several options for the general layout of the module.
80x80 (product image thumb size) Multi-row Module
Once a user selects a specific layout, they're shown the fields needed to create the module.
80x80 Multi-Row, with a 300x250
A plain ol' Image Module
Brand Logo Module
This module allows a user to upload a multi-tabbed (if needed) image carousel featuring any combination of the thousands of brands featured on Shop.com.
Text Editor
Like the hero manager, this text editor gives users just enough creative power, while keeping them in check with our brand guidelines.
