Danny

Elevating Engagement for Danny, a Financial Planner Mobile App

A redesign that transforms a static home page into an interactive experience, driving user engagement with personalized insights, mission progress, and data visualizations.

User Interviews

Visual Design

Prototyping

Project Overview

Role: Freelance UX Designer

Tools: Figma, Miro, Hotjar

Team: 2 UX designers, 1 product manager, 3 software engineers

Project Length: 1 month

Methods Used: User research, heat mapping, prototyping, visual design

Problem

The initial home page of the financial planner app, Danny, lacked interactivity and was failing to engage users, resulting in low retention and minimal interaction with key app features like financial missions and health score tracking.

The initial home page of the financial planner app lacked interactivity and was failing to engage users, resulting in low retention and minimal interaction with key app features like financial missions and health score tracking.

Solution

Redesign the home page with personalized insights, mission progress tracking, and interactive elements that motivate users to engage with the app regularly.

Redesign the home page with personalized insights, mission progress tracking, and interactive elements that motivate users to engage with the app regularly.

Design Process - The Double Diamond

Discover, Define, Develop, Deliver

Discover

When the client approached us, they had concerns that the original home page was not resonating with users. So, we gathered qualitative feedback from users through surveys and 15 user interviews. Key findings included:

  • Bland User Interface: The old home page was text-heavy, lacked interactive elements, and had limited visual appeal, leading to user disengagement.

  • Lack of Motivational Triggers: There was no clear prompt for users to take action to improve their financial status.

  • Existing users felt the app’s home page did not give enough information or motivation to return regularly.

  • A large percentage of users felt discouraged when seeing their low financial health score. The app's largest user demographic are young professionals who have far ways to go to reach financial freedom, resulting in lower scores.


Heat Mapping Analysis:

  • High Engagement with Health Score: The heat map revealed that users consistently focused on and clicked the health score module more than any other element on the home screen. This behavior suggests that users were highly interested in monitoring their financial health status.

  • Low Interaction with Missions: In contrast, the mission-related features, such as budgeting tasks and financial planning tips, received minimal attention. Despite these elements being essential for guiding users towards financial goals, they were overlooked.


Key Insight

  • Our primary demographic consists of young professionals who are generally at the beginning of their financial journey and far from achieving financial freedom. As a result, most users have lower health scores based on their current financial standing. The strong focus on the health score, combined with generally low scores, could discourage users rather than motivate them, potentially affecting their engagement with the app.


Define

Problem Statement: Danny’s existing home page fails to engage users with its lack of personalized insights and interactive elements, resulting in low retention and minimal use of key features.


Based on the interviews, we created two main personas:

  • Persona A: Sarah, a young professional aiming to save more effectively. She seeks visual progress tracking and actionable guidance.

  • Persona B: Mark, a mid-career professional focusing on debt management. He values insights into financial health and wants reminders to stay on track.

We mapped each persona's journey, highlighting moments where they would benefit from mission-based interactions and health score updates.


Goals for Redesign

  • Increase engagement by incorporating personalized feedback on financial health and progress.

  • Promote interaction with “missions” by making them visually prominent and actionable.

  • Provide a clear call-to-action that motivates users to check in regularly.

We analyzed apps such as YNAB and Acorns to identify best practices in engaging users through home pages. Key takeaways included:

  • Using interactive elements like progress bars and goal tracking increased user retention.

  • Personalized feedback that’s instantly visible on the home page helped to motivate users to take action.

Develop

Objective: Generate, prototype, and test design solutions based on the defined goals.

  1. Ideation Workshops
    We brainstormed multiple design solutions, focusing on how to communicate progress and personalize content effectively. Key ideas included:

    • A prominent health score display on the home screen.

    • Personalized mission progress that would motivate users to complete tasks.

    • Interactive elements that encourage users to explore and engage.

  2. Wireframing & Prototyping

    • Low-Fidelity Wireframes: Created initial wireframes to outline placement of health score, mission tracker, and interactive elements.

    • Mid to High-Fidelity Prototypes: Refined the design in Figma with higher fidelity, adding UI details for mission cards, personalized health score modules, and clear call-to-action buttons.

  3. User Testing
    We conducted usability tests with five users from our target audience to validate the wireframe's flow and intuitiveness.
    Findings:

    • Users appreciated the health score display as an indicator of their financial status.

    • The mission cards were intuitive and drew attention, motivating users to click through.

    • Users suggested making the health score interactive, allowing them to view potential actions to improve their score.

Deliver

Final Design


The final design is a more engaging, visually-driven home page that provides users with actionable financial insights and progress tracking.


  1. Health Score Section

    • Visual Representation: A circular graph with a color-coded percentage showing the user's financial health, alongside a prompt to improve it by a specific percentage (e.g., "Improve by 8%").

    • Instant Insights: Below the score, users receive personalized feedback on how to improve their score, such as updating their financial journal or adjusting their savings.

  2. Mission Progress Section

    • Mission Infographics: Each mission (e.g., budgeting or debt management) is accompanied by an infographic representing the topic visually, making it easier for users to understand the focus of each mission.

    • Progress Bar: Each mission displays a progress bar, showing how much the user has completed.

    • Call-to-Action Buttons: Clear and prominent "Continue Mission" or "Start Mission" buttons invite users to stay on track with their financial goals.


A/B Testing

  • After implementing the final design, we conducted A/B testing to measure engagement against the original version. The redesigned home page showed a 35% increase in interaction with the health score and 40% more clicks on mission-based tasks.

Impact

Quantitative Metrics

Following the launch of the new home page:

  • User Engagement: The number of users interacting with missions increased by 34% within the first month.

  • Personalization: Users appreciated the tailored insights, with 70% reporting that they found the feedback useful for improving their financial situation.

Business Impact
  • Premium Conversions: Increased premium subscriptions by 15%, driven by the added value of the tailored financial planning insights.

  • Reduced Churn: Churn rate dropped by 18% after the launch of the interactive home page.

Lights on·off