Designing Capital One's iPhone and iPad App

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

CAPITAL ONE
A unified customer experience

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

Listen, Reﬁne, &
Improve
CAPITAL ONE

CAPITAL ONE DESIGN
LISTEN, REFINE, IMPROVE

CAPITAL ONE DESIGN
We Listened

CAPITAL ONE DESIGN
Designed by ISIS
eye-straining blood of Americans red

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

Spotify
UNIVERSAL APP INSPIRATION

Paper

WWF Together

CAPITAL ONE IOS APPS
Pre Universal

Multitasking
& Feature Parity
UNIVERSAL IMPACT FOR CUSTOMERS

Adaptive UI
DESIGNING FOR UNIVERSAL APP
Adaptive UI

Size Classes
ADAPTIVE UI
Xcode

= REGULAR
= COMPACT
IPHONE SE IPHONE 6 & 7 IPHONE 6 & 7 PLUS
IPAD PRO 9.7”, AIR, & MINI
IPAD PRO 12.9”
ADAPTIVE UI

Style Guides
Are Dead.
Long live the component library
CAPITAL ONE

CAPITAL ONE DESIGN
“Is that a different blue?”

CAPITAL ONE DESIGN
“What’s the border style again?”

CAPITAL ONE DESIGN
“What’s the border style again?”
“Which file is right? This one, or this one?

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
},
{
   "order": 1,
   "stepCode": "AC360C",
   "validatorCode": "ACTCARD"
},
{
   "isMandatory": false,
   "order": 2,
   "stepCode": "PDD360C"
}
{
"description": "Bank 360 Checking Onboarding MVP",
"steps": [
    {
      "order": 0,
      "timeToLive": 60
    },
    {

      "order": 1,
    },
    {
      "order": 2,
    }
]
}
{
"steps": [
    {
      "order": 0,
      "timeToLive": 60
    },
    {

      "order": 1,
    },
    {
      "order": 2,
    }
]
}
{
"steps": [
    {
      "order": 0,
      "timeToLive": 60
    },
    {

      "order": 1,
    },
    {
      "order": 2,
    }
]
}
{
"steps": [
    {
      "order": 0,
      "timeToLive": 60
    },
    {

      "order": 1,
    },
    {
      "order": 2,
    }
]
}
{
"description": "Bank 360 Checking Onboard
"steps": [
    {
      "order": 0,
      "timeToLive": 60
    },
    {

      "order": 1,
    },
    {
      "order": 2,
    }
]
}
{
"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

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.

CAPITAL ONE DESIGN
Component Library
THE NEW WAY

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

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.

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

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
Making Apps Adaptive part 2

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

43
Sabrina Ngai
@sabrinangai
Adey Salyards
@adeylady123

Designing Capital One's iPhone and iPad App

Recommended

Recommended

More Related Content

Similar to Designing Capital One's iPhone and iPad App

Similar to Designing Capital One's iPhone and iPad App (20)

Recently uploaded

Recently uploaded (20)

Designing Capital One's iPhone and iPad App