Company:
DashboardHUB
Year:
2018
Duration:
6 Months
Overview
This was my first serious Material Design project back in 2018. The DashboardHub team was building an open-source deployment pipeline monitoring platform as a PWA, and I had to create an interface for developers and DevOps engineers - an audience I was still learning to understand.
DashboardHub collected information from various sources about deployment processes and displayed everything in one place. Angular + Material Design seemed like the obvious choice for PWA, but I quickly learned that following guidelines doesn't mean copying them blindly.
I decided to break from typical Material flat aesthetic and added a gradient background. The orange gradient became our signature - warm and distinctive, showing this wasn't just another gray admin panel. Showing desktop and mobile simultaneously emphasized the PWA nature where users get push notifications about deployments directly on their devices.
Design System
Material Design gave us Roboto as foundation, but developers work with code, URLs, and release versions daily. Adding Courier for technical elements wasn't aesthetic - it was functional necessity for better readability.
The Orange Challenge
The client had strong attachment to their orange logo and wanted it everywhere: "Let's make the dashboard orange-themed with colorful blocks for content distinction."
I understood the marketing logic - orange would make us stand out in a sea of gray developer tools. But orange as primary color created usability issues. When your brand is orange and warnings are orange, users lose contextual cues.
Through iterations, we found middle ground: orange became our signature accent, critical information retained semantic colors (red for errors, green for success), and we used color selectively for genuinely important elements.
This taught me early: client collaboration means finding solutions that serve both brand and user needs.
Research
Here I had to become an information architect by force. Developers want to see EVERYTHING simultaneously: environment statuses, release versions, deployment history, active users, issues, pull requests. Classic case of "we want it like competitor's, only better and with blackjack."
Material Cards seemed like an obvious solution, but standard proportions created cathedral-sized interfaces. Had to break Material spacing rules for functional density.
The trickiest part - creating a scanning pattern. Developers first look for problems: failed deployments, security issues, broken builds. All critical information went to the top with red and orange accents. "Panic mode" information at the top, "all is well" statistics at the bottom. Simple as an emergency room.
Information Architecture
Developers want to see EVERYTHING simultaneously: environment statuses, release versions, deployment history, active users, issues, pull requests. Classic "we want it like competitors, only better."
Material Cards seemed obvious, but standard spacing created cathedral-sized interfaces. I had to break Material spacing rules for functional density - my first lesson in adapting systems to real needs.
Scanning Pattern
Developers first look for problems: failed deployments, security issues, broken builds. All critical information went to top with red and orange accents. "Panic mode" at top, "all is well" statistics at bottom. Simple as an emergency room triage.
Custom Components
The Dialog Dilemma
Client wanted "personalized experience" for project creation (read: not like everyone else), but Material Dialog has strict opinions. I learned to use Material as foundation while adding custom interactions where needed.
Data Tables
Most painful problem. Client: "Show all columns at once!" Material Table: "What about responsive design?"
Had to create hybrid - Material foundation with custom sorting, filtering, and expandable rows. Compromise as art form. This was 2018, and I was still learning when to follow rules and when to break them.
User Activity Widget
Diplomatic victory - combined Material List patterns with custom git visualization. Used Material's strengths, quietly added custom elements where it fell short.
Mobile & PWA
PWA meant mobile wasn't optional - it's core requirement. Developers get notifications at 3 AM: "Production is down!" and need to diagnose from phones.
The Table Problem
Desktop was packed with data tables. Horizontal scroll on mobile is madness, but standard solutions didn't work for critical information.
Solution: each table row transformed into expandable card. Key info (project name, status, last update) on header, detailed data in expandable content. No horizontal scroll, all information accessible.
PWA superpower: offline access to cached data and push notifications. Production crashes at 3 AM, you get notification, open app, everything's there. Almost magic.
Results & Impact
By late 2018, DashboardHub gained traction in the open-source community. The platform was adopted by approximately 200+ development teams (based on GitHub stars and Docker pulls at the time), with particularly strong interest from small to mid-size startups managing multiple deployment pipelines.
User feedback highlighted the visual distinction - the orange gradient and clean Material approach made it memorable in a sea of terminal-style monitoring tools. Several users mentioned reduced time switching between different monitoring dashboards, though exact metrics weren't tracked in those early days.
The project taught me that standing out matters, especially in developer tools where "functional but ugly" was the norm. The PWA approach was still relatively new in 2018, and having deployment notifications on mobile felt almost revolutionary for teams used to SSH-ing into servers.
Team & Collaboration
I was the lead designer on this project, working closely with a team of 4 Angular developers who built the platform. The technical constraints of Angular + Material in 2018 shaped many design decisions - some components simply weren't possible yet, others required creative workarounds.
The client had a consultant on their side who provided direction and feedback throughout. This created an interesting dynamic - balancing the consultant's vision, developer feasibility, and my growing understanding of what developers actually needed. Those weekly feedback sessions taught me more about stakeholder management than any course could.
The open-source nature meant we also got feedback from the community, though in 2018 I wasn't yet experienced enough to know how to filter and prioritize that input effectively.
What I Learned
(2018 Edition)
This project was my crash course in design systems. I learned that guidelines aren't limitations - they're foundations for creativity. Material gave me structure, but didn't free me from thinking about user needs.
Key Lessons:
Design systems work best when you understand WHY rules exist
Every deviation needs justification, but sometimes deviations are necessary
Working with unfamiliar audiences (developers) requires iterative design and communication
Balancing consistency with innovation is constant negotiation
Looking back from 2025, I see this as foundational project. It taught me that great design comes from thoughtful adaptation of guidelines to real human needs, not blind adherence.
The project is still live at dashboardhub.io with active open-source community. Not bad for a first Material Design attempt.