A banner production guideline that documents the visual solution to Homepage Hero Banner with templates to assist it.





Overview:



In my 4 months in RBC Rewards, I optimized the banner production process by updating templates and managing the workflow. I also created banners for brands like Fairmont, Saks, GMC,  generated mock ups for our web and mobile products and created screens for mobile app with our UX designer.

This case study explains my work on Rewards Web home page.
 




Knowledge Field:


Web Home Page
Visual Guidelines
Promotional Banners



Main Steps:





RBC Rewards Web is a responsive digital site.



Due to its current technical constrains, all elements on the hero banner space of home page are yet independent components (eg. CAT, product display, brand logo display, promotional snipes).





It means the banner space is currently in a two-layer structure.



Namely, text layer, and background image layer.







The team needs to come up with a visual solution to better aid banner production.

This will act as a temporary solution.


The solution needs to satisfy two basic requirements.

1. The text layer needs to remain clarity across all devices after all the visual elements are added to the background layer.

2. This solution needs to help select full-bleed images since backgrounds with busy visual interest is going to be in conflict with the text layer.














Eventually, here is the banner production guideline that documents the visual solution to Hero Banner and templates to assist it.









Acknowledgement: 


Thanks to Jason Mills for bringing me onboard, and Neelan for your guidance and feedbacks. Thanks to Amanda, Daniel, Jeni and Pasan for your advice and collaboration. Thanks to the Rewards team for a great experience.




Related: