Skip to content

Overview

This page documents the various user flows in the MyPledge app. Each flow is represented as a flowchart, and important notes are provided using admonitions.

Table of Contents

Introduction

A new user is greeted by both the Launch Screen and the Splash Screen. The splash screen displays three buttons: - Log In - Register - Continue as Guest

Each button leads to a different flow. Below are the detailed flows.

Guest Flow

flowchart LR
    A(["Splash Screen"]) --> B(["Onboarding Carousel (9 Items)"])
    B --> C(["Partners & Sponsors Screen"])
    C --> D(["Tap Skip Button"])
    D --> A

Note

The individual list components holding the sponsors, when tapped, link to external websites of these sponsors.

Sign Up Flow

flowchart TD
    A(["Splash Screen"]) --> B(["Tap 'Register'"])
    B --> C(["Sign Up Screen"])
    C --> D(["Create Password Screen"])
    D --> E(["Account Created Successfully"])
    E --> F(["Enable Passkeys"])
    F -- "Tap Enable" --> G(["Passkey Setup Process"])
    F -- "Tap Skip" --> H(["Onboarding Carousel"])
    H --> I(["Sponsors Screen"])

Note

The onboarding carousel is scrollable by the user (swipe left/right) instead of only using buttons.

Adding Earning Frequency (Post Sign-Up)

At the end of the onboarding carousel in the sign up flow, users are directed to add their earning frequency.

flowchart TD
    A(["Sponsors Screen"])
    A --> B(["How Often Do You Save?"])
    B --> C(["Tap Continue"])
    C --> D(["How Much Do You Earn per Selected Option"])
    D --> E(["Homescreen"])

Log In Flow

flowchart LR
    A(["Splash Screen"])
    A --> B(["Tap 'Log In'"])
    B --> C(["Log In Screen"])
    C --> D(["Enter Credentials"])
    D --> E(["Log In Successful"])
    E --> F(["Homescreen"])

Reset Password Flow

flowchart TD
    A(["Log In Screen"])
    A --> B(["Tap 'Forgot Password'"])
    B --> C(["Reset Password Request Screen"])
    C --> D(["Submit Email/Phone"])
    D --> E(["Reset Link/OTP Sent"])
    E --> F(["Reset Password Screen"])
    F --> G(["Password Reset Successful"])
    G --> H(["Log In Screen"])

Returning User Flow

flowchart LR
    A(["Splash Screen"])
    A --> B(["Tap 'Returning User'"])
    B --> C(["Log In Screen"])
    C --> D(["Enter Credentials"])
    D --> E(["Log In Successful"])
    E --> F(["Homescreen"])

Documentation coming soon…

Goals Flows

Documentation coming soon…

Saving Plans Flows

Documentation coming soon…

Profile Flows

Documentation coming soon…