Wiener Linien Quick Tickets
Cross-platform solution available on Android, iOS and on the Web (PWA) with modern User Interface. For quick access no phone unlocking or authentication required. Available in offline mode.
- 1,455 Raised
- 148 Views
- 6 Judges
Gallery
Description
Wiener Linien Quick Tickets |
Using cross-platform technology we have delivered user-friendly “Wiener Linien Quick Tickets'' application which is available on Android, iOS and via browsers supporting PWA (Progressive Web Application).
We have analysed how people in different countries actually use public transport apps on their phone and came up with the idea that user-friendly design, intuitive app interaction workflow and widely used devices features are key for success.
Demo of the Web Version |
https://wienerlinien.netlify.app |
App Features |
Cross-platform availability
| |
Rich Notifications
| |
Scheduled Notifications
| |
Offline mode on any device
| |
Add to wallet
| |
Ticket-Widget
|
Features Summary |
| Feature \ App | |||
|---|---|---|---|
| Cross-platform Availability and Universal Design | |||
| Rich Notifications with ticket QR Code | *on iOS devices currently this feature is not available. Petition to Apple to enable it | ||
| Scheduled Ticket Notifications | *need backend server for scheduling background events | ||
| Offline Mode. Search, open and display tickets without internet connection | |||
| Add ticket to Wallet | |||
| Ticket Widget |
Ticket Validation Process |
| Old way | New way |
|---|---|
6 Steps:
| 2 Steps:
Use one of these steps without unlocking: 2.1. Show ticket QR code from Rich Notification 2.2. Show ticket from Wallet 2.3. Show ticket from Widget |
Implementation |
Design | User interface and user experience are one of the major goals of our prototype. We have resigned from the UI using Google Material Design guidelines. The process of purchasing tickets and displaying tickets was also changed. It became shorter and simpler. |
Technologies | One of our main ideas is to make our application available literally on any mobile device. That is why we choose React-Native cross-platform framework. It allowed us to compile to native iOS, native Android and Progressive Web Application (PWA). Using one code base users now either install applications from the App Store, Google Play Market or just open a PWA application from a mobile phone browser. PWA application utilizes Service Worker, which allows users to install the application, send push notifications, do background operations and work offline. |
Development Process | We started with the Expo framework. It allowed us to quickly apply our design idea and try it out on iOS, Android and in the Web browser. Here we have managed to set up Rich Notifications and Scheduled Ticket Notifications. For web Google Workbox was implemented. Since we wanted to try a Ticket Widget we had to eject from Expo to React-Native bare workflow, because Expo currently not supporting this feature. Ejecting allowed us to modify Notifications and for future implementation developers can add some extra features like NFC or BLE or write platform-specific code. |
Disclamer: This is a prototype application. We are not aware about the correctness of the business processes of Wiener Linien. Some parts of the application work as mockups, without real services. Login, generation of QR codes, generation Wallet Tickets, Widget data, purchasing tickets are mocked processes. Of course, it is possible to integrate this prototype and its workflow with real services.
Team members:
Andrii Fedorenko, Dipl. -Ing. Solution architect and senior full stack developer. Oriented on customer experience applications to make it fast, reliable and user friendly. | |
Mersi Stafa, BSc. UI/UX expert, Frontend Developer, Illustrator. Currently studying Master at FH Wien. |