Designing Captain Train Mobile Experience

E9bf8f6d5480ea2a2623df7dccfd1f70?s=47 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.

E9bf8f6d5480ea2a2623df7dccfd1f70?s=128

Cyril Mottier

October 28, 2015
Tweet

Transcript

  1. DESIGNING CAPTAIN TRAIN MOBILE EXPERIENCE

  2. @cyrilmottier

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

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

  5. None
  6. INTRODUCTION

  7. March 2014 October 2013 October 2012 May 2010 Android app

    iOS app Public website Beta website
  8. Mobile has a lot of contraints application designers need to

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

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

    to deal with Battery Network
  11. Location But also some advantages to enhance context awareness in

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

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

    awareness in apps
  14. Web expectations Mobile expectations vs

  15. Web expectations Mobile expectations vs

  16. Web expectations Mobile expectations vs

  17. Discovery & planning Search & purchase Leaving home/office Boarding at

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

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

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

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

    station Travelling by train Connection & arrival Imminence of travel Information conciseness
  22. My account One account, all devices You are always at

    home
  23. FROM WEB TO MOBILE

  24. What are users expecting from the app?

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

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

    | | … for SNCF only at first
  27. Cloud Web Mobile

  28. Cloud Web Mobile

  29. None
  30. None
  31. None
  32. None
  33. Design is platform dependent Use large touch area Split screens

    Make navigation simple Focus on content
  34. Meaningful motion

  35. Meaningful motion

  36. KEEP IT SIMPLE, STUPID

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

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

    Tour
  41. …and the application icon

  42. …and the application icon

  43. USER EXPERIENCE MAKES THE DESIGN

  44. LEVERAGE PLATFORMS

  45. Go beyond the app Get to know the platform and

    how interact with it
  46. Android iOS

  47. Android iOS

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

    a kickstart
  49. Android iOS

  50. Android iOS

  51. Android iOS

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

    set of constraints
  53. None
  54. Future ? Now Design is never done…

  55. SECRET TO GOOD DESIGN IS ITERATION

  56. APP RELEASES

  57. Dog-fooding

  58. Beta testing

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

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

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

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

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

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

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

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

    v2
  67. Features toggles Product Backend Marketing Legal

  68. vn Week 1

  69. vn Week 1 Week 2 Week 5 feature freeze

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

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

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

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

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

    Week 6 Week 7 vn+2 Week 1 vn+3
  75. PROCESSES ARE ONLY VALID IN THEIR CONTEXT

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