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.

Designing Capital One's iPhone and iPad App

1,049 views

Published on

Sabrina Ngai and Adey Salyards from Capital One share their team's experience overhauling Capital One's mobile apps to work seamlessly on both iPad and iPhone - aka making it a universal app. 

Published in: Design
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Designing Capital One's iPhone and iPad App

  1. 1. Designing Capital One’s iPhone and iPad app 1MONTH DD, YYYYCAPITAL ONE MOBILE DESIGN TEAM CAPITAL ONE Sabrina Ngai UI/UX Designer Adey Salyards UI/UX Designer CAPITAL ONE
  2. 2. CAPITAL ONE
  3. 3. CAPITAL ONE A unified customer experience
  4. 4. CAPITAL ONE DESIGN NOVA UX
  5. 5. CAPITAL ONE MOBILE DESIGN TEAM CONFIDENTIAL Up next… Favorite App Store Reviews Universalizing the App Component Library CAPITAL ONE
  6. 6. Listen, Refine, & Improve 6MONTH DD, YYYYCAPITAL ONE MOBILE DESIGN TEAM CAPITAL ONE
  7. 7. CAPITAL ONE DESIGN LISTEN, REFINE, IMPROVE
  8. 8. CAPITAL ONE DESIGN LISTEN, REFINE, IMPROVE We Listened
  9. 9. CAPITAL ONE DESIGN LISTEN, REFINE, IMPROVE
  10. 10. CAPITAL ONE DESIGN LISTEN, REFINE, IMPROVE
  11. 11. CAPITAL ONE DESIGN LISTEN, REFINE, IMPROVE Designed by ISIS eye-straining blood of Americans red
  12. 12. CAPITAL ONE DESIGN LISTEN, REFINE, IMPROVE We Listened
  13. 13. 13MONTH DD, YYYYCAPITAL ONE MOBILE DESIGN TEAMCAPITAL ONE MOBILE DESIGN TEAM Designing a Universal App CAPITAL ONE
  14. 14. Spotify UNIVERSAL APP INSPIRATION
  15. 15. UNIVERSAL APP INSPIRATION Paper
  16. 16. WWF Together UNIVERSAL APP INSPIRATION
  17. 17. CAPITAL ONE IOS APPS Pre Universal
  18. 18. Post Universal UNIVERSAL APP
  19. 19. Multitasking & Feature Parity UNIVERSAL IMPACT FOR CUSTOMERS
  20. 20. Adaptive UI DESIGNING FOR UNIVERSAL APP Adaptive UI
  21. 21. Size Classes ADAPTIVE UI Xcode
  22. 22. Size Classes ADAPTIVE UI Xcode
  23. 23. = REGULAR = COMPACT IPHONE SE IPHONE 6 & 7 IPHONE 6 & 7 PLUS IPAD PRO 9.7”, AIR, & MINI IPAD PRO 12.9” ADAPTIVE UI
  24. 24. Constraints ADAPTIVE UI Xcode
  25. 25. Exceptions ADAPTIVE UI
  26. 26. Gotchas ADAPTIVE UI
  27. 27. Style Guides Are Dead. 27MONTH DD, YYYYCAPITAL ONE MOBILE DESIGN TEAM Long live the component library CAPITAL ONE
  28. 28. CAPITAL ONE DESIGN “Is that a different blue?”
  29. 29. CAPITAL ONE DESIGN “Is that a different blue?” “What’s the border style again?”
  30. 30. CAPITAL ONE DESIGN “Is that a different blue?” “What’s the border style again?” “Which file is right? This one, or this one?
  31. 31. CAPITAL ONE DESIGN description": "Bank 360 Checking Onboarding MVP", steps": [ {    "productTypeCode": "DDA",    "productName": "360 Checking",   "isMandatory": true,    "order": 0,    "repeatDelayDays": 0,    "stepCode": "Fund360C",    "validatorCode": "FUNDACCT",    "timeToLive": 60 }, {    "productTypeCode": "DDA",    "productName": "360 Checking",    "order": 1,    "repeatDelayDays": 0,    "stepCode": "AC360C",    "validatorCode": "ACTCARD" }, {    "productTypeCode": "DDA",    "productName": "360 Checking",    "isMandatory": false,    "order": 2,    "repeatDelayDays": 0,    "stepCode": "PDD360C" } {   "description": "Bank 360 Checking Onboarding MVP",   "steps": [     {       "productTypeCode": "DDA",       "productName": "360 Checking",      "isMandatory": true,       "order": 0,       "repeatDelayDays": 0,       "stepCode": "Fund360C",       "validatorCode": "FUNDACCT",       "timeToLive": 60     },     {         "productTypeCode": "DDA",       "productName": "360 Checking",       "order": 1,       "repeatDelayDays": 0,       "stepCode": "AC360C",       "validatorCode": "ACTCARD"     },     {       "productTypeCode": "DDA",       "productName": "360 Checking",       "isMandatory": false,       "order": 2,       "repeatDelayDays": 0,       "stepCode": "PDD360C"     }   ] } {   "description": "Bank 360 Checking Onboarding MVP",   "steps": [     {       "productTypeCode": "DDA",       "productName": "360 Checking",      "isMandatory": true,       "order": 0,       "repeatDelayDays": 0,       "stepCode": "Fund360C",       "validatorCode": "FUNDACCT",       "timeToLive": 60     },     {         "productTypeCode": "DDA",       "productName": "360 Checking",       "order": 1,       "repeatDelayDays": 0,       "stepCode": "AC360C",       "validatorCode": "ACTCARD"     },     {       "productTypeCode": "DDA",       "productName": "360 Checking",       "isMandatory": false,       "order": 2,       "repeatDelayDays": 0,       "stepCode": "PDD360C"     }   ] } {   "description": "Bank 360 Checking Onboarding MVP",   "steps": [     {       "productTypeCode": "DDA",       "productName": "360 Checking",      "isMandatory": true,       "order": 0,       "repeatDelayDays": 0,       "stepCode": "Fund360C",       "validatorCode": "FUNDACCT",       "timeToLive": 60     },     {         "productTypeCode": "DDA",       "productName": "360 Checking",       "order": 1,       "repeatDelayDays": 0,       "stepCode": "AC360C",       "validatorCode": "ACTCARD"     },     {       "productTypeCode": "DDA",       "productName": "360 Checking",       "isMandatory": false,       "order": 2,       "repeatDelayDays": 0,       "stepCode": "PDD360C"     }   ] } {   "description": "Bank 360 Checking Onboarding MVP",   "steps": [     {       "productTypeCode": "DDA",       "productName": "360 Checking",      "isMandatory": true,       "order": 0,       "repeatDelayDays": 0,       "stepCode": "Fund360C",       "validatorCode": "FUNDACCT",       "timeToLive": 60     },     {         "productTypeCode": "DDA",       "productName": "360 Checking",       "order": 1,       "repeatDelayDays": 0,       "stepCode": "AC360C",       "validatorCode": "ACTCARD"     },     {       "productTypeCode": "DDA",       "productName": "360 Checking",       "isMandatory": false,       "order": 2,       "repeatDelayDays": 0,       "stepCode": "PDD360C"     }   ] } {   "description": "Bank 360 Checking Onboard   "steps": [     {       "productTypeCode": "DDA",       "productName": "360 Checking",      "isMandatory": true,       "order": 0,       "repeatDelayDays": 0,       "stepCode": "Fund360C",       "validatorCode": "FUNDACCT",       "timeToLive": 60     },     {         "productTypeCode": "DDA",       "productName": "360 Checking",       "order": 1,       "repeatDelayDays": 0,       "stepCode": "AC360C",       "validatorCode": "ACTCARD"     },     {       "productTypeCode": "DDA",       "productName": "360 Checking",       "isMandatory": false,       "order": 2,       "repeatDelayDays": 0,       "stepCode": "PDD360C"     }   ] } {   "description": "Bank   "steps": [     {       "productTypeCode       "productName": "      "isMandatory": tr       "order": 0,       "repeatDelayDays       "stepCode": "Fun       "validatorCode":       "timeToLive": 60     },     {         "productTypeCode       "productName": "       "order": 1,       "repeatDelayDays       "stepCode": "AC3       "validatorCode":     },     {       "productTypeCode       "productName": "       "isMandatory": f       "order": 2,       "repeatDelayDays       "stepCode": "PDD     }   ] } Inconsistencies in working files = Inconsistencies in app
  32. 32. CAPITAL ONE DESIGN …to update the style guide as part of our day to day design effort, not a separate task. We need a way… STYLEGUIDES …for our style guide and working files to stay in sync.
  33. 33. CAPITAL ONE DESIGN Component Library THE NEW WAY
  34. 34. CAPITAL ONE DESIGN
  35. 35. CAPITAL ONE DESIGN
  36. 36. CAPITAL ONE DESIGN SYMBOLS Sync design components at the document level CRAFT Sync design components at the team level
  37. 37. CAPITAL ONE DESIGN …to update the style guide as part of our day to day design effort, not a separate task. A component library allows you… STYLEGUIDES …keep the style guide and working files in sync.
  38. 38. CAPITAL ONE MOBILE DESIGN TEAM 40 Amazing Sketch Tools! Auto Layout Sketch MirrorUser Flows Symbol Organizer Automate Craft from Invision TOOLS Sketch Runner
  39. 39. Universal App RESOURCES Adaptive Layout https://www.raywenderlich.com/113768/adaptive-layout-tutorial-in-ios-9-getting-started
 Using size classes to design universal iOS user interfaces http://www.techotopia.com/index.php/Using_Size_Classes_to_Design_Universal_iOS_User_Interfaces Optimizing your app for multitasking on iOS 9 https://developer.apple.com/videos/play/wwdc2015/212/ Making Apps Adaptive part 1 https://developer.apple.com/videos/play/wwdc2016/222/ Making Apps Adaptive part 2 https://developer.apple.com/videos/play/wwdc2016/233/
  40. 40. CAPITAL ONE MOBILE DESIGN TEAM 42 The future is bright TO CONCLUDE…
  41. 41. 43 Sabrina Ngai @sabrinangai Adey Salyards @adeylady123

×