1. The document discusses ING's Unified Design System which aims to create one technology stack, one way of working, and one central platform. 2. It explains the benefits of a centralized structure using reusable web components to mitigate duplication and inconsistency. 3. The goals are to maximize reusability, have common tools and processes for engineers and designers, and provide a central marketplace on a shared platform foundation.

1. Steven Roest - Product Area Lead - One Experience
ING’s Unified Design System

4. Dependencies explained
App
X
App
Y
Top
nav
Footer
Article Form

5. Analyzing the stars

6. Example of an invisible component:

7. Credit: F/ART

8. Analyzing the stars

9. 1/3. One Technology Stack

10. Using web standards. #usetheplatform

11. A centralized structure with systems that mitigate the risk
of duplication and inconsistency in building vanilla web components.
One Web Component SDK
Styling
Icon
Fetching
Translation
Forms
Validation Multistep
Routing StateBootstrap

12. How to maximise reusability and interoperability

13. 1: App layer
2: Integration layer
3: Widgets
4: Molecules
5: Atoms
Valueofreuseincreases
The layered app architecture
1: App layer
2: Integration layer
3: Widgets
4: Molecules
5: Atoms

14. 2/3. One Way of Working

15. Tools, Processes and Methods
Engineers
• Software
• Processes
• File storage
• File collaboration
• Editing
• Publishing
UX designers
• Software ?
• Processes ?
• File storage ?
• File collaboration ?
• Editing ?
• Publishing ?

16. Credit: Kobal

17. ING Orange
#FF6200
Black 15
#D9D9D9
Hairlines only
White
#FFFFFF
Black 34
#A8A8A8
Black 8
#F0F0F0
Backgrounds only
Black 54
#767676
Black 80
#333333
Body text only
Primary colours
ING Indigo
#525199
ING Lime
#D0D93C
ING Sky
#559BD1
ING Leaf
#349651
ING Fuchsia
#AB0066
Secondary colours Functional colours
ING Plus
#349651
ING Minus
#FF0000
#9898C3 #9FCAEA #CD66A4 #E3EA8F #83C197
#CBCCE1 #CEE5F5 #E5B8D2 #F1F5C8 #C1E0CB
#E6E5F0 #E8F3FA #F3DCE9 #F8FAE4 #E1F0E6
Tints of secondary colours
Primary logo aligned to the top-left corner
24px
32px
Primary logo with pay-off
Liczq sie ludzie
24px
24px
32px
One Design Language

18. 3/3. One Central Platform

19. The platform
Market place
Consumer
Producer
Publish
Pull
Business Services
Business Solutions
Platform Foundation
End Customer

20. One Technology Stack
• One Web Component SDK
• One App Architecture
One Way of Working
• Tools, Processes and Methods
• One Visual Identity
One Central Platform
• Platform foundation
• Marketplace
ING’s Unified Design System

21. Orange

22. Sharing widgets across applications and borders
Buy
Cool new feature for
selling insurances
Buy
Cool new feature for
selling insurances
Buy
Cool new feature for
selling insurances

23. Scale and adopt
Efficient
One
Differentiating
Dynamic Technology
BusinessHuman
Global
Scalable
Agile
Fast
Consistent
Open

24. The network effect: an offer you can’t refuse
2 produce = 2 consume 4 produce = 12 consume 8 produce = 56 consume
€ 200k - € 600k€ 100k - € 100k € 400k - € 2.800k

25. Don’t push it.

26. ?