Visual Design




RBC Rewards

Four months internship @ Royal Bank of Canada
Term:Jan, 2018 - April, 2018
Team: Loyalty Pod
Tools: Sketch, Photoshop, Illustrator, InDesign, Sublime



Mark


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.




Project Brief

We wanted to create a banner production guideline that documents the visual solution to Homepage Hero Banner with templates to assist it.




Main Steps

01. Audit - Frame Visual Problem 
02. Test - Exam Attempted Solution
03. Land - Make Solution Applicable 






01. Frame Visual Problem

Working to get an accurate perspective on design’s role in this project by seeking for opportunity areas and understanding constrains.
02. Exam Attempted Solution

Rapidly test out various attempted layout and compositions using existing testing web tool and update measurements for final template as testing repeats.

03. Make Solution Applicable 

Document the learning outcomes of this project and turn them into tangible materials that help influence future design practices.










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