Scroll
The project's overarching goal was to bridge the gap between the marketing site's web experience, based on Tailwind CSS, and the platform web experience. To achieve this, we decided to pivot from the existing MUI-based design system to a Tailwind CSS-based PubNub Design System for the application UI. This transition required a holistic understanding of our diverse product areas, establishment of consistent design patterns, conversion of MUI components, handling complex components, and effective communication with cross-functional teams.
The main problem was a disconnection between the platform web experience and the marketing site's web experience due to the use of different design systems (MUI and Tailwind CSS). This led to inconsistencies in the design, user experience, and branding. Additionally, without a dedicated design system team, coordinating with various scrum teams and ensuring a smooth transition posed a challenge.
Key issues included:
Design Inconsistencies: Inconsistencies between the platform UI and marketing site UI affected the overall user experience and brand identity.
Lack of Repeatable Patterns: The absence of a well-defined design system hindered the ability to create and maintain consistent UI patterns.
Complex Component Transition: Converting complex components, such as tables and date-time pickers, required meticulous design and documentation to ensure they met the needs of various product areas.
Cross-Team Communication: Coordinating with engineers and ensuring everyone was aware of updates and design changes in the absence of a dedicated design system team was challenging.
To address these issues and bridge the gap, I helped coordinate and plan all of these steps:
Transitioned to Tailwind CSS: We adopted Tailwind CSS for the application UI, aligning it with the marketing site and ensuring a unified design language.
Stakeholder Engagement: I conducted extensive discussions with stakeholders across product areas to understand their specific needs and preferences, also making sure that both design and dev teams were coordinated on a more frequent cadence.
Pattern and Framework Development: We established a comprehensive set of repeatable design patterns and frameworks within the new design system, providing teams with a consistent foundation.
Component Conversion: I led the review and conversion of MUI components, ensuring they seamlessly integrated with the new design system, especially in terms of brand colors and design aesthetics.
Complex Component Design: Complex components, such as tables and date-time pickers, were meticulously designed and documented, making them accessible and adaptable for different product areas. Communication and Workflow: I facilitated effective communication and workflow between cross-functional teams, ensuring everyone was aligned with the ongoing developments in the design system.
In conclusion, this comprehensive transformation has resulted in a cohesive and user-friendly design system, bridging the gap between the marketing site and platform web experiences, and empowering teams with the tools they need to create consistent and engaging user interfaces. This streamlined approach significantly impacted designer workflows, reducing the time spent searching for patterns and examples, and increased the pace of high-fidelity work delivery, all accomplished within a single quarter, in tandem with ongoing product work
