Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Designing Captain Train Mobile Experience

Cyril Mottier
October 28, 2015

Designing Captain Train Mobile Experience

Developing a mobile application is a complex process. It requires UI & UX design skills as well as great development capabilities. The process is even more difficult when the application you are building acts as a companion to an existing web application. In this talk we explain the process of creating a mobile application from the ground up using an existing web app as a starting point. We will use the Captain Train Android app as our main example and will explain how most of the issues were faced and solved in order to create a mobile-friendly user experience.

Cyril Mottier

October 28, 2015
Tweet

More Decks by Cyril Mottier

Other Decks in Design

Transcript

  1. DESIGNING
    CAPTAIN TRAIN
    MOBILE EXPERIENCE

    View Slide

  2. @cyrilmottier

    View Slide

  3. capitainetrain.com • @capitainetrain
    captaintrain.com • @captaintrain

    View Slide

  4. capitainetrain.com • @capitainetrain
    captaintrain.com • @captaintrain

    View Slide

  5. View Slide

  6. INTRODUCTION

    View Slide

  7. March 2014
    October 2013
    October 2012
    May 2010
    Android app
    iOS app
    Public website
    Beta website

    View Slide

  8. Mobile has a lot of contraints
    application designers need to deal with
    Screen

    View Slide

  9. Screen
    Mobile has a lot of contraints
    application designers need to deal with
    Battery

    View Slide

  10. Screen
    Mobile has a lot of contraints
    application designers need to deal with
    Battery Network

    View Slide

  11. Location
    But also some advantages
    to enhance context awareness in apps

    View Slide

  12. Location Sensors
    But also some advantages
    to enhance context awareness in apps

    View Slide

  13. Location Sensors Contacts
    But also some advantages
    to enhance context awareness in apps

    View Slide

  14. Web
    expectations
    Mobile
    expectations
    vs

    View Slide

  15. Web
    expectations
    Mobile
    expectations
    vs

    View Slide

  16. Web
    expectations
    Mobile
    expectations
    vs

    View Slide

  17. Discovery
    & planning
    Search
    & purchase
    Leaving
    home/office
    Boarding
    at station
    Travelling
    by train
    Connection
    & arrival
    Imminence
    of travel
    Information
    conciseness

    View Slide

  18. Discovery
    & planning
    Search
    & purchase
    Leaving
    home/office
    Boarding
    at station
    Travelling
    by train
    Connection
    & arrival
    Imminence
    of travel
    Information
    conciseness

    View Slide

  19. Discovery
    & planning
    Search
    & purchase
    Leaving
    home/office
    Boarding
    at station
    Travelling
    by train
    Connection
    & arrival
    Imminence
    of travel
    Information
    conciseness

    View Slide

  20. Discovery
    & planning
    Search
    & purchase
    Leaving
    home/office
    Boarding
    at station
    Travelling
    by train
    Connection
    & arrival
    Imminence
    of travel
    Information
    conciseness

    View Slide

  21. Discovery
    & planning
    Search
    & purchase
    Leaving
    home/office
    Boarding
    at station
    Travelling
    by train
    Connection
    & arrival
    Imminence
    of travel
    Information
    conciseness

    View Slide

  22. My account
    One account, all devices
    You are always at home

    View Slide

  23. FROM WEB TO MOBILE

    View Slide

  24. What are users expecting from the app?

    View Slide

  25. What are users expecting from the app?
    Cart Tickets
    Search | |

    View Slide

  26. What are users expecting from the app?
    Cart Tickets
    Search | |
    … for SNCF only at first

    View Slide

  27. Cloud
    Web Mobile

    View Slide

  28. Cloud
    Web Mobile

    View Slide

  29. View Slide

  30. View Slide

  31. View Slide

  32. View Slide

  33. Design is platform dependent
    Use large touch area
    Split screens
    Make navigation simple
    Focus on content

    View Slide

  34. Meaningful motion

    View Slide

  35. Meaningful motion

    View Slide

  36. KEEP IT SIMPLE, STUPID

    View Slide

  37. View Slide

  38. View Slide

  39. DON’T BE NARCISSISTIC
    SELF-LOVING
    SELF-ADMIRING
    SELF-CENTERED

    View Slide

  40. You brand lies in:
    Visual identity
    Writing style
    Empty states
    Tour

    View Slide

  41. …and the application icon

    View Slide

  42. …and the application icon

    View Slide

  43. USER EXPERIENCE
    MAKES THE DESIGN

    View Slide

  44. LEVERAGE PLATFORMS

    View Slide

  45. Go beyond the app
    Get to know the platform and how interact with it

    View Slide

  46. Android
    iOS

    View Slide

  47. Android
    iOS

    View Slide

  48. Embrace the platform design language
    Guidelines are a first step, a kickstart

    View Slide

  49. Android
    iOS

    View Slide

  50. Android
    iOS

    View Slide

  51. Android
    iOS

    View Slide

  52. Design is a balance
    Getting the best out of a set of constraints

    View Slide

  53. View Slide

  54. Future ?
    Now
    Design is never done…

    View Slide

  55. SECRET TO GOOD
    DESIGN IS ITERATION

    View Slide

  56. APP RELEASES

    View Slide

  57. Dog-fooding

    View Slide

  58. Beta testing

    View Slide

  59. The “release trains” model
    Train v1 Train v2

    View Slide

  60. The “release trains” model
    Train v1 Train v2
    D

    View Slide

  61. C
    B
    A
    The “release trains” model
    Train v1 Train v2
    D

    View Slide

  62. C
    B
    A
    The “release trains” model
    Train v1 Train v2
    D

    View Slide

  63. C
    B
    A
    The “release trains” model
    Train v1 Train v2
    D

    View Slide

  64. H
    G
    F
    E
    C
    B
    A
    The “release trains” model
    Train v1 Train v2
    D

    View Slide

  65. D H
    G
    F
    E
    C
    B
    A
    The “release trains” model
    Train v1 Train v2

    View Slide

  66. D G
    F
    E
    The “release trains” model
    H
    Train v2

    View Slide

  67. Features toggles
    Product
    Backend
    Marketing
    Legal

    View Slide

  68. vn Week 1

    View Slide

  69. vn Week 1 Week 2 Week 5
    feature freeze

    View Slide

  70. vn Week 1 Week 2 Week 5 Week 6
    beta release

    View Slide

  71. vn Week 1 Week 2 Week 5 Week 6 Week 7
    public release

    View Slide

  72. vn Week 1 Week 2 Week 5 Week 6 Week 7
    feature freeze
    beta release
    public release

    View Slide

  73. vn Week 1 Week 2 Week 5 Week 6 Week 7
    Week 1
    vn+1

    View Slide

  74. eek 6 Week 7
    Week 1 Week 2 Week 5 Week 6 Week 7
    vn+2
    Week 1
    vn+3

    View Slide

  75. PROCESSES ARE ONLY
    VALID IN THEIR CONTEXT

    View Slide

  76. THANK YOU!
    @cyrilmottier
    cyrilmottier.com
    @cyrilmottier
    cyrilmottier.com

    View Slide