1. Stop generating your User Interface!
Start designing IT
Lonneke Dikmans
November 2012 | Nuremberg
1 | 27

2. Agenda
● Generating the UI based on the process design
• Case (1)
• Problem
● Alternative approach
• Case (2)
• BPMN method and style
• UX methods an techniques
● Result
• Process
• UX
• Architecture
● Demo and conclusion
2 | 27

3. Generating the UI | Case 1 Building Permits
Process
● Building permits at the city of Rotterdam
● Combination of automated activities (services) and human tasks
Different roles
● Applicant who wants to build something
● Front office that receives the application and communicates
● Building inspector who reviews the application
● Finance department who sends the invoice
● (External) advisors
3 | 27

4. Generating the UI | Case 1 Building Permit
UI
Screen 1 Screen 2 Screen …
BPEL Process
Application Application
Received evaluated
Human Service Human
…
Task 1 Task Task 2
4 | 27

5. The problem | Generating the User interface
Process perspective
● Steps become too fine grained
● Too much data need to be ‘carried’ in the process
User interface perspective
● Organized in terms of the ‘process unit’ (permit application)
● Inflexible for the user, no short cuts, bulk edits
● Too little information, only task data
5 | 27

6. Agenda
● Generating the UI based on the process design
• Case (1)
• Problem
● Alternative approach
• Case (2)
• BPMN method and style
• UX methods an techniques
● Result
• Process
• UX
• Architecture
● Demo and conclusion
6 | 27

7. Generating the UI | Case 2. ESS and MSS
Process
● Expense report self service for managers and employees
● Combination of automated tasks and human tasks
Different roles
● Employee who made the expense and enters the report
● Manager who approves the expense
● Finance department who approves and pays the expenses
7 | 27

8. Alternative Approach | BPM & UX
Design process based on BPMN Method and Style
● Choose the ‘object’ of your process
● Start with high level process map
● High level process
Design Experience based on User Centered Design
● Determine your personas
● Determine the scenarios
● Create interaction design
8 | 27

9. Agenda
● Generating the UI based on the process design
• Case (1)
• Problem
● Alternative approach
• Case (2)
• BPMN method and style
• UX methods an techniques
● Result
• Process
• UX
• Architecture
● Demo and conclusion
9 | 27

10. Result | Process
10 | 27

11. Result | User experience
Personas
● Peter - employee
● John – manager of Peter
● Petra – HR employee
Scenarios
● Create an expense report for a meeting out of the office
● Create an expense report for a meal and overtime
11 | 27

12. Result | UX
12 | 27

13. Result | Architecture
GUI
REST Services
PL/SQL web
Services
services
BPM
EBS 12
DB
13 | 27

14. Agenda
● Generating the UI based on the process design
• Case (1)
• Problem
● Alternative approach
• Case (2)
• BPMN method and style
• UX methods an techniques
● Result
• Process
• UX
• Architecture
● Demo and conclusion
14 | 27

15. Demo
15 | 27

16. Conclusion
Advantages of this approach
● Application appeals to users and satisfies there needs
● Process is monitored and executed in compliance with tax rules
● Parallel execution of different layers, so no delay
● Extra cost in beginning of project, less cost in maintenance
• Easy to change
• Less need to change
16 | 27

17. Stop generating your User
Interface!Start designing IT
Lonneke Dikmans
November 2012 | Nuremberg
17 | 27