While designing Wizard based flows for creating IoT apps for a semi-technical user persona I came up with an animated component explainer storyline in a gif image for explaining technical concepts .

This was widely appreciated and planned to be rolled out into SAP’s WebIde wizard based app creator which previously had the provision of ONLY a simple image (technical constraint max 300kb ).

Do note that the designs are not extremely “cool” like you would find eye candy animations in Dribble. This is an explainer animation so the style is muted to convey information within technical limits 🙂

MY ROLE

Along with an intern I created a lot of motion design ideas by first prototyping basic animation gif’s in ppt (around a 100 different protos ) and then telling the story of the entire component library which could be used in the Wizard based app creator.

Extremely tough and challenging was the idea that we couldn’t implement a nice hi-fidelity mp4 video as the technical constraint was only a static image. So I hit upon the idea to do a gif explainer. This was also not possible as the SAP graphics library was not allowing gif’s. I had to influence across organizational silos to contact the responsible team in Israel , pitch the idea to them and then have them enable Gif’s ! Which they loved !

BUT WAIT !

After making some really fancy animated gif’s (2Mb in size) and getting ready to ship they suddenly tell they can only allow maximum 300kb for each wizard as they would like to enable this animated gif feature across the entire SAP WebIDE template builders and if thousands of developers start creating 2mb files our storage would be in a soup ! Another technical constraint !

Back to the drawing board again after 2 months of perfecting the story line and visual style

TRYING OUT A WIRE FRAME STYLE WITH MULTIPLE COLOR OPTIONS TO GET A 30 sec ANIMATION WITHIN 300kb !

THE FINAL SOLUTION : IN BLUE : A TRADEOFF BETWEEN STYLE AND SIZE IN 254kb

The style and idea was made into design guidelines by the SAP WebIde team to for people to use in their own wizard based app builders.