Contributing to Open Source as a Product Designer Part 1: Service Radar
Bridging the design gap in open source by contributing UX expertise to a distributed network monitoring system, transforming complex technical interfaces into intuitive experiences.
Finding the Design Gap
My passion lies at the intersection of product design and the collaborative spirit of open source. While I admire the community-driven nature and the 'no guard rails' innovation often found in open source projects, my experience working alongside talented engineers highlighted an observation: many contribute powerful code, but dedicated design contributors seemed less common within my professional network.
Seeing this gap as an opportunity, I set a personal goal: to become a designer actively contributing to an open source project. I began searching platforms like GitHub, Lemmy, and Reddit for a project that resonated with my interests and where design could potentially add significant value.
"ServiceRadar is a distributed network monitoring system designed to keep an eye on internal services while delivering cloud-based alerting. It aims to tackle the complexities of modern infrastructure monitoring."
Understanding the Landscape
Intrigued by the project's ambition, I explored the documentation and experimented with the current iteration. While functionally promising, my initial analysis suggested opportunities to enhance the user experience—particularly around the clarity of information presented and the ease with which new users could understand their system's status at a glance.
Key Questions Before Contributing
- What is the specific target audience beyond DevOps/SREs?
- How does Service Radar position itself in the competitive landscape?
- What is the long-term vision for the project?
- Are there existing design guidelines or branding considerations?
- How can my skills (design + HTML/CSS/JS) best integrate with the project?
From Analysis to Action
Initial Contact
With prepared questions and initial observations, I contacted Michael. Our chat was insightful—I learned more about his vision for Service Radar and confirmed that he hadn't collaborated closely with a dedicated designer before, presenting a learning opportunity for both of us.
UX Audit
I shared my initial observations and a preliminary UX audit, outlining concrete ways design thinking could support the project's development. The audit focused on information hierarchy, visual clarity, and user journey optimization.
Defining Scope
After discussing possibilities based on my findings, we agreed that focusing first on improving the clarity and usability of the main status dashboard and visual hierarchy of critical alerts would be a valuable and impactful starting point.
From Sketches to Systems
Initial wireframe sketches exploring dashboard layout and information hierarchy
To tackle the challenge of presenting complex monitoring information intuitively, I began exploring design directions that emphasized clarity and scannability. An isometric style emerged as a promising direction, potentially offering a way to visually distinguish different monitored services or system components clearly within the dashboard interface.
Accessibility First, Not Afterthought
Throughout the visual exploration, accessibility was a core principle. As I experimented with layouts and potential color palettes inspired by the isometric approach, I actively used Figma's built-in tools to ensure adherence to WCAG contrast requirements. The goal was to create a visually engaging and universally usable interface from the outset.
Designing for Every Screen
To ensure the proposed solution would function effectively across different user environments, I developed responsive designs, considering layouts for three key breakpoints (desktop, tablet, and mobile).
Complete redesigned landing page with improved information hierarchy and visual clarity
Making It Real
Iterative Refinement
Through an iterative process, I shared concepts with Michael, gathering feedback on how effectively the new layouts surfaced critical information compared to the existing setup. This collaborative loop allowed us to quickly pinpoint areas for improvement and refine the visual language and information hierarchy.
The iterative design and feedback cycle brought us closer to a concept that significantly improves upon the previous version in terms of usability and clarity. The next logical step involves translating these refined designs into functional code.
The Impact of Design in Open Source
This collaboration marks just the beginning of my journey as a product designer contributing to open source projects. The experience reinforced my belief that dedicated design thinking can significantly enhance open source tools, making them more accessible and user-friendly while maintaining their technical power.
By bridging the gap between engineering excellence and user experience, we can help open source projects reach broader audiences and have greater impact. The work continues as Service Radar evolves, with design now integrated as a core consideration in its development.