Delivering Native Apps
    Simon Clarke | March 2012




                            1
Overview


 Overview of Suncorp Bank‟s mobile channels

 History of Suncorp Bank mobile banking

 Mobile Banking consumer behaviour

 Case study: Suncorp Bank‟s native apps V1.0

 Challenges and recommendations

 Suncorp Bank mobile 2012-2013


                                                2


Suncorp Bank
Suncorp Bank Mobile
Components

                                       Engagement                Existing
                 Advertising
                                       / Conversion             Customers
               • SEM                  • Brochureware          • Internet Banking
               • SEO                  • Locate Branch         • Retention
Desktop        • Display              • Lead Generation       • Origination
               • Comparison Sites     • Online Origination    • Online Budgeting
               • Social


               • SEM                  • Mobile Landing        • Mobile Banking
                                        Pages                 • Mobile Online
 Mobile        • SEO
                                      • Click to Call           Budgeting
               • Display
  Web                                 • GPS Locator           • SMS Alerts
                                      • Mobile Origination?

               • QR codes             • Location Based        • Native Mobile
               • In App Advertising     Lead Gen                Banking
  Native       • Location Based       • Mobile Origination    • NFC
                 Push Alerts                                  • Digital Wallet/P2P
                                                                                     3


Suncorp Bank
History – Suncorp Bank Mobile

2008
   Started in 2008 with WAP
    based Mobile Banking
   Was a „wildcard‟ project
2009
   Introduced touch based
    Mobile Banking
   First cut of CSS2 and imagery
    in HTML
   Creation of iphone sub-
    domain
   Introduction of PDF viewing
    via BPAY View

                                    4


Suncorp Bank
History – Suncorp Bank Mobile

2010
   Redesign to utilise Jquery and
    CSS3
   Use of webkit
   Introduction of WURL device
    detection
2011
   Revision of CSS3, media
    queries, HTML5
   Native app development
   2: build full native app to wrap
    mobile banking webapp
   Native apps delivered Dec
    2011
                                       5


Suncorp Bank
Number Crunching

Internet Banking                                 2012
   Total Internet Banking customers             429,000
   Active Internet Banking customers            340,000
   Logons per month                             4.1 mill
   Transactions per month                       4.3 mill


Mobile Banking                                   2012       (2011)
   % of active customers using Mobile Banking   29%        16%
   Logons per month                             1.2 mill   765k
   Transactions per month                       3.7 mill   1.6 mill
   Customers purely using mobile                11%        5%



                                                                       6


Suncorp Bank
Mobile Banking Behaviours
For a customer...
                                   “I want
                                    mobile
                                  banking to
                                    be like
                                  Facebook”


                  I want to
                 ensure my                         “I want
                  money is                     everything that
               secure if I lose                  Desktop IB
                 my phone”                           has”

                                                                 7


Suncorp Bank
Mobile Banking Behaviours
For a bank...


                           Mobile App
                              UX




                                         Integrated
                Security                  Channel
                                        Technology


                                                      8


Suncorp Bank
Why Build A Native App?
   One can argue that mobile banking delivers a „pretty good‟ user experience via
    mobile web

    As at July 2011, we were sceptical of going down the native path due to:
     Investment
     ROI
     Immaturity and fragmentation of emerging payments technology
     Uncertainty around architecture and technology stack

    What we knew well...
     Mobile web development and backend core banking integration
     Mobile Web UX
     Device reach via mobile web (any phone that can handle javascript)
     Development lifecycle

    As at July 2011, we weren’t convinced that building a native app would deliver
    any real customer value other than a sexier UI...                                9


Suncorp Bank
Why Build A Native App?
Drivers for Going Native
   Transitioning consumer behaviour for engaging banks via mobile
   What was the transition?...




                                                                     10


Suncorp Bank
Why Build A Native App?
Customers complained because they couldn't find us...

                          “Why doesn‟t Suncorp Bank have an app?”

                       “We‟ll we have an m site that is accessible via...”

                                “Oh ok.. How do I download it?”

       “You don‟t need to, you just go to m.suncorpbank.com.au save it as a favourite...”

                  “Um how do I do that? Downloading an app is just easier...”



In emerging markets like Sydney and WA where our brand is growing, without
app presence, our customers couldn't find us...
Also on a basic level, we were simply falling behind by not offering this now
hygiene & accepted method of customer engagement

                                                                                            11


