Aspiration App Logic

SketchSystems.spec

Aspiration App Logic
  open app from home screen -> Has User Previously Logged In?

Logged Out Flow
  Has User Previously Logged In?
    yes -> Is Device Authentication Set Up?
    no -> App Welcome Screen

  App Welcome Screen
    tap login -> Is Device Authentication Set Up?
    tap sign up -> Signup Flow

  Is Device Authentication Set Up?
    yes - Touch ID -> Check Authentication?
    yes - Face ID -> Check Authentication?
    no -> Login Form

  Check Authentication?
    pass -> Load Account Info
    fail -> Login Form

  Login Form
    email field active
      next -> password field active

    password field active
      done -> login successful?

    login -> login successful?

    dismiss -> App Welcome Screen

  login successful?
    true -> MFA Options
    false -> Login Error

  Login Error
    dismiss -> Login Form

  MFA Options
    request code via sms -> Enter MFA Code
    request code via email -> Enter MFA Code

  Enter MFA Code
    submit -> Correct MFA?

  Correct MFA?
    true -> Summary View
    false -> Enter MFA Code

  Load Account Info
    success -> Summary View
    fail -> Login Error

Tab Bar
  summary -> Summary
  manage -> Manage
  impact -> Impact
  settings -> Settings
  
  Summary*
    Summary View*
      tap profile image in header -> Profile Menu Overlay
      tap an account -> Account Details

    Profile Menu Overlay
      dismiss -> Summary
      tap invite friends -> Invite A Friend
      contact customer support -> Customer Support
      send app feedback -> Feedback Overlay
      log out -> Login Form
      
    Feedback Overlay
      close -> Profile Menu Overlay
      submit -> Feedback Sent
      
    Feedback Sent
      done -> Profile Menu Overlay
      
    Account Details
      pull-to-refresh -> Account Details
      tap a transaction -> Transaction Detail

    Transaction Detail
      dismiss -> Account Details
      get help with this transaction -> Get Help Modal
    
    Get Help Modal
      dismiss -> Transaction Detail
      submit -> Help Request Sent
    
    Help Request Sent
      done -> Transaction Detail
  Manage
    Manage View*
      deposits -> Deposits
      transfers -> Transfers
      payments -> Payments
      buy sell -> Buy Sell
      recurring investments -> Recurring Investments
    Deposits
      Deposit List
        back -> Manage View
        deposit a check -> Deposit Flow
        deposit record -> Receipt Card
      Deposit Flow
        cancel -> Deposit List
    Transfers
      Scheduled Transfer List
        back -> Manage View
        schedule a transfer -> Transfer Flow
        History -> History List
      History List
        back -> Manage View
        schedule a transfer -> Transfer Flow
        Scheduled -> Scheduled Transfer List
  
      Transfer Flow
        cancel -> Scheduled Transfer List
  
    Payments
      Scheduled Payment List
        Sent -> Sent List
      Sent List
        Scheduled -> Scheduled Payment List
      send a payment -> Payment Flow
    Buy Sell
    Recurring Investments
    Payment Flow
    Buy Sell Flow
    Recurring Investment Flow
    Receipt Card

  Impact
    info button -> What is AIM?
    Current Month
      tap History tab -> History
    History
      tap Current Month tab -> Current Month
    What is AIM?
      Got it -> Impact
      Learn more on web -> AIM Webview
    AIM Webview
      Done -> What is AIM?
        
  Settings
    Settings View*
      customer support -> Customer Support
      invite a friend -> Invite A Friend
      logout -> Login Form
    
    Customer Support
      back -> Settings View
    Invite A Friend 
      back -> Settings View

Signup Flow
  dismiss -> App Welcome Screen
  

SketchSystems_prototype.js

function render(model){
  function addImage() {
    if (model.active_states[0].image_url) {
      return $("img",
        {src: model.active_states[0].image_url, style: {height: "70%", margin: "0 auto"}})
    } else {
      return "No image available."
    }
  }
  return (
    <div style={{textAlign: "center"}}>
      <h1>{model.active_states[0].name}</h1>
      {addImage()}
    </div>
  );
}

Welcome to Aspiration.png