2024
Design Systems
Leading & building a scalable, interactive, responsive, and accessible website for Docker.
Problem
One-off layouts and components were created to fit the unique needs of new pages. This caused inconsistent interactions, atomic design, and rogue components which hindered building a scalable and responsive site.
Docker.com was built on an old Wordpress template, which limited our innovation for dynamic UI/UX builds. This was not sustainable to keep up with the rate at which we innovated and scaled our design systems.
Approach
A tiger team of front-end developers, web managers, and designers assembled to overhaul the website design systems.
As the lead designer, I provided support, clarity, and delegation of tasks, design direction, and created designs alongside the team.
We started with a workshop to analyze existing components. We then clarified what we needed to improve, confirm, and eliminate, documenting it in a spreadsheet.
We managed this backlog using Jir and progressed towards our goal with sprints every 2 weeks and stand-ups 2-3x a week.
Design decisions
We established atomic and intrinsic design components, tokens, and global colour schemes, as well as refactored interactions.
Iterations continued as feedback was exchanged to align brand, UI/UX, and infrastructure best practices for an effective and optimized CMS build.
By Daniel Sears
By Ladislava Bohacova
Results
Achieved +30% scalable, accessible, and responsive systems.
+50% cohesive UI/UX components & branding.
150+ tokens, atomic & intrinsic designs, for reusable and global components, global colour schemes, and tokens.
Next steps
The next step would be to define the dark mode colour schemes, finalize the effects tokens, and establish the interactive states for dynamic components like calculators, sliders, timed tabs, clickable links, etc.
The final step would be to ensure the implementation of the system looks good in the custom storybook and work towards cascading it throughout Docker.com.
By Daniel Sears
Explore more
