delightful ux for distributed systems

Download Delightful UX for Distributed Systems

Post on 15-Apr-2017

1.359 views

Category:

Technology

2 download

Embed Size (px)

TRANSCRIPT

  • Delightful UX for Distributed SystemsMICHAEL NORTH Levanto Financial

    Wicked Good Ember - June 28, 2016

  • Levanto Financial

  • Nearly half of Americans would have trouble finding $400 in a crisis

    ~35% of high income households couldnt come up with $1000!

    Levanto is a Household CFO platform

  • Levanto Financial

  • Levanto Financial

    Avg customer household income: ~$400K/yr

    Avg amount we help a household save: ~$12.5K/yr

    Monthly fee we charge: $200+/mo

    Customers have tried everything before coming to us

  • Your Dev Environment is a Scumbag LiarMICHAEL NORTH Levanto Financial

    Wicked Good Ember 2016

  • Your Dev Environment is a Scumbag LiarMICHAEL NORTH Levanto Financial

    Wicked Good Ember 2016

  • SlowUnreliable

    Approximate

    Trustworthy

    ClearResponsive

    Tactical Time-saving

  • Abcdef

    ACCOUNT NUMBER

    *************

    PASSWORD

    *************

    CONFIRM PASSWORD

    Connect a Bank Account

  • Abcdef

    ACCOUNT NUMBER

    *************

    PASSWORD

    UI API BANKS

    LINK AN ACCOUNTBEGIN SCREEN SCRAPING

    FINISH SCREEN SCRAPING

    RETURN LINKED ACCOUNT

  • 1HOURS

  • Abcdef

    ACCOUNT NUMBER

    *************

    PASSWORD

    UI API BANKS

    LINK AN ACCOUNTBEGIN SCREEN SCRAPING

    FINISH SCREEN SCRAPING

    RETURN LINKED ACCOUNT

    6-15m Per Account

  • UI API BANKS

    LINK AN ACCOUNTBEGIN SCREEN SCRAPING

    FINISH SCREEN SCRAPING

    RETURN LINKED ACCOUNT

  • UI API BANKS

    LINK AN ACCOUNTBEGIN SCREEN SCRAPING

    FINISH SCREEN SCRAPING

    RETURN LINKED ACCOUNT

    REQUIRES AUTH CODE

    ASK USER FOR INFO

    INFO RESPONSEINFO RESPONSE

  • Abcdef

    ACCOUNT NUMBER

    *************

    PASSWORD

    ~75min

  • UI API BANKS

    LINK AN ACCOUNTBEGIN SCREEN SCRAPING

    FINISH SCREEN SCRAPING

    RETURN LINKED ACCOUNT

    REQUIRES AUTH CODE

    ASK USER FOR INFO

    INFO RESPONSEINFO RESPONSE

    PENDING ACCOUNT

  • Abcdef

    ACCOUNT NUMBER

    *************

    PASSWORD

    ~75min

  • 1HOURS

  • 15 MINUTES

  • Abcdef

    ACCOUNT NUMBER

    *************

    PASSWORD

    ~75min

  • Abcdef

    ACCOUNT NUMBER

    *************

    PASSWORD

    ~15min

  • We Can Do Better

  • UI API BANKS

    LINK AN ACCOUNTBEGIN SCREEN SCRAPING

    FINISH SCREEN SCRAPING

    RETURN LINKED ACCOUNT

    REQUIRES AUTH CODE

    ASK USER FOR INFO

    INFO RESPONSEINFO RESPONSE

    PENDING ACCOUNT

  • UI API BANKS

    LINK AN ACCOUNTBEGIN SCREEN SCRAPING

    FINISH SCREEN SCRAPING

    RETURN LINKED ACCOUNT

    REQUIRES AUTH CODE

    ASK USER FOR INFO

    INFO RESPONSEINFO RESPONSE

    PENDING ACCOUNT

  • Interruptible FlowBRINGING THE USER BACK IN

  • In app notification

    Push notification

    Email

    phoenix presence ember-in-viewport

    blocking modal

    pixel

    3m

    7m

    Notification Delivery

  • Abcdef

    ACCOUNT NUMBER

    *************

    PASSWORD

    ~15min

  • Abcdef

    ACCOUNT NUMBER

    *************

    PASSWORD

    ~6min

  • InvalidateEVICT RECORD(S) FROM THE STORE AND RE-FETCH

    Push to Client:NotificationIN-APP NOTIFICATION MESSAGE

    GatherFormGLOBAL DIALOG, WITH A DYNAMIC FORM TO FILL OUT

    ClearLOGOUT, DUMP LOCALSTORAGE, REBOOT

  • Depending on Unreliable Systems

    MAXIMIZE INDEPENDENCE

  • BROWSER API BANKS

  • BROWSER API BANKS

  • BROWSER API BANKS1. Connect to new accounts, or other sites

    2. Repair broken connections

    3. Pull new transaction data

  • 1. Connect to new accounts, or other sites

    2. Repair broken connections

    3. Pull new transaction data

    AES-encrypted Queue

    AES-encrypted Queue

    Well live

  • 1. Connect to new accounts, or other sites

    2. Repair broken connections

    3. Pull new transaction data

    AES-encrypted Queue

    AES-encrypted Queue

    Well live, but let users know data is frozen

  • Were unable to retrieve bank account data, as of 11:45pm on Saturday.

    Transparency

  • BROWSER API BANKS

  • BROWSER API BANKS

  • BROWSER API BANKS

  • BROWSER API BANKS Fetch records

    Search for banking institutions to connect

    Re-categorize transactions

    Create new budgets

  • Fetch records

    Search for banking institutions to connect

    Re-categorize transactions

    Create new budgets

    localStorage cache (except transactions)

    cache most popular 5% institutions (constitutes 85% of accounts)

    DISABLED

    localStorage QueueTra

    nspa

    rency

    Again

    !

  • Going back online

    Assume everything has changed

    Flush everything from localStorage

    But only when we establish connection with our API for real!

    Re-authorize via Channel

  • Keep users in the loopTRANSPARENCY

    Loosely coupleRELIABILITY BREEDS TRUST

    Limited offline is okDONT BE AFRAID TO DISABLE

    You dont need to waitBUILD AMAZING UX TODAY

  • Were recruiting!

    Results based. Work from anywhere with good internet

    EMBER#CANARY EMBER-ENGINES EMBER-CLI-FASTBOOT D3 V4

    ELIXIR PHOENIX FRAMEWORK

    JSON-API POSTGRES

    Senior Full Stack EngineerOPEN SOURCE PRODUCT WORK