In a distributed system, the complexity and challenges that accompany asynchrony, consistency, connectivity and concurrency make it particularly difficult to build a user experience that “wows” your users. Desktop and mobile developers have been wrestling problems like these for years, and finally web apps are catching up! I’ll go over some UI and software architecture patterns involving long-running proceses, concurrent editing, and operations that require user intervention, to show that with a small adjustment in how one thinks about these things, building a UI for a distributed system is not a herculean task.

1. Delightful UX for Distributed Systems
MICHAEL NORTH
Levanto Financial
Wicked Good Ember - June 28, 2016

3. Levanto Financial

5. Nearly half of Americans would
have trouble finding $400 in a crisis
~35% of high income households
couldn’t come up with $1000!
Levanto is a Household CFO platform

6. Levanto Financial

7. 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

8. Your Dev Environment is a Scumbag Liar
MICHAEL NORTH
Levanto Financial
Wicked Good Ember 2016

9. Your Dev Environment is a Scumbag Liar
MICHAEL NORTH
Levanto Financial
Wicked Good Ember 2016

10. Slow
Unreliable
Approximate
Trustworthy
Clear
Responsive
Tactical Time-saving

11. Abcdef
ACCOUNT NUMBER
*************
PASSWORD
*************
CONFIRM PASSWORD
Connect a Bank Account

12. Abcdef
ACCOUNT NUMBER
PASSWORD
UI API BANKS
“LINK AN ACCOUNT”
BEGIN SCREEN
SCRAPING
FINISH SCREEN
SCRAPING
RETURN LINKED
ACCOUNT

14. 1¼HOURS

15. Abcdef
ACCOUNT NUMBER
PASSWORD
UI API BANKS
“LINK AN ACCOUNT”
BEGIN SCREEN
SCRAPING
FINISH SCREEN
SCRAPING
RETURN LINKED
ACCOUNT
6-15m
Per
Account

16. UI API BANKS
“LINK AN ACCOUNT”
BEGIN SCREEN
SCRAPING
FINISH SCREEN
SCRAPING
RETURN LINKED
ACCOUNT

17. UI API BANKS
“LINK AN ACCOUNT”
BEGIN SCREEN
SCRAPING
FINISH SCREEN
SCRAPING
RETURN LINKED
ACCOUNT
REQUIRES AUTH
CODE
ASK USER FOR INFO
📲 INFO RESPONSE
INFO RESPONSE

18. Abcdef
ACCOUNT NUMBER
PASSWORD
~75min

19. UI API BANKS
“LINK AN ACCOUNT”
BEGIN SCREEN
SCRAPING
FINISH SCREEN
SCRAPING
RETURN LINKED
ACCOUNT
REQUIRES AUTH
CODE
ASK USER FOR INFO
📲 INFO RESPONSE
INFO RESPONSE
PENDING ACCOUNT

21. Abcdef
ACCOUNT NUMBER
PASSWORD
~75min

22. 1¼HOURS

23. 15MINUTES

24. Abcdef
ACCOUNT NUMBER
PASSWORD
~75min

25. Abcdef
ACCOUNT NUMBER
PASSWORD
~15min

27. We Can Do Better

28. UI API BANKS
“LINK AN ACCOUNT”
BEGIN SCREEN
SCRAPING
FINISH SCREEN
SCRAPING
RETURN LINKED
ACCOUNT
REQUIRES AUTH
CODE
ASK USER FOR INFO
📲 INFO RESPONSE
INFO RESPONSE
PENDING ACCOUNT

29. UI API BANKS
“LINK AN ACCOUNT”
BEGIN SCREEN
SCRAPING
FINISH SCREEN
SCRAPING
RETURN LINKED
ACCOUNT
REQUIRES AUTH
CODE
ASK USER FOR INFO
📲 INFO RESPONSE
INFO RESPONSE
PENDING ACCOUNT

30. Interruptible Flow
BRINGING THE USER BACK IN

31. In app notification
Push notification
Email
phoenix presence
ember-in-viewport
blocking modal
pixel
3m
7m
Notification Delivery

32. Abcdef
ACCOUNT NUMBER
PASSWORD
~15min

33. Abcdef
ACCOUNT NUMBER
PASSWORD
~6min

34. Invalidate
EVICT RECORD(S) FROM THE STORE AND RE-FETCH
Push to Client:
Notification
IN-APP NOTIFICATION MESSAGE
GatherForm
GLOBAL DIALOG, WITH A DYNAMIC FORM TO FILL OUT
Clear
LOGOUT, DUMP LOCALSTORAGE, REBOOT

36. Depending on
Unreliable Systems
MAXIMIZE INDEPENDENCE

37. BROWSER API BANKS

38. BROWSER API BANKS🌩

39. BROWSER API BANKS🌩
1. Connect to new accounts, or other sites
2. Repair broken connections
3. Pull new transaction data

40. 1. Connect to new accounts, or other sites
2. Repair broken connections
3. Pull new transaction data
AES-encrypted Queue
AES-encrypted Queue
We’ll live

41. 1. Connect to new accounts, or other sites
2. Repair broken connections
3. Pull new transaction data
AES-encrypted Queue
AES-encrypted Queue
We’ll live, but let users know data is “frozen”

42. We’re unable to retrieve bank account data, as of
11:45pm on Saturday.
Transparency

43. BROWSER API BANKS

44. BROWSER API BANKS

45. BROWSER API BANKS

46. BROWSER API BANKS
🌩
• Fetch records
• Search for banking institutions to connect
• Re-categorize transactions
• Create new “budgets”

47. • 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 Queue
Transparency
Again!

48. 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

49. Keep users in the loop
TRANSPARENCY
Loosely couple
RELIABILITY BREEDS TRUST
Limited offline is ok
DON’T BE AFRAID TO DISABLE
You don’t need to wait
BUILD AMAZING UX TODAY

51. We’re 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 Engineer
OPEN SOURCE PRODUCT WORK