Mashable Design System: Built as part of Mashable's 2021 redesign, the design system was constructed using Tailwind CSS to ensure consistency, flexibility, and scalability across the site. By creating a unified set of components, it streamlined the development process and laid the foundation for future updates. This system not only enhanced the visual coherence of the redesign but also improved the overall user experience by making the site faster, more responsive, and easier to maintain.
The challenge:
As part of Mashable’s redesign, I collaborated closely with the Engineering team to create a comprehensive design system.
Prior to the redesign, Mashable lacked a unified system, resulting in inconsistencies, sluggish site performance, and mounting tech debt that hindered scalability and maintainability.
The solution:
I developed the design system using an atomic design approach, starting with the smallest elements (atoms) and building up to more complex components (organisms), all anchored by Tailwind CSS. This approach not only ensured design consistency across the site but also streamlined future updates and made the system more adaptable for ongoing changes.
My role in this project:
I was the lead designer, focusing on experience, usability, front-end styling and structuring.
