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. 

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

3. CAPITAL ONE
A unified customer experience

4. CAPITAL ONE DESIGN
NOVA UX

5. CAPITAL ONE MOBILE DESIGN TEAM CONFIDENTIAL
Up next…
Favorite App
Store Reviews
Universalizing
the App
Component
Library
CAPITAL ONE

6. Listen, Refine, &
Improve
6MONTH DD, YYYYCAPITAL ONE MOBILE DESIGN TEAM
CAPITAL ONE

7. CAPITAL ONE DESIGN
LISTEN, REFINE, IMPROVE

8. CAPITAL ONE DESIGN
LISTEN, REFINE, IMPROVE
We Listened

9. CAPITAL ONE DESIGN
LISTEN, REFINE, IMPROVE

10. CAPITAL ONE DESIGN
LISTEN, REFINE, IMPROVE

11. CAPITAL ONE DESIGN
LISTEN, REFINE, IMPROVE
Designed by ISIS
eye-straining blood of Americans red

12. CAPITAL ONE DESIGN
LISTEN, REFINE, IMPROVE
We Listened

13. 13MONTH DD, YYYYCAPITAL ONE MOBILE DESIGN TEAMCAPITAL ONE MOBILE DESIGN TEAM
Designing a
Universal App
CAPITAL ONE

14. Spotify
UNIVERSAL APP INSPIRATION

15. UNIVERSAL APP INSPIRATION
Paper

16. WWF Together
UNIVERSAL APP INSPIRATION

17. CAPITAL ONE IOS APPS
Pre Universal

18. Post Universal
UNIVERSAL APP

19. Multitasking
& Feature Parity
UNIVERSAL IMPACT FOR CUSTOMERS

20. Adaptive UI
DESIGNING FOR UNIVERSAL APP
Adaptive UI

21. Size Classes
ADAPTIVE UI
Xcode

22. Size Classes
ADAPTIVE UI
Xcode

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. Constraints
ADAPTIVE UI
Xcode

25. Exceptions
ADAPTIVE UI

26. Gotchas
ADAPTIVE UI

27. Style Guides
Are Dead.
27MONTH DD, YYYYCAPITAL ONE MOBILE DESIGN TEAM
Long live the component library
CAPITAL ONE

28. CAPITAL ONE DESIGN
“Is that a different blue?”

29. CAPITAL ONE DESIGN
“Is that a different blue?”
“What’s the border style again?”

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. 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. 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. CAPITAL ONE DESIGN
Component Library
THE NEW WAY

34. CAPITAL ONE DESIGN

36. CAPITAL ONE DESIGN

37. CAPITAL ONE DESIGN
SYMBOLS
Sync design components at
the document level
CRAFT
Sync design components at
the team level

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

40. CAPITAL ONE MOBILE DESIGN TEAM 40
Amazing Sketch Tools!
Auto Layout Sketch MirrorUser Flows Symbol
Organizer
Automate
Craft from
Invision
TOOLS
Sketch Runner

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

42. CAPITAL ONE MOBILE DESIGN TEAM 42
The future is bright
TO CONCLUDE…

43. 43
Sabrina Ngai
@sabrinangai
Adey Salyards
@adeylady123