01: Manafa Story Insights
The team at Manafa, a financial investment company in Riyadh, Saudi Arabia, reached out for assistance with 3D illustrations and animation for a new recap/story insights feature they plan to launch on their app.
These sets of illustrations are intended to support highlights and recaps of their customer investment activity throughout the year.
Working closely with the design team, I was responsible for the 3D design development and animation. I helped define a compelling narrative, working off pre-established concepts and eventually designing kinetic sequences that capture the essence and flow of these stories as they pertain to Manafa and her customers.
The design and animation were done in Cinema 4D, rendered in Redshift, and composited in After Effects.
The final deliverable was handed off to the developers in GIF formats.
Role:
3D Design (Modeling, Lighting, Texturing)
3D Animation
Illustrations
02: Interactive 3D animation
The team at Manafa reached out once again for assistance with some interactive 3D animation. This time, they needed the animation to be driven by user input. This was part of the new feature they intend to roll out on the app.
The objective was clear. To enhance the user experience on the app by allowing the user to interact with a progressive indicative model of a typical investment journey from 0 to 20 years.
Once the user lands on the page, the year slider starts at 0 years, with the Riyal gold coin taking center stage. As the user taps or slides the year indicator to the right, the investment tree begins to grow and bear fruit (investment returns - presented as Riyal coins) until it reaches 20 years, where we see a large cluster of coins on the investment tree at full maturity.
I worked closely with the design and development team and was responsible for the 3D design development, animation, and interaction.
Role:
3D Design (Tree Modeling, Lighting, Texturing)
3D Animation (Growth simulation)
Interaction Design in Rive
Moodboard
This reference board guided the initial direction and serves as a driver for the creative decisions throughout the design and modelling phase. From the structure of the investment tree, to the shape of the leaves, as well as how the coins will be represented.
Sketch
At this stage, alignment with the client was crucial, and as a result, focus was on blocking out a rough progression of the tree growth and how it responds to user interaction.
The resting state when the user lands on this page starts with the Riyal gold coin and the slider at year 0. As the user slides along to the right, we begin to see the trunk of the 'investment tree' sprouting up till it begins to yield fruit (returns) until the input from the user gets to year 20.
Still illustration testing on dashboard
Animation - Tree growth simulation
UI interaction - Rive state machine layers
Conclusion
The final deliverable was issued in Riv and Gif formats for flexibility. This was to offset file size considerations, as large file sizes had an impact on the performance of the page (loading times). The process from start to finish was exciting. I learned a lot along the way - Crafting interactions and micro animations in Rive, optimizing 3D renders for web interaction, and collaborating with devs for the best possible outcome.
I am a lot more comfortable handling client requests involving web interactions. This project encouraged me to fully adopt Rive in my motion design workflow - another weapon in my arsenal.
Thank you for reading through this case study.
Cheers and see you on the next one!