Cleo
This case study focuses on my work at Cleo, a finance app featuring an AI assistant that helps users in managing their money. Cleo offers features such as budgeting, savings goals, and cash advances, supporting over 7 million users. During my internship, I was tasked with designing and developing a new feature that would allow users to "lock" their savings, creating a buffer to prevent unnecessary withdrawals.
As a UX Design & Frontend Engineer Intern at Cleo from June to August 2024, I was responsible for defining the problem, conducting user research, designing wireframes and prototypes, and developing the front-end of the final product.
The Challenge
User feedback indicated a need for a buffer or added friction to discourage unnecessary withdrawals from their savings. Users often viewed their savings as easily accessible, making it tempting to dip into these funds without much thought. While there had been initial brainstorming for a solution after the problem was identified, there was no finalized concept.
My role was to scope, design, and implement a solution that would effectively address this user need. The hypothesis of this solution was that adding a padlock to a savings account would reduce the % of users who withdraw from savings.
Ideation
Several factors and constraints were considered when designing the optimal solution. First, it was important to reassure users that their funds would remain accessible at all times and that the feature wasn’t truly “locking” their savings away. The solution also needed to be interactive and engaging while aligning with Cleo's existing design principles. Additionally, it was important that the feature not only discouraged unnecessary withdrawals but also provided users with information on the benefits of saving, motivating them to continue building their savings.
Several solutions were explored during the ideation phase. These ranged from a simple confirmation card asking users if they were sure about their decision to withdraw, to more interactive concepts like a game or an informative carousel showcasing the benefits of saving. Ultimately, we decided to leverage Cleo's AI assistant to provide users with a more engaging experience.
The final chosen solution was a "Padlock" feature that users could enable in their savings settings. Once activated, the withdrawal button on the savings overview screen would be replaced with an "Unlock" button. Users then had the additional option to turn on a chat buffer. If no buffer was selected, unlocking funds could be done with a simple click. However, if the buffer was activated, users would be guided through a conversation with Cleo's AI assistant, where they would be asked to confirm their decision and reminded of their savings progress before being able to unlock their funds.
User Research
Before finalizing the design, we conducted user research by distributing a questionnaire to target users. The feedback focused on the intuitiveness of the design, ease of understanding, and whether users would adopt the Chat Buffer feature.
Overall, the response was overwhelmingly positive. Users rated the intuitiveness of the design an average of 4.8/5, with most indicating that they would use the Chat Buffer. "Padlocked Savings" was the preferred name for the feature as it was the most understandable (some other options were “locked savings”, “piggybank”, and “guard savings”).
Additionally, we explored how Cleo's AI assistant could best guide users through the process. Cleo offers two conversational modes: "hype" (encouraging users through praise) and "roast" (playfully critiquing financial habits). Based on user input, we decided to offer the option to select a preferred tone for the chat buffer, making the experience both functional and engaging.
Design
The designs and prototypes were created using Figma, with multiple iterations testing various UI placements for the padlock settings, buffer options, and user flow. A key decision was to keep the padlock settings as a separate area where users could toggle the feature on or off without affecting their savings balance. The chat buffer was only triggered when users attempted to unlock their savings from the main savings screen.
The following designs chosen below demonstrate the ideas and iterations for choosing a buffer after enabling padlocked savings. The designs were later streamlined to have two options – no buffer or chat buffer – and the choice of the chat's tone was moved to the chat flow itself.
User Flow
The final user flow was designed to be simple and intuitive. Users could access their savings overview screen, navigate to the padlock settings, and enable the padlock. If they activated the buffer, they would be guided through a chat flow when attempting to unlock their savings, while those who opted not to use the buffer could unlock funds directly from the main savings page.
Final Designs
The final designs included updates to the savings overview screen, a new padlock settings interface, and confirmation dialogs to ensure that users understood their decisions before unlocking savings.
Development and Testing
After finalizing the designs, I implemented the front-end of the feature using React Native. My team worked on integrating the chat flow and backend, ensuring a smooth and engaging user experience. The result was a feature that effectively addressed user concerns about dipping into savings, while still maintaining easy access to funds when needed.
After a team testing session where we explored various scenarios with test users, we identified minimal bugs. The feature was then rolled out for A/B testing, with half of the users in the applicable subscription tier gaining access. Post-launch, the metrics are being monitored to assess the feature's performance and impact.
Conclusion
My experience at Cleo was invaluable, teaching me the balance between usability and engagement. I learned firsthand how even small design choices can significantly influence user behavior, and was able to expand my UX design, research, and front-end development skills. Beyond the technical aspects, I gained practical industry experience in agile methodology, participating in team sprints and collaborating across disciplines.
It was a privilege to work with Cleo's "Savings Squad," where I collaborated closely with product managers, front-end and back-end developers, UX designers, researchers, and content writers. Their constant feedback helped me grow professionally and acquire new skills.