Goal

OneAD faces a problem in 2020, that is clients ask for more creative h5 banner ad format other than traditional video type ads which was the main force of OneAD.

Because ad market requires more and more transparency ad format, OneAD need to provide this kind of products, too.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/adc4f181-4acf-4d87-9ba0-8c1f1f4d9061/Untitled.png

Challenge

  1. Our competitors already provide a high customizable service in H5 banner design, with some magic interaction. However, it's not the way OneAD want, because it spend more effort and time to process a project but the H5 code may be hard to reuse - it's not scalable.
  2. According to the "Better Ads Standard", browsers like chrome and safari would punish the ads with large size ( over 4mb ). It will limit the usage of transparent image ( PNG ).
  3. The other way is to use SVG to replace PNG as much as possible. But the most popular tools used to create H5 banner - Adobe animate, can't afford to much SVG. Otherwise, the output H5 would play very slow on low-end phones like iPhone7 or some android phone.

Solution

As a designer who familiar with front-end technology, I define my challenge into two part：

  1. Find a way to make sure that we can use lots of SVG without playing animation slowly.
  2. Design some reusable H5 Banner template that can be separate into two part - interaction events ( develop by RD ) and animations ( create by designer ).

As soon as I start to survey possible technical solution, I found Lottie ( also called bodymovin ) can solve my problem.

The main use of Lottie is to let complex vector animation can be made in After Effect and exported as a JSON file that RD can also easily just put in web/APP, without write other motion script in form of CSS/JS.

And its second advantage is it can play transparent-background animation with flexible control include play backward, or jump into a special segment and play repeatedly. It's difficult to realize by normal video.

I took following actions to make the change happen：

  1. Convinced RD leader with the possibility of efficiency enhance with some reference articles

  2. Prove Lottie animation play better in OneAD advertisement -

    by making ad material in old way and Lottie, then let RD help me implement both of them and compare the result

  3. Get boss's support - I built some prototypes based on Lottie's flexible control functions and demo them to boss.

  4. Design new ad format prototype with client's material and propose to client. Once our proposal passed, then we develop it into real ad format that can be reuse in the future.

Result