Monivate
Financial Learning Made Simple
Monivate (ex Boon) is a cross-platform web tool that guides users through personalized learning journeys, combining theory with practical exercises in investing and trading. Featuring a gamified approach, interactive quizzes, a stock simulator, and an AI mentor, Monivate makes complex financial concepts accessible and enjoyable.
Client
Monivate
Services
Product Design, UI/UX Design, Visual Identity, Marketing Design, Interaction Design
Industries
EdTech
Date
2024
Overview
As a lead designer, I joined a diverse team of over 20 specialists at the project's inception. The product team sought a designer with a background in game development and educational methodologies. My experience at a major gaming company, coupled with a degree in philology and teaching experience, made me an ideal fit for this role.
The vision was to transform financial education through an immersive, game-like experience. We aimed to make complex financial concepts, using gamification, personalized journeys, and interactive elements. The goal was to transform finance education into an accessible, enjoyable daily habit for users.
In Market Research We Trust
The initial phase focused on a comprehensive analysis of the apps of major players in the market, studying the features, structure, and design approaches. This research gave us valuable insights to guide our product development. Using this market knowledge, I led the creation of five different design concepts.
Our product team tested each with potential users, helping us identify the best direction for our MVP. With complete design freedom, I developed the product's visual style based on the winning concept and began creating a design library. This approach ensured consistency in our future work and laid a solid foundation for product expansion.
From Concept to MVP in Four Months
In the initial four months, we focused on implementing Monivate's core functionality, and prioritized key features to deliver maximum value while keeping the MVP lean. We designed a comprehensive level and reward system with in-app currency and XP. To personalize the user experience, we created an extensive onboarding process that assessed users' knowledge and interests, laying the groundwork for the core educational program.
Throughout this phase, we maintained a rapid iterative approach. We continuously refined the user interface and experience based on internal testing and early user feedback. This agile methodology allowed us to efficiently develop and deploy a functional MVP to production, setting the stage for future enhancements and feature expansions.
Look, I know… That browser navigation bar might look like an eyesore, but trust me, it's there for a reason.
Why? To show you the real picture and get you familiar with this space limitation. On smaller devices, it was becoming a real headache. And here's the kicker - users often access the product through social media internal browsers. That's a few dozen extra pixels eaten up by additional navigation bars. We kept running tests and tweaking the design to make sure everything still worked smoothly
For the same reason, at some point we had to fix the CTA and navigation buttons at the bottom of the viewport. Our usability tests showed that users often simply couldn't find them. And let's be honest, it's especially frustrating when this happens on payment screens.
Alright, time to talk about the tough stuff — the problems we had to solve along the way
CHALLENGE #1
Bringing the Product to Life:
The Magic of Micro-Animations & Volume
To enhance Monivate's gamification aspect, we integrated micro-animations throughout the interface. These subtle animated elements were designed to provide instant feedback and elevate user engagement. I created a suite of lightweight, purposeful animations using a combination of Figma and Lottie plugins. These ranged from simple transitions for task completion to celebratory effects for user achievements. For more complex screen animations, I prepared detailed instructions for our front-end team to ensure accurate implementation.
To further enhance Monivate's appeal, I aimed to make the application more lively and 'pleasant to touch'. For interface elements such as buttons used in learning modules, quizzes, and the progress map, I adopted a more playful approach. By carefully designing different states for these elements, I created a sense of depth and dimensionality. This technique moved beyond flat design, giving users a more tactile and immersive experience as they interacted with the app.
CHALLENGE #2
Translating Finance into Visuals:
The 3000+ Illustration Challenge
The backbone of a learning app is, of course, content. While financial experts were engaged to compile the theoretical part, my task was to create auxiliary graphic materials to support and enhance the learning experience.
Over the course of the product's development, I produced an extensive library of over 3000 illustrations (I still can't believe that number myself!). Most of these were generated using Midjourney, but about a third were hand-drawn. This included creating materials for two advanced courses on trading and analytics, which required the visualization of complex charts and financial concepts.
CHALLENGE #3
Optimizing Desktop Experiences with Minimal Development Effort
While the primary focus was on mobile devices, the need arose to adapt Monivate for desktop use. After several iterations, an elegant solution emerged: implementing a constrained screen layout with content in a bottom sheet for the desktop version. This approach created a uniform user experience across all devices, maintaining the familiar mobile interface. The solution not only ensured design consistency but also significantly reduced development time for cross-platform adaptation.
Time to Make It Fun!
This part's my fav. In designing Monivate, we went all-in on gamification. Added personalized profiles, progress tracking, achievement badges, and a leaderboard for friendly competition. Customizable avatars let users make it their own.
Here's where we pulled our AI trick again: for generating badges and avatars. This approach not only turbo-charged our design process but also kept everything looking consistently awesome. It's pretty cool how AI can be such a time-saver while keeping our visuals on point.
I can't finish the talk about this project without giving props to the amazing folks I had the privilege of working with
Our analysts, marketers, product managers, and developers - each one nailed their role. This meant I could focus on my part without second-guessing, make data-backed decisions, and adapt swiftly based on solid feedback.
I was also fortunate to bring on board and manage some exceptional freelance designers as we grew. Their contributions were key in managing the expanding workload and keeping the project on course as its scope increased.