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.

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