Invest in yourself

Commsec

We were asked by CommSec to showcase the myriad of how-to's and video tutorials in CommSec's campaign to help prospective and existing clients trade with confidence. The campaign encouraged customers to 'Invest in yourself' by seeking help and training from mentors which will lead to success.


Prototyping

We worked closely with the strategy and UX team to explore the layout options for the large amount of videos and images that the team wanted to include in the design.Because we were building the project outside the CMS and site structure of CommSec, we suggested that we explore unique interaction methods for the header for more visual impact. 

Explaining interaction methods proved to be difficult in the past, so I built a few prototypes internally to see how we can better explore our options. We ended up with a prototype below that I built to better showcase our tests and concepts with the client. 

The prototype also allowed us to work closer with the development team to test feasibility and performance, given the rigid browser compatibility exceptions that typically exist for Bank clients. We were able to show our goal and targets, and how to best massage it for the right browsers.


Design

We used the dialogue of the current CommSec brand to inform the base of our designs. Again, because we veered away from the current CMS and site structure we pushed their brand into more visual and photographic led design.

We also worked with the UX team, to restructure the video sections because we were concerned about the length of the page. Having too many large scaled videos meant a longer webpage, and decreased chance of seeing more of the content below.
 

I also experimented with subtle animation and interaction methods on buttons, again because our freedom away from CMS restrictions. We were allowed to develop nice subtle effects that extended and modernised the campaign compared to their global CMS effects.


Mobile

The biggest consideration for Mobile was performance and asset loading. While this needed to be responsive, we needed to restructure some elements to ensure that the images and thumbnails were light weight enough to be viewed properly and on small screens. Because the animation and subtle movements were affecting the smoothness on some devices, we opted to using optimised still images for mobile and tablet.



Cinemagraphs

Instead of serving static images we subtly animated each mentor image across all media. 

We added slight movement and animation across the images, such as steam, flames and flashing lights, based on the cues of the photo's themselves. We did this to provide more atmosphere and movement to what could easily have become a very still and static experience.

Bringing these images to life made for more interesting media and was more consistent with the TVC and other moving image placements.