Company:
DashboardHUB
Year:
2018
Duration:
1 Year
The Challenge
DashboardHub faced a critical problem in 2018: how does an open-source startup compete with established DevOps tools (GitHub, GitLab, CircleCI) when developers judge credibility by UI quality?
The platform had real technical value - zero-setup GitHub integration, unified pipeline monitoring - but the interface signaled "hobby project" rather than "production-ready tool."
Developer teams needed instant visibility into deployment status, but existing dashboards were either too simplistic or overwhelming. The business challenge was clear: establish trust through design before asking teams to integrate critical infrastructure.
Remote Collaboration
Worked with distributed 4-person dev team
Alpha Product
Early-stage challenges navigated together
Material Design
Strategic framework choice validated
TypeScript/Angular
Learned modern stack in production context
Open Source
Public development transparent process
Founder Feedback
Direct collaboration with founder and marketing team
GitHub-First
Zero-setup integration user experience focus
Phase 1
On-time delivery despite constraints
Design System
Component library foundation built
Alex is a rare find — a designer who actually gets product strategy, not just pixels. I recommend him with complete confidence.
Beyond his design talent, which is consistently excellent and fast, Alex brings genuine product intuition. He understood our open-source positioning challenge immediately and treated the redesign strategically, not just visually. When we pushed for branding decisions that would hurt usability, he didn't quietly comply — he pushed back constructively and found better solutions. Working with our development team was seamless because Alex respects technical constraints. His Material Design approach saved us weeks of custom component work. He communicates clearly, delivers on schedule, and makes the process smoother than expected. We absolutely intend to work with him again and know that anyone who brings Alex onto their team will feel as fortunate as we do.
Eddie Jaoude
Founder of @DashboardHub
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, the redesigned platform helped DashboardHub secure presence at major tech events (Startup Grind, WebSummit, Fosdem 2019), where visual credibility directly impacted investor and contributor interest.
Development Efficiency - Material Design component reuse reduced front-end development time by ~40%, allowing the 4-person team to focus on core features rather than custom UI implementation.
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.