Suncorp Bank
Why Build A Native App?
So.. Our native app objectives:

 Build a native app for iOS and Android to allow our brand to have presence in the
  App Store and Android Marketplace and make it east for customers to engage

 “Wrap” our existing mobile banking webapp into the native app with a vision to
  build a full native version of Mobile Banking pending feedback and downloads

 Initiate some UI optimisation to ensure our webapp seamlessly integrates into a
  native app wrapper giving the feel of a full native app




                                                                                      12


Suncorp Bank
Case Study: Suncorp Bank App 1.0
Step 1: Forming a Team

   We did an RFP internally and externally
   The business decided to have the app built internally by IT
   Cost: $93k internally (final cost $110k)
   Resources:




          PM / IM       Developers         BA           Tester    SME/UX
          0.5 FTE          1 FTE        0.5 FTE        0.8 FTE    0.5 FTE
                        2 x 0.5 FTE


                                                                            13


Suncorp Bank
Case Study: Suncorp Bank App 1.0
Step 2: Planning and Elaboration
Planning
 Given our experience, we deliberately kept the scope and functionality of the app
   extremely lean
 We originally aimed to simply wrap all our m site pages in a wrapper. We ended
   up building most of these as full native..

Elaboration
 Planning was fairly simple as we were rewriting an existing webapp in native
   code utilising existing web services
 Each feature card e.g. “display interest rates” was given a combined estimate for
   iOS and Android version
 Final feature list was provided to IT to then map against a range of development
   technologies
 To date only internal experience of mobile development was a rewrite of a agency
   built app
                                                                                  14


Suncorp Bank
Case Study: Suncorp Bank App 1.0
Step 2: Concept Phase – IT Architecture
Chosen Technology Stack:




                                          15


Suncorp Bank
Case Study: Suncorp Bank App 1.0
Step 3: User Interface Design

   Competitor audit undertaken
   Guerrilla user testing of
    competitor apps to understand
    customer interaction trends
   Wireframing completed using
    “Balsamiq”
   Mock-ups completed using
    “mockapp”
   Engaged internal resource to
    complete UI design, custom
    graphics and PSD
   Generic icons sourced from
    “glyphish”


                                    16


Suncorp Bank
Case Study: Suncorp Bank App 1.0
Step 3: User Interface Design




                                   17


Suncorp Bank
Case Study: Suncorp Bank App 1.0
Step 4: Tools and Processes

   Project team spread across
    Brisbane, Sydney and Melbourne
   Utilised Big Blue Button for daily
    stand-ups




                                         18


Suncorp Bank
Case Study: Suncorp Bank App 1.0
Step 4: Tools and Processes

   Utilised Target Process for Agile
    online project management




   Maintained Big Visual Wall to
    manage velocity




                                        19


Suncorp Bank
Case Study: Suncorp Bank App 1.0
Step 4: Tools and Processes

   Utilised Linoit for Retro collaboration




                                              20


Suncorp Bank
Case Study: Suncorp Bank App 1.0
Step 5: Build

 Build was scheduled for 4 iterations (8
  weeks) but went for 6 (12 weeks)
 Build went well until iteration 3 where bugs
  started to pile up
 Most bugs were „user experience based‟
 Balancing between quality and timing
  became a challenge
 “We wanted quality but we were burning
  through the budget..”
 Another full-time resource came onboard in
  iteration 4 to assist.




                                                 21


Suncorp Bank
Project Challenges
Resourcing
 Part-time resources was a big challenge
 Developers who knew iOS/ Android but no „big picture‟ tech lead
 Even if you‟re „new‟ to apps, acquire/hire/buy expert FTE on hand to support your team
 Avoid part-time resources, it makes project/iteration management very challenging and ends
   up costing more in long run

Social Contract
 Had different views of what an IM and BA did
 Driven by unfamiliarity of applying agile to unfamiliar technology
 Ensure everyone is aware and agrees on roles and responsibilities at start of project – it will
   smooth people management and increase velocity

Communication
 Expectations of communicating changes to code
 Due to PT resources, many hands, many changes, apps often broke
 Encourage developers to have regular meetings to discuss their solution
 Ensure developers and testers have chats to run through changes and unit tests
                                                                                                22


