Designing & Building Fintech App Using AI

Pointdexter app

Project OVERVIEW

  • About

    Pointdexter is an iOS app designed to help credit card users maximize their point rewards by intelligently recommending the best card for each purchase. Users can securely link their credit card accounts to track transactions, view total point balances across cards, and see potential rewards in dollar value. The app retroactively shows which card would have earned the most points, recommends better-suited credit cards based on actual spending patterns, and provides application links. Users can also set vacation budget goals, track progress with personalized insights, and get dynamic recommendations to reach their travel goals faster.

  • Project details

    Sector: Fintech

    Project Type: UX/UI Design / User Research

    Challenge: Build & design an app only using AI

    Team: Leo Gonzalez - Senior Product Designer / PM/ Vibe Coder

Design Brief

  • Problem

    Credit card users often struggle to maximize rewards due to complex reward structures and managing multiple cards. Many aren’t sure which card to use for each purchase and find it time-consuming to track point balances. There’s also no unified tool to set and track financial goals like vacation savings, making it difficult for users to optimize their credit card usage effectively.

  • Project Goal

    To design an AI-powered app that helps credit card users maximize rewards by recommending the best card for each purchase. The app will track rewards across multiple cards and let users set and track financial goals, such as saving for vacations. The entire process will be powered by AI tools for both design and development, ensuring intelligent, user-centric decision-making.

  • Strategy

    The strategy is to use AI tools for design, development, & research enabling personalized and efficient experiences. AI will provide tailored credit card recommendations based on spending patterns and offer real-time insights into maximizing rewards. The app will integrate goal tracking, allowing users to achieve savings targets faster using their rewards. By incorporating AI at every stage, the app will evolve based on user behavior, delivering a seamless and scalable solution.

Discovery

Discovery

Exploring user needs and market gaps to create the right product.

Product Strategy

To build Pointdexter entirely with AI, I developed a plan to identify the most effective tools for each stage. Using ChatGPT and Figjam AI, I conducted research, defined goals, and shaped the feature set. I then used AI to create wireframes and high-fidelity designs, and leveraged Lovable AI and AI-generated code to build a functional prototype—demonstrating the potential of an AI-first product workflow.

Competitive Analysis

I used ChatGPT to conduct an initial competitive analysis of the top four credit card rewards apps, including Mint, MaxRewards, NerdWallet, and CardPointers. This research helped identify key opportunity areas where Pointdexter could stand out, such as integrating goal tracking with rewards and offering real-time, AI-driven card recommendations. These insights were crucial in shaping the product's direction and ensuring it meets user needs in ways competitors don’t.

Deep dive into competitors

I downloaded each of the competitor apps and navigated their customer journeys to document key touchpoints, features, and potential opportunities. This hands-on exploration helped identify areas where Pointdexter could offer a more seamless experience and added value. Documenting these insights is crucial in the product development process, as it ensures the final product meets user needs while differentiating itself in a competitive market.

Analyzing reviews

I used ChatGPT to analyze user reviews from the App Store for each competitor app, focusing on recurring feedback to assess user sentiment. This approach helped identify key pain points and areas of frustration, providing valuable insights for prioritizing features and making design improvements. This process is essential for product design, ensuring the final product aligns with user needs and enhances satisfaction, ultimately improving its market success.

DEFINE

DEFINE

Turn research into clear objectives, create a roadmap, and establish product priorities.

Research Plan

I used Figjam AI to establish the foundation of our research plan, identifying key themes to explore and generating high-level interview questions. This streamlined the process, ensuring we focused on critical areas like user behavior and pain points, and provided a structured approach for gathering valuable insights to guide the design process.

Userinterviews

I used ChatGPT to create a research plan based on points and questions generated by Figjam AI, incorporating the project brief for additional context. This helped ensure the plan focused on critical user insights. A strong research plan is crucial in product design as it guides decision-making, prioritizes features, and ensures the product is user-centered, solving real problems and meeting user needs effectively.

User Testing Objectives:

  • Understand how credit card users currently track and maximize their point rewards and identify opportunities to improve Pointdexter’s features, such as transaction tracking, point recommendations, and goal-setting functionalities.

AI Interview Tech Stack

I used a combination of Google Meet, Otter AI, and ChatGPT to efficiently record, transcribe, and synthesize data from my user interviews. Google Meet allowed me to conduct the interviews seamlessly, while Otter AI automatically transcribed the conversations in real-time, capturing every detail. Afterward, I leveraged ChatGPT to quickly analyze the transcriptions, highlight key insights, and identify recurring themes or pain points. This streamlined process not only saved time but also ensured that I could easily extract valuable insights and turn them into actionable data to inform the product development.

Affinity Map

I used Figjam AI to create an affinity map by organizing insights from the user interviews into categories. This helped identify patterns and themes, making it easier to prioritize key areas for product development. The visual format allowed me to quickly turn raw data into a structured framework, highlighting user needs and opportunities for improvement.

IDEATE

IDEATE

Brainstorm, refine ideas, and explore different approaches to shape the product’s direction.

Mind Map

I used Figjam AI to generate a mind map for the app, visualizing core features, user flows, and key components. This was crucial for product development, as it helped prioritize tasks, align features with user needs, and identify gaps early in the process. The mind map provided a clear structure for planning and decision-making, ensuring efficient development.

User flow

I used Figjam AI to create a user flow based on the feature set and project brief, visualizing the user journey from onboarding to rewards management. This helped identify potential friction points and ensure a smooth, intuitive experience by logically connecting all features. It was a key tool for aligning design decisions with user needs and optimizing the overall experience.

UXPILOT AI

I used UXPilot AI to generate wireframes based on the project brief and product feature set, quickly visualizing key app screens and interactions. This was crucial for streamlining the design process and ensuring alignment with product goals. Leveraging AI allowed for rapid iteration and efficient development of functional wireframes that could be refined as the product evolved.

WIREFRAMES

I generated several rounds of wireframes to iterate and test different design concepts, refining the layout and functionality with each round. The final round of wireframes included all the necessary feature sets and design patterns, ensuring that every aspect of the app was covered before moving forward with development. This iteration process was crucial for validating design decisions, allowing me to test and refine the user experience based on feedback and functionality, ensuring the app was ready for the next phase of building.

DESIGN SYSTEM

DESIGN SYSTEM

Develop a functional model to replicate the user experience and validate features before full development.

BRANDING

I used ChatGPT to generate a logo, app icon, and brand system based on the project brief, competitive analysis, and my personal input. The AI-created assets aligned with the app’s goals and target audience, offering a cohesive visual identity. This approach efficiently helped refine the brand elements, ensuring they matched the overall vision for the product.

Design System

I used ChatGPT to build out a design system in plain text, outlining the branding elements, typography, color palette, and UI components based on the generated brand assets. This served as a foundational reference for the app's visual language. I then leveraged UXPilot AI to create a comprehensive design system file, incorporating all the necessary documentation, UI elements, and design specifications required for development. This streamlined approach ensured that the design system was organized, consistent, and ready for implementation, making the building process more efficient and aligned with the overall brand vision.

FINAL DESIGNS

FINAL DESIGNS

Final designs including mockups and link to interact with live prototype

BUILDING APP WITH LOVABLE AI

Lastly, I used Lovable to quickly prototype the app by feeding the AI the source code for each screen along with the design system styling. The AI seamlessly combined the design elements with the code, creating an interactive prototype in under two hours. This process was incredibly efficient, allowing me to quickly test and refine the user experience while ensuring the final prototype closely aligned with the design system and overall vision for the app.