1 | 27

Stop generating your User Interface!Start designing IT

Lonneke DikmansNovember 2012 | Nuremberg

2 | 27

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

3 | 27

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

4 | 27

Generating the UI | Case 1 Building Permit

Human Task 1

Service Task

Human Task 2 …

ApplicationReceived

Application evaluated

BPEL Process

UI

Screen 1 Screen 2 Screen …

5 | 27

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

6 | 27

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

7 | 27

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

8 | 27

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

9 | 27

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

10 | 27

Result | Process

11 | 27

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

12 | 27

Result | UX

13 | 27

Result | Architecture

EBS 12Serv

ices

BPM

GUI

DB

REST Services

PL/S

QL

web

se

rvic

es

14 | 27

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

15 | 27

Demo

16 | 27

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

17 | 27

Stop generating your User Interface!Start designing ITLonneke DikmansNovember 2012 | Nuremberg