Automated Banner Creator Tool (ABC)

After IPO, Newegg began making strides to be identified with the technology industry focus on automation and software improvements to reduce costs.

I was approached and told that a tool was being created in order to allow non-creatives make basic banner creatives themselves without the need of an expensive design team. The automation of this tool is really just in the reduction of manual work for individual sizing using an iterative model to create many versions at once.

V1 Developed by software engineers with no UI/UX considerations.

Users were able to create an HTML generated banner with basic text and SKUs with no arrangement capabilities. Background images couldn’t be manipulated so it made the whole process incredibly manual for a solution meant to be a time savings. Ultimately it’s faster to have a designer generate these banners in Photoshop than use this old process.

Starting from scratch, the basis of this tool’s model interchangeable values and set structure meant a designer could create a functional template and users would be able to change copy and SKUs without putting in any design thinking themselves.

First design of the ABC tool, users are able to select "elements" from the bottom right and it would add them to the banner size. The designer would then have to place all required elements in a banner design for each size in order for the tool to ge

First design of the ABC tool, users are able to select "elements" from the bottom right and it would add them to the banner size. The designer would then have to place all required elements in a banner design for each size in order for the tool to generate all versions.

Example of how the template would layout elements for text, image and CTAs.

Example of how the template would layout elements for text, image and CTAs.

Popup feature tool options for customizing elements directly on the banner stage area. The tool developers ended up removing this feature was it was difficult to code for an MVP.

Popup feature tool options for customizing elements directly on the banner stage area. The tool developers ended up removing this feature was it was difficult to code for an MVP.

This was an example of the finished result after all elements were included in the ABC tool.

This was an example of the finished result after all elements were included in the ABC tool.

After initial concepts for the tool’s requirements were discussed and recorded, all parties affected by the change in the process were consulted.

Inter-departmental workflows were isolated and evaluated to simplify the creative process by using automated processes removing manual effort.

First active iteration of the ABC tool's MVP. It could allow users to add elements to different sizes with the same values updating across all sizes. In terms of fine tune customization there weren't a lot of options and a great number of bugs that

First active iteration of the ABC tool's MVP. It could allow users to add elements to different sizes with the same values updating across all sizes. In terms of fine tune customization there weren't a lot of options and a great number of bugs that had to be patched actively.

When creating a template, the designer role for the user was able to create specific banner sizes outlined in the ABC Tool's template creator interface. This was a bit manual and lead to duplicate sizes and issues with naming banners with character

When creating a template, the designer role for the user was able to create specific banner sizes outlined in the ABC Tool's template creator interface. This was a bit manual and lead to duplicate sizes and issues with naming banners with character specific naming conventions such as @2x sizes.

This is the basic preview environment for banners after being submitted for approval. This screen design was a bit redundant as it didn't offer different viewing options than the working stage.

This is the basic preview environment for banners after being submitted for approval. This screen design was a bit redundant as it didn't offer different viewing options than the working stage.

Designed templates would appear with image previews so users could select templates that worked for their needs.

Designed templates would appear with image previews so users could select templates that worked for their needs.