Suncorp Bank
Recommendations
Geography
 Team spread over 3 cities was a challenge
 Missed luxuries of live stand-up and working with Big Visual Wall
 If you‟re outsourcing, find a local company
 Have initial planning workshops in person even if you‟re going to work across multiple sites

User Experience Knowledge
 Heavily underestimated depth required to build „easy functionality‟
 Acknowledging changes in UX between iOS and Android vs. functionality
 Have a full time mobile UX resource or have an advisory to review your requirements and
   point out considerations across mobile platforms, UI advice etc.

Testing
 Testing was guerrilla – project was 80% user interface related rather than „functional‟
 Lack of automation put pressure on tester
 Put effort into automation testing of your app
 Automate UI testing
                                                                                                 23


Suncorp Bank
Launch and Feedback
   Launched December 11 2011 with updated version on December 19


                                   iOS                                            Android
    Rating                         4.5 stars                                      4 stars
    Downloads                      28851                                          10651
                                   • This is a good start. I like that it isn't   • Banking at my fingertips Works just
    Feedback                         just an app that links to the mobile           fine. I can access, create, alter any
                                     banking web app and can lead to a              bpays, transfer funds, look at my
                                     fully native application.                      transaction history, splice and
                                                                                    securely.
                                   • Wahooooooo finally
                                                                                  • Not that great Ap is half done. Its just a
                                   • Took a long time to arrive and its just        link to the mobile site.
                                     the mobile site in an app. No more
                                     convenient that using safari.                • Website wrapper Good start, looking
                                                                                    forward to a full app that improves on
                                   • Worth it to delete that safari bookmark        the mobile website. ATM locator is the
                                                                                    only part that makes app currently
                                   • Bit slow to respond but ok app                 worth installing, but srsly its not hard to
                                                                                    get geo location data from web
                                                                                    browser, so the main atm locator
                                                                                    website could have same functionality,
                                                                                    which would make this app redundant.



                                                                                                                                  24


Suncorp Bank
Final Design




               25


Suncorp Bank
Suncorp Bank mobile 2012-2013
Roadmap

Strategy
 Suncorp Bank currently half way through our Core Banking Replacement project
   with Oracle
 Centralising expertise and strategies across different business units for mobile
   with banking being primary force
Development
 Currently building a prototype of a full native app of our current Mobile Banking
   webapp for iOS, Android and Windows Mobile with some payment innovations
 Aim to have launch iOS and Android apps by end 2012
 Creating wrapper app for tablets
Suncorp Bank and NFC?
 “Wait and See..”
 Optimising our switch network
 Investigating alternative solutions to current market offerings
                                                                                      26


Suncorp Bank

