I created these tool UX template tool kits to streamline the design and development or brand pages, native ads, and emails across the Walmart.com ecosystem. This tool kit aimed to facilitate the production of graphics, messaging, and development by aiding the visualization of how the site and the individual modules react. Breakpoints, safe zones, scaling, cropping, and truncation to name a few, can be difficult invisible obstacles to the effectiveness of the original design intent. My goal was to provide tools that would allow for more creative flow and flexibility. With an increased understanding of the parameters, it then became easier for the designers to make informed visual choices.
Reducing Friction
Before my consolidated template system, templates existed as multilayer PSDs with embedded smart objects. It was a total nightmare to navigate, understand, or design within. My main aim is to remove as many encumbrances and points of friction in the design process. And in the end ease creative expression of visual design, compelling messaging, and the quick export of final deliverables to the dev team.
Improved Process
Informed decisions translate to ideal graphical and copy executions across desktop, tablet, mobile, and app. Other improvements were dramatic file size reduction, simplified prototyping, and drag and drop asset export. This is also a strong visual communication tool to pinpoint weak points and make a case refinement with leadership and dev.
A Better Toolkit