Contributing to Open Source as a Product Designer Part 2: App Design for Distributed Network Monitoring
Evolving from landing page to full application design, leveraging AI and modern development practices to create an intuitive dashboard for DevOps and SRE professionals.
From Landing Page to Full Application
Before starting the design process, it is essential to understand the requirements and constraints of the project. This includes understanding the target audience, the features and functionality of the app, and the technical requirements of the system.
Michael has a proof of concept available on GitHub. My contribution to the project is to design the landing page, user interface, and user experience for the app. I am working closely with Michael to ensure that the design meets his vision and the technical requirements.
Key Questions Before Design
What are the key features and functionality of the app?
Who is the target audience for the app?
What are the technical requirements of the system?
What are the design constraints and limitations?
What are users trying to accomplish with the app?
Are there any solutions currently available solving the same problem?
"My design process has evolved over time as I embraced AI for more repetitive tasks and focused on creating a more intuitive and user-friendly interface. This newfound leverage allows me to focus more of my time exploring new design ideas and experimenting with different approaches."
Breaking Down the Problem
I broke down the problem into phases and created a detailed plan for each phase, ensuring a comprehensive approach to the dashboard design.
Foundational Requirements
Goal: Establish a clear understanding of core needs
- What's the typical daily workflow of a DevOps or SRE professional using the tool?
- What are the essential pieces of information that this tool currently provides?
- What types of new data or functionalities do we anticipate being added?
- How might the initial dashboard design accommodate this growth?
Information Architecture
Goal: Define structure and navigation
- Define high-level structure considering limited initial content and future expansion
- Identify the most logical and essential top-level navigation items
- Group information and widgets that provide immediate value to users
- Consider common navigation patterns intuitive for DevOps professionals
- Identify immediate 'quick actions' for direct access from dashboard
Layout & Element Definition
Goal: Establish foundational layout and key visual elements
- Place top-level navigation, key status indicators, and information groupings
- Identify 2-3 most critical 'at-a-glance' status indicators for prominent display
- Use visual hierarchy to draw attention to most important information first
- Consider how dashboard adapts to different screen sizes and devices
From Sketches to High Fidelity
Initial Exploration
Starting with pen and paper allows me to quickly and freely sketch out ideas without worrying about technical details or constraints. These initial explorations focused on the parameters defined in the previous phases.
Digital Wireframes
As my vision became clearer, I transferred the explorations into Figma to play with layouts and basic element definitions more precisely.
High Fidelity Design
When I reached a stage I was happy with the layout and elements, I began refining based on insights gained from the initial explorations.
Key Refinement Considerations
Consistency
Ensure layout and elements are consistent across all screens and devices
Accessibility
Make sure the dashboard is accessible to users with disabilities
Performance
Optimize for quick loading and smooth operation
Responsiveness
Adapt seamlessly to different screen sizes and devices
Usability
Ensure the dashboard is easy to use and understand
Early Style Guide Elements
As the project is in very early stages, the style guide is still being developed and refined. However, some key elements are already taking shape.
Color Scheme
Visually appealing and easy to read palette
Typography
Clear, readable fonts matching the dashboard style
Icons
Intuitive icons for actions and features
Layout
Organized for easy navigation and understanding
The Evolving Role of Design
In my personal view, the Product Designer role is changing rapidly, and it is essential that my skills and knowledge also evolve. I've decided to leverage my knowledge of HTML, CSS, and JavaScript to create a responsive and accessible prototype that goes beyond what I could've done with Figma alone.
One of the benefits of working in open source companies/projects is the access to a vast community of users who can provide feedback and suggestions. It will be interesting to see how the community responds to the prototype and what suggestions they have for improvement.