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
2. @cyrilmottier
3. capitainetrain.com • @capitainetrain captaintrain.com • @captaintrain
4. capitainetrain.com • @capitainetrain captaintrain.com • @captaintrain
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
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
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
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