top of page
Standardized Templates
header-05.png

Context

  • Retailers do not price products equally across geographies

  • This makes the creation of ads very complex, involving thousands of pricing variations nationwide

  • What began as a quick company experiment to solve this issue, quickly became one of the fastest growing, key revenue-generating products: dynamic social media ads that are designed and coded in-house and populate pricing with automation software

  • For a single campaign, 12-28 ads were custom designed and coded by a single designer
     

  • This required 3 full business days for the design and 5 for code
     

  • Retailers were not happy with the 5-week turnaround time (including processing time) and highly motivated clients were turning away
     

  • Experimental templates had been hurriedly coded and were now highly outdated and overly complex
     

  • Only 3 of 10 designers felt comfortable with the code

  • Restrictions imposed by Facebook and Google, limitations of our existing templates and software clashes between Mac and PC led to an extensive and time-consuming debugging process
     

  • These limitations on the creative team were holding the product back and simply hiring more designers would not solve the problem; we had to revamp our process and templates
     

  • With a year of experience under my belt and intimate knowledge of the pain points and limitations, I took on the role of Creative Lead for this product​
     

  • The solution would not come overnight; it would require a complete overhaul of our templates, processes and training

Solution

  • The first step was to standardize the templates in order to limit the movement of dynamically coded elements on the page
     

  • Due to size and space constraints as well as third party restrictions (ex. Facebook’s 20% text rule), there were only a handful of layouts that worked well to begin with, so removing the guesswork for designers was a time-saver
     

  • I built the templates in Sketch and employed extensive nested symbols to save time and ensure consistency
     

  • Swapping brand colours and logos across 28 mocks was now as simple as updating a single, master symbol once and the background is the only custom design work required moving forward 

templates.jpg
  • Because the layouts were now standardized, the text boxes, logos, etc. could also be pre-coded, leaving only fonts and colours to be coded each time
     

  • In order to instill confidence in all designers on the team, I gave the templates a complete overhaul by renaming confusing jargon, annotating each div and leveraging commenting to include examples and warnings in order to avoid breaking the templates
     

  • I wrote extensive documentation and posted to our company’s internal channels to serve as a central source of truth and a convenient reference point for designers working on the templates
     

  • I booked time with a senior developer to help update the code to include increased flexibility and positioning options, including the additional ability to place a full-width themed banner in an ad
     

  • I held retraining sessions for current teammates and developed a comprehensive on-boarding plan for new hires

Outcome

4X

increase in total number of campaigns going live
(from 2 campaigns/month to 8)

4X

turnaround for a holiday-themed campaign for Walmart, capitalizing on significantly more budget for the company

3X

over

increase in total number team members able to work on ads
(from 3 team members to 10)

50%

​reduction in overall campaign time
(from 25 to 10 business days)

50%

reduction in Creative Team timelines
(from 8 to 4 business days)

bottom of page