Mobile Apps Conference Sydney 2012 - Delivering Native Apps

  • 1.
    Delivering Native Apps Simon Clarke | March 2012 1
  • 2.
    Overview  Overview ofSuncorp Bank‟s mobile channels  History of Suncorp Bank mobile banking  Mobile Banking consumer behaviour  Case study: Suncorp Bank‟s native apps V1.0  Challenges and recommendations  Suncorp Bank mobile 2012-2013 2 Suncorp Bank
  • 3.
    Suncorp Bank Mobile Components Engagement Existing Advertising / Conversion Customers • SEM • Brochureware • Internet Banking • SEO • Locate Branch • Retention Desktop • Display • Lead Generation • Origination • Comparison Sites • Online Origination • Online Budgeting • Social • SEM • Mobile Landing • Mobile Banking Pages • Mobile Online Mobile • SEO • Click to Call Budgeting • Display Web • GPS Locator • SMS Alerts • Mobile Origination? • QR codes • Location Based • Native Mobile • In App Advertising Lead Gen Banking Native • Location Based • Mobile Origination • NFC Push Alerts • Digital Wallet/P2P 3 Suncorp Bank
  • 4.
    History – SuncorpBank Mobile 2008  Started in 2008 with WAP based Mobile Banking  Was a „wildcard‟ project 2009  Introduced touch based Mobile Banking  First cut of CSS2 and imagery in HTML  Creation of iphone sub- domain  Introduction of PDF viewing via BPAY View 4 Suncorp Bank
  • 5.
    History – SuncorpBank Mobile 2010  Redesign to utilise Jquery and CSS3  Use of webkit  Introduction of WURL device detection 2011  Revision of CSS3, media queries, HTML5  Native app development  2: build full native app to wrap mobile banking webapp  Native apps delivered Dec 2011 5 Suncorp Bank
  • 6.
    Number Crunching Internet Banking 2012  Total Internet Banking customers 429,000  Active Internet Banking customers 340,000  Logons per month 4.1 mill  Transactions per month 4.3 mill Mobile Banking 2012 (2011)  % of active customers using Mobile Banking 29% 16%  Logons per month 1.2 mill 765k  Transactions per month 3.7 mill 1.6 mill  Customers purely using mobile 11% 5% 6 Suncorp Bank
  • 7.
    Mobile Banking Behaviours Fora customer... “I want mobile banking to be like Facebook” I want to ensure my “I want money is everything that secure if I lose Desktop IB my phone” has” 7 Suncorp Bank
  • 8.
    Mobile Banking Behaviours Fora bank... Mobile App UX Integrated Security Channel Technology 8 Suncorp Bank
  • 9.
    Why Build ANative App?  One can argue that mobile banking delivers a „pretty good‟ user experience via mobile web  As at July 2011, we were sceptical of going down the native path due to:  Investment  ROI  Immaturity and fragmentation of emerging payments technology  Uncertainty around architecture and technology stack  What we knew well...  Mobile web development and backend core banking integration  Mobile Web UX  Device reach via mobile web (any phone that can handle javascript)  Development lifecycle As at July 2011, we weren’t convinced that building a native app would deliver any real customer value other than a sexier UI... 9 Suncorp Bank
  • 10.
    Why Build ANative App? Drivers for Going Native  Transitioning consumer behaviour for engaging banks via mobile  What was the transition?... 10 Suncorp Bank
  • 11.
    Why Build ANative App? Customers complained because they couldn't find us... “Why doesn‟t Suncorp Bank have an app?” “We‟ll we have an m site that is accessible via...” “Oh ok.. How do I download it?” “You don‟t need to, you just go to m.suncorpbank.com.au save it as a favourite...” “Um how do I do that? Downloading an app is just easier...” In emerging markets like Sydney and WA where our brand is growing, without app presence, our customers couldn't find us... Also on a basic level, we were simply falling behind by not offering this now hygiene & accepted method of customer engagement 11 Suncorp Bank
  • 12.
    Why Build ANative App? So.. Our native app objectives:  Build a native app for iOS and Android to allow our brand to have presence in the App Store and Android Marketplace and make it east for customers to engage  “Wrap” our existing mobile banking webapp into the native app with a vision to build a full native version of Mobile Banking pending feedback and downloads  Initiate some UI optimisation to ensure our webapp seamlessly integrates into a native app wrapper giving the feel of a full native app 12 Suncorp Bank
  • 13.
    Case Study: SuncorpBank App 1.0 Step 1: Forming a Team  We did an RFP internally and externally  The business decided to have the app built internally by IT  Cost: $93k internally (final cost $110k)  Resources: PM / IM Developers BA Tester SME/UX 0.5 FTE 1 FTE 0.5 FTE 0.8 FTE 0.5 FTE 2 x 0.5 FTE 13 Suncorp Bank
  • 14.
    Case Study: SuncorpBank App 1.0 Step 2: Planning and Elaboration Planning  Given our experience, we deliberately kept the scope and functionality of the app extremely lean  We originally aimed to simply wrap all our m site pages in a wrapper. We ended up building most of these as full native.. Elaboration  Planning was fairly simple as we were rewriting an existing webapp in native code utilising existing web services  Each feature card e.g. “display interest rates” was given a combined estimate for iOS and Android version  Final feature list was provided to IT to then map against a range of development technologies  To date only internal experience of mobile development was a rewrite of a agency built app 14 Suncorp Bank
  • 15.
    Case Study: SuncorpBank App 1.0 Step 2: Concept Phase – IT Architecture Chosen Technology Stack: 15 Suncorp Bank
  • 16.
    Case Study: SuncorpBank App 1.0 Step 3: User Interface Design  Competitor audit undertaken  Guerrilla user testing of competitor apps to understand customer interaction trends  Wireframing completed using “Balsamiq”  Mock-ups completed using “mockapp”  Engaged internal resource to complete UI design, custom graphics and PSD  Generic icons sourced from “glyphish” 16 Suncorp Bank
  • 17.
    Case Study: SuncorpBank App 1.0 Step 3: User Interface Design 17 Suncorp Bank
  • 18.
    Case Study: SuncorpBank App 1.0 Step 4: Tools and Processes  Project team spread across Brisbane, Sydney and Melbourne  Utilised Big Blue Button for daily stand-ups 18 Suncorp Bank
  • 19.
    Case Study: SuncorpBank App 1.0 Step 4: Tools and Processes  Utilised Target Process for Agile online project management  Maintained Big Visual Wall to manage velocity 19 Suncorp Bank
  • 20.
    Case Study: SuncorpBank App 1.0 Step 4: Tools and Processes  Utilised Linoit for Retro collaboration 20 Suncorp Bank
  • 21.
    Case Study: SuncorpBank App 1.0 Step 5: Build  Build was scheduled for 4 iterations (8 weeks) but went for 6 (12 weeks)  Build went well until iteration 3 where bugs started to pile up  Most bugs were „user experience based‟  Balancing between quality and timing became a challenge  “We wanted quality but we were burning through the budget..”  Another full-time resource came onboard in iteration 4 to assist. 21 Suncorp Bank
  • 22.
    Project Challenges Resourcing  Part-timeresources was a big challenge  Developers who knew iOS/ Android but no „big picture‟ tech lead  Even if you‟re „new‟ to apps, acquire/hire/buy expert FTE on hand to support your team  Avoid part-time resources, it makes project/iteration management very challenging and ends up costing more in long run Social Contract  Had different views of what an IM and BA did  Driven by unfamiliarity of applying agile to unfamiliar technology  Ensure everyone is aware and agrees on roles and responsibilities at start of project – it will smooth people management and increase velocity Communication  Expectations of communicating changes to code  Due to PT resources, many hands, many changes, apps often broke  Encourage developers to have regular meetings to discuss their solution  Ensure developers and testers have chats to run through changes and unit tests 22 Suncorp Bank
  • 23.
    Recommendations Geography  Team spreadover 3 cities was a challenge  Missed luxuries of live stand-up and working with Big Visual Wall  If you‟re outsourcing, find a local company  Have initial planning workshops in person even if you‟re going to work across multiple sites User Experience Knowledge  Heavily underestimated depth required to build „easy functionality‟  Acknowledging changes in UX between iOS and Android vs. functionality  Have a full time mobile UX resource or have an advisory to review your requirements and point out considerations across mobile platforms, UI advice etc. Testing  Testing was guerrilla – project was 80% user interface related rather than „functional‟  Lack of automation put pressure on tester  Put effort into automation testing of your app  Automate UI testing 23 Suncorp Bank
  • 24.
    Launch and Feedback  Launched December 11 2011 with updated version on December 19 iOS Android Rating 4.5 stars 4 stars Downloads 28851 10651 • This is a good start. I like that it isn't • Banking at my fingertips Works just Feedback just an app that links to the mobile fine. I can access, create, alter any banking web app and can lead to a bpays, transfer funds, look at my fully native application. transaction history, splice and securely. • Wahooooooo finally • Not that great Ap is half done. Its just a • Took a long time to arrive and its just link to the mobile site. the mobile site in an app. No more convenient that using safari. • Website wrapper Good start, looking forward to a full app that improves on • Worth it to delete that safari bookmark the mobile website. ATM locator is the only part that makes app currently • Bit slow to respond but ok app worth installing, but srsly its not hard to get geo location data from web browser, so the main atm locator website could have same functionality, which would make this app redundant. 24 Suncorp Bank
  • 25.
    Final Design 25 Suncorp Bank
  • 26.
    Suncorp Bank mobile2012-2013 Roadmap Strategy  Suncorp Bank currently half way through our Core Banking Replacement project with Oracle  Centralising expertise and strategies across different business units for mobile with banking being primary force Development  Currently building a prototype of a full native app of our current Mobile Banking webapp for iOS, Android and Windows Mobile with some payment innovations  Aim to have launch iOS and Android apps by end 2012  Creating wrapper app for tablets Suncorp Bank and NFC?  “Wait and See..”  Optimising our switch network  Investigating alternative solutions to current market offerings 26 Suncorp Bank