Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
David carson, graphic designer
Next
Download to read offline and view in fullscreen.

2

Share

Download to read offline

Delightful UX for Distributed Systems

Download to read offline

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.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Delightful UX for Distributed Systems

  1. 1. Delightful UX for Distributed Systems MICHAEL NORTH Levanto Financial Wicked Good Ember - June 28, 2016
  2. 2. Levanto Financial
  3. 3. 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
  4. 4. Levanto Financial
  5. 5. 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
  6. 6. Your Dev Environment is a Scumbag Liar MICHAEL NORTH Levanto Financial Wicked Good Ember 2016
  7. 7. Your Dev Environment is a Scumbag Liar MICHAEL NORTH Levanto Financial Wicked Good Ember 2016
  8. 8. Slow Unreliable Approximate Trustworthy Clear Responsive Tactical Time-saving
  9. 9. Abcdef ACCOUNT NUMBER ************* PASSWORD ************* CONFIRM PASSWORD Connect a Bank Account
  10. 10. Abcdef ACCOUNT NUMBER PASSWORD UI API BANKS “LINK AN ACCOUNT” BEGIN SCREEN SCRAPING FINISH SCREEN SCRAPING RETURN LINKED ACCOUNT
  11. 11. 1¼HOURS
  12. 12. Abcdef ACCOUNT NUMBER PASSWORD UI API BANKS “LINK AN ACCOUNT” BEGIN SCREEN SCRAPING FINISH SCREEN SCRAPING RETURN LINKED ACCOUNT 6-15m Per Account
  13. 13. UI API BANKS “LINK AN ACCOUNT” BEGIN SCREEN SCRAPING FINISH SCREEN SCRAPING RETURN LINKED ACCOUNT
  14. 14. 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
  15. 15. Abcdef ACCOUNT NUMBER PASSWORD ~75min
  16. 16. 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
  17. 17. Abcdef ACCOUNT NUMBER PASSWORD ~75min
  18. 18. 1¼HOURS
  19. 19. 15MINUTES
  20. 20. Abcdef ACCOUNT NUMBER PASSWORD ~75min
  21. 21. Abcdef ACCOUNT NUMBER PASSWORD ~15min
  22. 22. We Can Do Better
  23. 23. 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
  24. 24. 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
  25. 25. Interruptible Flow BRINGING THE USER BACK IN
  26. 26. In app notification Push notification Email phoenix presence ember-in-viewport blocking modal pixel 3m 7m Notification Delivery
  27. 27. Abcdef ACCOUNT NUMBER PASSWORD ~15min
  28. 28. Abcdef ACCOUNT NUMBER PASSWORD ~6min
  29. 29. 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
  30. 30. Depending on Unreliable Systems MAXIMIZE INDEPENDENCE
  31. 31. BROWSER API BANKS
  32. 32. BROWSER API BANKS🌩
  33. 33. BROWSER API BANKS🌩 1. Connect to new accounts, or other sites 2. Repair broken connections 3. Pull new transaction data
  34. 34. 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
  35. 35. 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”
  36. 36. We’re unable to retrieve bank account data, as of 11:45pm on Saturday. Transparency
  37. 37. BROWSER API BANKS
  38. 38. BROWSER API BANKS
  39. 39. BROWSER API BANKS
  40. 40. BROWSER API BANKS 🌩 • Fetch records • Search for banking institutions to connect • Re-categorize transactions • Create new “budgets”
  41. 41. • 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!
  42. 42. 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
  43. 43. 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
  44. 44. 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
  • hawkt

    Feb. 9, 2021
  • cesarmeiras

    Jun. 30, 2016

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.

Views

Total views

3,181

On Slideshare

0

From embeds

0

Number of embeds

1,717

Actions

Downloads

10

Shares

0

Comments

0

Likes

2

×