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.

  • 1455 Raised
  • 6 Backers

Featured Video

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 

  • Available for iOS in Apple Store
  • Available for Android in Google Play Market
  • Available as web-application (PWA) via browser, can be installed on any device

Rich Notifications

  • Allows you to demonstrate transport ticket to Inspector without unlocking your phone.
  • Contains embedded QR code of the ticket

Scheduled Notifications

  • Schedule a rich notification with your ticket at the time that you want.
  • You can set time and days of the week
  • You can also set timer when to dismiss the notification
  • No internet connection required

Offline mode on any device

  • Once you have purchased the ticket it will be available for you even without internet connection.
  • Utilising PWA technologies, offline mode also available in device browser


Add to wallet

  • Purchased ticket can be added to Apple Wallet on iOS devices or to Google WalletPasses on Android devices

Ticket-Widget

  • Once app installed on iOS or Android device the ticket-widget will be available
  • Ticket-widget allows to show ticket without unlocking the phone 




Features Summary

Feature \ AppiOSAndroidWeb (PWA)
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 wayNew way


6 Steps:

  1. Locating the phone
  2. Unlocking 
  3. Finding the app
  4. Opening the app
  5. Clicking on “tickets”
  6. Showing the screen to the inspector

2 Steps:

  1. Locating the phone

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.








[email protected]Building ConnectionsAv. Serpa Pinto 3114450-718 Matosinhos, Portugal

Product

Help

Follow us

Copyright © 2021 All rights reserved. TAIKAI — Hackathon Platform.