Company Overview
Industry: Technology, Fintech, Finance
Challenge Areas: Workflow efficiency, file format optimization
Summary
Simplified user interface (UI) with lightweight animations: Wise leveraged dotLottie animations to create clear, bold designs to improve customer comprehension and strengthen brand consistency through features.
Efficient workflow and optimized performance: By using After Effects templates and compressing files with dotLottie, Wise streamlined design processes, and enabled collaboration between product and marketing teams.
Enhanced user experience (UX): The integration of dotLottie animations with simplified UI, product demos, photography, and storytelling solidified Wise’s reputation for user-friendly, dynamic and innovative user experience.
ROI
Increased comprehension of Wise key features.
Increased workflow efficiency by After Effect template, streamlining the process between motion designers and product designers.
dotLottie conversion allowed to create super light animation files.
About Wise
Wise is a global technology company, building the best way to move and manage the world’s money. Whether you’re sending money to another country, spending money abroad, or making and receiving international business payments, Wise is on a mission to make your life easier and save you money. Banks and financial services providers also use Wise’s innovative technology – typically behind the scenes – to power cross currency payments.
The 100+ strong design team keeps that vision at its core. Teams work together to craft experiences that make using money internationally simple, not scary.
The Challenge: Finding the right format of animation to balance tech constraints while pushing for creative boundaries
Following extensive customer research and a detailed design audit, Wise identified an opportunity to improve customers' understanding of the product offerings.
Research revealed customers struggled to understand the broader capabilities of the Wise account, which led to low customer comprehension and an inconsistent brand experience.
To address this concern, the team developed a new promotional assets featuring UI demos, photography, and compelling storytelling about the Wise account. But the challenge of integrating animations seamlessly into the website was greater than their expectations.
“Wise is a truly global product. We frequently update copy for translations and also refresh messaging. Using a file format that supports dynamic translations would reduce the workload for designers and engineers. Additionally, we needed support for multiple font sizes and widths,” said Sr. Motion Designer, Stephanie Martin.
“This process can often be challenging because generating and systematizing animations across platforms means we have to balance many tech constraints while also trying to push creative boundaries.”
Finding a Solution: The Search for Simplified, Lightweight Animation Format
Wise conducted rigorous testing of animation file formats to find the most efficient solution that didn’t compromise performance or quality. Multiple options, including WebM, dotLottie, and Rive, were evaluated based on file size, compatibility, and memory usage.
Two key considerations emerged:
Dynamic translations: Animations needed to support dynamic translations to minimize workload for designers and engineers.
Template versatility: Animations had to be templated for use in both web applications and marketing materials. A single workflow was essential for efficiency.
The Ultimate Choice: dotLottie Animations
After testing, Wise opted to use dotlottie for the UI animations layered on top of the Webm videos. This Solution allowed the team to achieve high level of compression without compromising in quality.
Efficiency was another cornerstone of the solution. The team leveraged After Effects to create shared templates that were easily accessible to both product and marketing teams. These templates streamlined collaboration, establishing a unified design framework.
“We chose to use dotLottie because it allowed us to use After Effects to produce our animations. Making a library for our templates in After Effects meant that we had one source of truth.” said Sr. Motion Designer, Stephanie Martin.
The Result: Improved Customer Comprehension and Streamlined Workflows
By integrating Lottie animations, Wise transformed its user experience, making complex financial interactions simpler and more intuitive while greatly enhancing customer comprehension.
The design-led updates to the US homepage, including refreshed imagery, product demos, and compelling storytelling showcased how design can drive engagement and customer acquisition.
In addition, the use of dotLottie for file compression reduced loading times, ensuring a faster and smoother browsing experience. The LottieFiles ecosystem with After Effects further streamlined workflows, saving designers valuable time and promoting collaboration between product and marketing teams.
Transforming Banking Experience with Advanced Animations
Wise chose dotLottie for its versatility and efficiency. Unlike other tools, dotLottie allowed Wise to create complex animations in After Effects and use them across teams. The ability to compress files in the LottieFiles platform into lighter formats like dotLottie ensured faster loading times, making the animations practical for web applications.
Following the success of this project, Wise is now developing a new set of promotional assets tailored for its business offerings. The company continues to prioritize simplified and impactful designs, with Lottie animations playing a central role in enhancing its user experience.
*To learn more about the Wise promo asset system design strategy, check out their Behance articles.
