When there’s a job fair, chances are high you can find a JIDOKA stand.
Paula, our HR officer, often networks with people who are interested in our company, what we stand for, what we do and how we do it. Since an image says more than a 1000 words and to emphasize her pitch, she would like to have some sort of interactive way to tell the JIDOKA story consistently to those who are interested. As a side note, we would also like to make some sort of advertisement for our mobile development services.
During our JIDOKA hackathon weekend, a team, consisting of Chris, Bjorn, Jordan and Dieter, tried to create a proof of concept of an app called the “Showcase app”. This app is an iOS native app running on an iPad that can serve as a guideline while Paula is giving her pitch.
How do you mean: “interactive” ?
During the inception of this proof of concept, our first challenge was to decide in what way we could make this app interactive. Sure we can just copy and paste raw content that was given to us by Paula and be done with it, but that wouldn’t be sufficient. Instead we had two ways that could make the app more interactive. One way was the knowledge that Chris, our designer, had gained about Adobe After Effects.
With this handy tool and the existence of Airbnb’s Lottie framework we could now easily deliver complex animations in our apps.
The second way was the need of cool transitions between screens. We solved this problem by using a framework called “Hero” (https://github.com/HeroTransitions/Hero) where we could use all sorts of cool transitions that would spice up the app.
Damn you, Hero API!
For content, we received a powerpoint slide deck that Paula currently uses as a guideline, so our goal for this weekend was to transfer all of the content into the showcase app.
It turned out that this was an unachievable goal due to the massive api that came with Hero! This api introduced us to endless possibilities of custom transitions. Since we didn’t have a storyboard to fallback to, and didn’t want to use the same transition over and over, we lost a lot of time overthinking transitions.
The journey from animation to code
To brighten up the pitch at the job fairs, Paula uses several static design (infographics, pictures, etc.) in her presentation. Like we mentioned earlier, we want to make the presentation more interactive and that’s where the Lottie framework kicks in.
Sometimes it takes a lot of time to create an animation on mobile from scratch, time we did not have during the hackathon. With the help of the Lottie framework, we can render vector based animation (best quality of animations and design) to code. To create these vector based animation, we first have to create a vector design in Sketch or Adobe Illustrator for example. Because there is no quality-loss when saving as vectors, you can convert these design easily in After Effects to different vector layers which you can animate them separately.
Before you can render your animation to code, you first have to install the plugin Bodymovin. With this plugin you can render your composition to a JSON file, and that’s it! You’ve created easily an vector based animation which you can use later in your application.
To be honest, not everything went entirely smoothly. During the process of placing the animation within the app we encountered some export issues for some our animations. Some layers were not entirely rendered correctly or ignored some important transformation keyframes. The downside was that you could not see immediately what went wrong. It could be the shape layer in After Effects or some transformation effects were not supported in Lottie.
Chris noticed that when you import your vector file into After Effects, you really have to convert each shape into a separate shape layer, even if you don’t use that specific object of your design. The reason was when you import a vector layer, After Effects doesn’t recognise it immediately as a shape layer. When you convert it into a shape layer, you have more control of that object’s animation. A normal vector layer could not be rendered with Bodymovin. On the other hand some animation had to be remade because some effects were not rendered correctly.
You can view some previews of our animation by visiting the following links:
- https://lottiefiles.com/share/J7MmyC
- https://lottiefiles.com/share/NehlHl
- https://lottiefiles.com/share/u4qls8
- https://lottiefiles.com/share/7eHwTT
Once this JSON was ready for our mobile developers, all they had to do was import this JSON in their xcode project, reference the Lottie framework and bingo! Now we had a nice custom animation without the hassle of writing a lot of code just for one animation.
So, what’s next?
Since this app is just a proof of concept, not enough content is currently available and let’s be honest, nobody wants an angry HR Officer, we decided to make an internship out of it! To make this project big enough as an internship, we decided to include a backend as well.
This backend will give Paula the flexibility to change content on the fly when needed, without having to alter the mobile app in any way.
As a backend, we decided to use Strapi (https://strapi.io/).
This is an open source headless CMS that allows us to quickly define content types and insert content in a database with a handy control panel as a bonus. By using Strapi, our intern Walid, will gain the knowledge what it is to set up a headless CMS, without having to lose a lot of time maintaining a backend. In that way he can focus on the thing he loves to do, which is mobile development.
We hope you liked this short read about our experiences during our hackathon and maybe you will see us at a job fair near you or another networking event!
