1. Multi-Device UI Development for Task-Continuous Cross-Channel Web Applications
Enes Yigitbas, Thomas Kern, Patrick Urban, Stefan Sauer

2. Overview Background and Motivation Solution Architecture
Case-Study: Cross-Channel Banking Web Application
Summary & Outlook
Multi-Device UI Development for Cross-Channel Web Applications – Enes Yigitbas

3. Background
Wincor Nixdorf is a German corporation that provides retail and retail banking hardware, software, and services. Wincor Nixdorf is engaged primarily in the development of self-service systems.
Self-service systems provide a wide range of products and services: …
Self Checkout
Ticket Machine
Banking ATM
Multi-Device UI Development for Cross-Channel Web Applications – Enes Yigitbas

4. Introduction Classic Banking Liquid Banking
Customers access banking services solely via isolated channels.
Customers are able to flexibly access their banking service where, when and how it suits best.
Multi-Device UI Development for Cross-Channel Web Applications – Enes Yigitbas

5. What means „Liquid Banking“?
Integration of various types of web-enabled smart devices for supporting banking activities.
Distributed user interactions.
Digital handover between different devices
Multi-Device UI Development for Cross-Channel Web Applications – Enes Yigitbas

6.
Challenges
Classic
Banking
Liquid
Fixed Channel Usage
Flexible Channel Usage
Separation of Channels
Integration of Channels
Data redundancy
Data synchronization No
Channel switch
Continuous Channel switch
C1: Support for heterogeneous UIs allowing access for different channels
(e.g. PC, Smartphone, ATM).
C2: Support for a flexible channel usage depending on the context.
C3: Support for a seamless hand-over between channels allowing
task-continuity.
Multi-Device UI Development for Cross-Channel Web Applications – Enes Yigitbas
© Universität Paderborn -

7. Solution Architecture
C1: Support for heterogeneous UIs allowing access for different channels
(e.g. PC, Smartphone, ATM).
C2: Support for a flexible channel usage depending on the context.
C3: Support for a seamless hand-over between channels allowing
task-continuity.
Multi-Device UI Development for Cross-Channel Web Applications – Enes Yigitbas

8. Instantiation of Development Process
Case Study application architecture:
On each device the client application is running as a single page web application inside a browser.
Multi-Device UI Development for Cross-Channel Web Applications – Enes Yigitbas

9. Step 1: Modeling
Usage of existing OMG standardized models for specifying the UI
Domain Model (UML Class Diagram) describing the data entities of the UI.
Multi-Device UI Development for Cross-Channel Web Applications – Enes Yigitbas

10. Step 1: Modeling
Usage of existing OMG standardized models for specifying the UI
Abstract UI model (Interaction Flow Modeling Language) for specifying the structure, content and navigation of the UI.
Multi-Device UI Development for Cross-Channel Web Applications – Enes Yigitbas

11. Step 2: Transformation
Map IFML model elements to final web UI views, in our case to specific HTML5 elements.
The Xtend plugin includes different Xtend templates to transfer the IFML source model into web UIs supporting different devices.
Multi-Device UI Development for Cross-Channel Web Applications – Enes Yigitbas

12. Step 2: Transformation Generated code snippet for login dialogue:
Multi-Device UI Development for Cross-Channel Web Applications – Enes Yigitbas

13. Step 2: Transformation
During the transformation process, the application‘s view is built upon basic components with a custom look&feel like buttons, text input fields, dropdown lists, tables etc.
Our custom components are sensitive to the target platform (desktop, mobile, ATM) and adapt themselves accordingly:
Multi-Device UI Development for Cross-Channel Web Applications – Enes Yigitbas

14. Step 3: Execution (Front-End)
UI Router as a central key component to implement task-continuity.
Inside a view controller and prior to saving a state, all context information is added to a state-context object:
We implemented an AngularJS service PersistStateService, which converts the object context to JSON and sends it to the Back-End Server.
On instantiation of the AngularJS controller associated with this state, the controller calls the service‘s restore method to retrieve the previously stored information.
Multi-Device UI Development for Cross-Channel Web Applications – Enes Yigitbas

15. Step 3: Execution (Back-End)
The application‘s Back-End is implemented in JavaScript and uses Node.js as its runtime environment:
Multi-Device UI Development for Cross-Channel Web Applications – Enes Yigitbas

16. Cross-Channel Banking Web Application in Usage
Multi-Device UI Development for Cross-Channel Web Applications – Enes Yigitbas

17. Summary & Outlook
Liquid banking scenario and challenges for developing heterogeneous UIs.
Model-based solution architecture supporting efficient development of UIs for different channels (PC, Smartphone, ATM).
Implementation of a cross-channel liquid banking web application as a case-study.
Next Steps:
Extension of transformation process to support the generation of dynamic aspects (e.g. input validation, controller artifacts, etc.
Studies with web designers and developers to further evaluate the efficiency and effectiveness of our approach.
Multi-Device UI Development for Cross-Channel Web Applications – Enes Yigitbas

18. Multi-Device UI Development for Cross-Channel Web Applications – Enes Yigitbas