Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

UX STRAT Europe 2019: Steven Roest, ING

174 views

Published on

Coming soon

Published in: Design
  • Be the first to comment

  • Be the first to like this

UX STRAT Europe 2019: Steven Roest, ING

  1. 1. Steven Roest - Product Area Lead - One Experience ING’s Unified Design System
  2. 2. Dependencies explained App X App Y Top nav Footer Article Form
  3. 3. Analyzing the stars
  4. 4. Example of an invisible component:
  5. 5. Credit: F/ART
  6. 6. Analyzing the stars
  7. 7. 1/3. One Technology Stack
  8. 8. Using web standards. #usetheplatform
  9. 9. 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
  10. 10. How to maximise reusability and interoperability
  11. 11. 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
  12. 12. 2/3. One Way of Working
  13. 13. Tools, Processes and Methods Engineers • Software • Processes • File storage • File collaboration • Editing • Publishing UX designers • Software ? • Processes ? • File storage ? • File collaboration ? • Editing ? • Publishing ?
  14. 14. Credit: Kobal
  15. 15. 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
  16. 16. 3/3. One Central Platform
  17. 17. The platform Market place Consumer Producer Publish Pull Business Services Business Solutions Platform Foundation End Customer
  18. 18. 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
  19. 19. Orange
  20. 20. 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
  21. 21. Scale and adopt Efficient One Differentiating Dynamic Technology BusinessHuman Global Scalable Agile Fast Consistent Open
  22. 22. 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
  23. 23. Don’t push it.
  24. 24. ?

×