Tide

Competition is fierce in today's digital banking world, and a the quality of the user experience can make or break customer loyalty. Design is central to shaping this experience, which is why Tide, a UK financial technology company, established a product area called Experience Foundation. This team of product managers and designers have one goal, to evolve the platform's end-to-end user experiences to drive greater value and differentiation.

Tide, headquartered in London, is a fintech company that provides mobile-first banking services to small and medium sized enterprises. It enables businesses to set up a current account and get instant access to various financial services (including automated bookkeeping and integrated invoicing). Launched in 2017, Tide is now the leading business financial platform in the UK, with 575,000 SME members (10% market share) and more than 250,000 SMEs in India.

We had a brief chat with Abhijeet Ranjan, a product designer on Tide's Experience Foundation (XF) team. In this article, Abhijeet shares how Lottielab transformed Tide's approach to design, making animation accessible to the entire team and streamlining their workflow. From simplifying complex processes to enabling creative freedom, discover how Lottielab became an essential tool in Tide's design toolkit.

Discovering Lottielab

Abhijeet, an experienced motion designer proficient in After Effects, first encountered Lottielab on social media. The team at Tide was searching for a tool that could democratise animation creation across their design teams. "I am very good with After Effects and many other tools, but we needed a tool that was easy for all our designers to use, not just the motion experts," Abhijeet explains. "Even for folks on the product or onboarding teams, we wanted a tool that was accessible to them so they could add some simple animations to their designs."

Why Lottielab?

For Abhijeet, Lottielab's ability to work harmoniously with existing tools like Figma and After Effects was a stand out feature. "The big issue we had with the tools we tried before was support with our existing tools like Figma and After Effects. It just wasn't there. For me, the game changer was that I could switch from After Effects to Lottielab seamlessly. Being able to copy and paste straight from After Effects saved me so much time. I used to spend ages on asset management, importing from one tool to the other, but now I can focus on actually making animations."

One of the things of note to Abhijeet was the high level of craft and respect for the little details that Lottielab had. "Before, we had to manually recreate timelines from After Effects, specifying every little detail like opacity changes down to the millisecond. It was tedious. I also like the built in seconds to milliseconds conversion, which is handy. Most motion design happens in milliseconds, a one second transition is an eternity in this world."

This attention to detail doesn't stop inside the design tool, but also applies to the collaboration and handoff features. Abhijeet claims that "Lottielab's handoff makes building our motion design system 10x easier". Since every facet of Lottielab has been built with intention and great care for the details, each small detail eventually compounds into a large productivity gain for users.

Lottielab's accessibility for designers of all skill levels was also a significant advantage. Despite being a trained After Effects user, one of Abhijeet's favourite features was still the ease of use of the tool. "Lottielab's UI is really simple and intuitive. If I showed After Effects to my team, they'd be totally lost. But with Lottielab, I just shared a YouTube tutorial, and the next day, they were comfortable using it, even without any prior motion design experience."

Beyond these technical features, Lottielab's community turned out to be an invaluable resource. "We imported this illustration and wanted to add a simple shine effect. I was surprised to find a pre made shine effect in the community files. I just copied and pasted it, and it worked perfectly! That was a real 'aha' moment for me. Usually, I'd have to create that effect manually in some other illustration software and then animate it with masks. But with LottieLab, I could just grab it from the community and drop it right in. This made me realise that if someone on my team, or even someone from the community, created an effect I liked, I could just copy and paste it into my project. No need to reinvent the wheel every time! That was a huge time saver, and it opened up a whole new world of possibilities for collaboration and efficiency."

So, would you recommend Lottielab to other designers?

"Absolutely. I've become a big advocate for Lottielab since I started using it. It's just so easy to use. Four years ago, when I started in motion design After Effects was the go to tool, even for simple product animations. However, it was such a long process to learn and use, it's not worth it for most people. Being able to just pick up a tool and get on with the actual work is such a freeing feeling. That's why I'd recommend LottieLab."

As Tide prepares for a major revamp to their entire illustration system, Lottielab has become their tool of choice. "We plan to animate most of it, and Lottielab will be our main tool," Abhijeet explains. "After Effects is too complex, and I'm the only one on the team who knows how to use it. With hundreds of animations to create, we need something accessible to everyone."

Lottielab didn't just change how Tide creates animations, it transformed their entire approach to design, empowering every team member to bring more magic to their work. As Tide moves forward with their ambitious redesign, Lottielab is helping them to bring their vision to life, from the design stage all the way through to production.