Living in your website while renovating it

Have you ever renovated your house while living in it? Hard, right? This is timeanddate.com’s journey of renovating our 25+ years old website while our 2 million daily users still live in it.

With a website as diverse, “rich” and full of data and “old charm” as timeanddate.com , it's no simple task to create a new design system with both robust and flexible components.

We share challenges, learnings and examples from building our design system, Clockwork. After a few failed attempts, we have started rolling out components. There is still a lot of work left, but eventually we’ll have a refreshed and consistent look & feel across all the pages of timeanddate.com.

Transcript

1. Design system: a collection of reusable components, patterns, and guidelines that help teams build consistent and efficient digital products.
4. - Design Lead - Joined 14 years ago (2011) - From Australia Geremy - Frontend Lead - Joined 17 years ago (2008) - From England Andy
5. - 27 Years old - Mix of building styles & materials - Confusing entrances - Unexpected observatory! Timeanddate.com
6. Need to make changes? People need live in it while we renovate - 2M+ unique daily visitors - 10M+ real page visits. Timeanddate.com Floor plan
8. Winding back 27 years
9. Steffen’s (CEO) Personal Website 1995 – A university student page University of Science and Technology (Trondheim, Norway) World Clock, Calendar
10. 1998 – timeanddate.com established Modest cabin years
11. 2000 – Website growth Modest cabin years
12. 2000 (Oct) Becoming house like
13. 2007 Observatory added
14. 2010 – Green Designer on the scene
15. 2011 – Skeuomorphism Homepage Design for next 10 years! Geremy begins
16. 2020 – Minimalism (flat) Refining things
19. ~2000 Articles
20. 7900+ Holidays
21. In Addition ~500 Fun Holidays
22. ~6000 places, in ~800 states, across 251 countries + 11 million place names from GeoNames • Current Time • Weather • Time Zone • Clock Changes • Sun & Moon • Night Sky • Eclipses
23. Astronomy Pages • Eclipses and Transits • Meteor Showers • Comets • Equinoxes and Solstices
24. German Site Norwegian Site
25. API Site
30. 2012-now
31. 2018-now
32. • Tight coupling between backend and frontend • No separation of structure and design • Every small change needs backend involvement Why so hard to update?
33. • Different teams, different times, different approaches • Inconsistent patterns and styles • Works individually, not together • Collage of good intentions A House That Doesn’t Flow
34. 1998 2000 2010 2020 2007 2000 2011 2025 Fragmentation - A Living Museum Decades of design styles quietly coexisting.
35. 90s to early 2000s (birth of the industry) Tables... Tables everywhere Mimicking real life 2000s to early 2010s (Skeuomorphism) Early 2010s till 2015 (Web 2.0) Gradients, Drop Shadows, Glows 2015 to 2020 (Minimalism)
37. Growing Team More teams, more creativity, and more chaos.
40. • Competition moves fast • Expectations keep rising • Slow updates make you look dated Competition
41. • Privacy rules and ad-blockers reshaping revenue • We must be able to adapt how we sustain the site Advertising
42. • SEO now measures user experience • Accessibility and privacy laws keep evolving • Hefty fines for non-compliance SEO & Tighter Laws
43. • Generative tools reshaping search and content • User expectations evolving fast • Without strong foundations, we can’t adapt AI
44. • Aging structure + growing teams + changing web • Adaptation no longer optional • We needed to rebuild our foundations
45. We needed a system with: • Consistency – All should know how to make a timeanddate site • Scalability - Can throw more developers and designers at it • Separation of concerns – Empower the right teams to make choices, and improve velocity
47. • Started ‘componentizing’ with SASS + BEM • No shared plan, docs, or enforcement
48. • Inspired by Atomic Design principles • Focused on styles, patterns, markup, but no shared system • Components copied, not connected 2016–2019
49. • One shared source of truth • Backend = data, Frontend = design • Consistency, scalability, freedom to iterate –
51. • Treated as a side project • Competing with product work
52. • Part-time developer, borrowed design help • Everyone cared, nobody had time • Belief isn’t enough without dedicated people
53. • Grew through product work, not strategy • Solved local needs, not global ones • Progress, but not holistic • System shaped around short-term product needs instead of long-term design principles
54. • Looked like a design system • It had components • We had this single source of truth • Product teams were putting it to use
55. Reality Check • Components existed; rules didn’t • Without ownership, consistency collapsed • It’s a library that quietly forks itself No Governance, No System
56. Building design systems that work for your whole Organisation – Sarrah Vesselov
57. Realized now we needed a system with: • Consistency • Separation of concerns • Scalability • Governance • Dedicated Time & Resources • Shared Ownership Structure Sustainability • Not just a technical framework, it’s an organisational one • Not just about structure, it’s about sustainability
59. Clockwork: - system of mechanisms that drives a clock or device. - something that operates with perfect precision and reliabiltiy 'like clockwork'​ Named it! Hardest bit done Dedicated team, Dedicated project, Company focus
60. New plan 1. Foundation building (design choices) 2. Component building (core components) 3. Trial migrations (stress test)
61. 1. Foundation building Setting up for design decisions: a) Design principles b) Branding guidelines: content & imagery c) Guidelines & regulations (WCAG) d) Audit what we use Fail fast = make a call, move forward, see if it floats!
62. 1. Foundations a) Design tokens: primitives & semantic b) Mockups w tokens & design principles
63. 2. Component building Essential component & libraries a) Audit b) Kick off (Collaborative) c) Design (Figma) d) Implement (Storybook) e) Document (Company docs)
64. 3. Trial migrations Selectively rolling out components to lower risk areas • Stress testing • Updating
65. Design principles, values, design tokens Design principles, values, design tokens Design principles, values, design tokens adjustments Boromir, LOTR
66. The humble 'Box' component
67. Drift also began to creep in, between design team and front end Frontend slowed down, design powered ahead, governance was too loose. I thought they were just behind us..
68. Component changes or request = > Idea discovery - Capture idea - Evaluate idea - Turn into tasks - Run thro' normal component building Don’t skip steps!
69. Before After
70. Before After
71. Before After
72. Before After
73. Unification forming...
74. 2025 — Getting back to our house Clockwork is live on parts of the site
75. Change powered by design tokens
76. Clockwork —House of the future
78. • Starting fresh erases hard-won knowledge • Renovation preserves what works and what’s learned • Evolve your system through real use
79. • Components, tokens and patterns are just the bricks • Governance, trust, and shared principles hold it together
80. • Enthusiasm isn’t enough, commitment is • Without buy-in, there’s never time to do it right • With leadership support, it became core infrastructure
81. • A design system can’t run in the background • Needs dedicated people and protected time • Treat it as an initiative — not a side project Focus Drives Progress
82. • Test early, fail fast, learn faster • Design systems evolve through iteration • If you wait to get it right, the target has moved
83. • Design systems expose every inconsistency • Fixing them takes patience and persistence • Slow progress isn’t failure
84. • The web keeps changing, and is uncertain • A strong system adapts • The goal isn’t to finish, it’s to keep evolving
85. We’re still renovating. But now we have better tools, a stronger structure, and a team that knows how to build our house, we have our north star.