The document describes the journey of a large fintech company to develop an internal design system over several years. It started with an initial HTML/CSS system in 2015-2017 that was difficult to use and maintain. In 2019, they began a new effort with guiding principles like treating the design system like a product and building community. This led to improvements in adoption, onboarding and future-proofing. While challenges remain, moving toward a design system platform could help scale and support tools, engagement and reuse of components across products. The process requires ongoing work and faces many challenges.

1. 1
1
@amir_ansari @webdirections
From a Prehistoric
Beast to a Modern Day
Product Enterprise
With a
Design System
@amir_ansari
@webdirections
By DALL-E 3

2. 2
2
@amir_ansari @webdirections
yrs in design and leadership
Melbourne, Australia
CXO & Head of Applied AI
@
Transform the world through education
25

3. 3
3
@amir_ansari @webdirections
Fintech, 2000 employees
5 continents
500k+ users

4. 4
4
@amir_ansari @webdirections
The design system team
19 product designers, researchers and UX writers
1.5 UI designers
~ 600 product engineers
2 Sponsors (Me and CTO)
1 Product Manager
1 Engineering team lead
5 FE engineers
0.5 UI designer
Rest of the business
As of April 2023…

5. 5
5
@amir_ansari @webdirections
Poll

6. 6
6
@amir_ansari @webdirections

7. 7
7
@amir_ansari @webdirections

8. 8
8
@amir_ansari @webdirections
8 timezones 20 acquisitions 60+ products
1:55
Design : Dev
B2B
B2B2C
UI repos
333

9. 9
9
@amir_ansari @webdirections
8 timezones 20 acquisitions 60+ products
1:55
Design : Dev
B2B
B2B2C
UI repos
333

10. 10
10
@amir_ansari @webdirections
2015 - 2019
Humble beginnings
2019 - 2023
Our Design System Journey
Take 2: Iress Design System
2023 +
Moving towards a platform

11. 11
11
@amir_ansari @webdirections
2015
2017
HTML/
CSS

12. 12
12
@amir_ansari @webdirections
Hard to use
Poor adoption & consistency
High costs to maintain

13. 13
13
@amir_ansari @webdirections
As the team, looked back,
they felt there had to be a
better way!!!
So we decided to start
again, from the bottom up
(pun intended!)

14. 14
14
@amir_ansari @webdirections
Take 2 - Guiding principles

15. 15
15
@amir_ansari @webdirections
Guiding principles
● Treat it like a product

16. 16
16
@amir_ansari @webdirections
Guiding principles
● Treat it like a product
● Build community, break down silos
(256)
(131)
(111)
(129)

17. 17
17
@amir_ansari @webdirections
Guiding principles
● Treat it like a product
● Build community, break down silos
● Ease onboarding and adoption

18. 18
18
@amir_ansari @webdirections

19. 19
19
@amir_ansari @webdirections

20. 20
20
@amir_ansari @webdirections

21. 21
21
@amir_ansari @webdirections
Guiding principles
● Treat it like a product
● Build community, break down silos
● Ease onboarding and adoption
● Future proof
Strategic priority
Consistent use of Iress Design
System (IDS) allows us to deliver
high quality experience at scale.

22. 22
22
@amir_ansari @webdirections
Poll

23. 23
23
@amir_ansari @webdirections
● More assets to maintain
● Team capacity
● Gap between design and dev
● Competing with product roadmaps
● Web components
● ROI
Unresolved challenges!!!

24. 24
24
@amir_ansari @webdirections
knapsack.cloud/calculator smashingmagazine.com
ROI
● 65% gain in efficiency
● 1560 days saved of one
engineer
(6.7 years, $800K)

25. 25
25
@amir_ansari @webdirections
● Platform for scale
Moving towards a
platform

26. 26
26
@amir_ansari @webdirections
Moving towards UI as a platform
IDS
Atoms, molecules, organisms & layouts
APIs
3rd party libraries
Design tools, docs, themes
Mobile and accessible

27. 27
27
@amir_ansari @webdirections
Product
● Ownership
● Governance
● Dedicated team
Scale
● Support tools
● Engage and collaborate
● Skin in the game
Community
● Right tech choices
● Ways of working
● Building blocks
Key takeaways

28. 28
28
@amir_ansari @webdirections
Key takeaways
It’s a continuous
evolving journey
and f$#@en hard work!!!!
By DALL-E 3

29. 29
29
@amir_ansari @webdirections
Thank you
@amir_ansari
@webdirections
amiransari.com.au
By DALL-E 3
“Design systems…
there’s no such thing as
DONE!”