DevOPs API – Penelope Maxwell

ROLE

Product Design

CLIENT

BNP PARIBAS iTG

PROJECT

8 weeks

YEAR

2019

Designing DevOps

End-to-end design for an API-powered dashboard

A Cloud-based DevOps API to help streamline the-time-to-market for product teams, relying on a complex ecosystem of tools — GitLab for source control, SonarQube for code quality, JFrog Artifactory and Xray for artifact management and security, and Mattermost for team communication.

Each tool is powerful on its own, but the developer experience often becomes fragmented, forcing engineers to switch contexts, duplicate efforts, or miss critical updates.

01

Identifying and framing the problem

A fragmented developer experience across multiple tools

Developers must constantly switch between GitLab, SonarQube, JFrog Artifactory, JFrog Xray, and Mattermost to track activity, check build health, or respond to team updates. This fragmentation not only slows productivity but also makes it difficult to gain a holistic view of project status.

There is a lack of visibility into individual contributions and code quality trends across the pipeline. Developers themselves have little feedback beyond issue trackers and code reviews, leaving limited opportunities for positive reinforcement or recognition of best practices. Without a unified system, collaboration risks becoming reactive rather than proactive, and the motivation to sustain quality practices can fade.

The challenge was clear: design a cohesive experience that reduces cognitive load, connects insights across platforms, and motivates healthy team engagement through transparent activity tracking and lightweight recognition systems.

“I spend more time jumping between tools than actually fixing issues.”

MIKE (POWER DEVELOPER)

02

Mapping the DevOps lifecycle

“What does this service need to do?” or “What does this service need to provide?”,

03

User Insights

I needed to understand the essentials for complete daily tasks for each user and the “why” behind each metric. I conducted interviews and sat on the side, watching them complete their tasks.

I synthesized my findings, required by the three identified user groups.

DevOps engineers

Mapped the daily workflows across GitLab, SonarQube, JFrog, and Mattermost to identify high-friction moments (e.g., chasing build failures across tools, lost context in chat vs. code).
Quick system health check first
Team context for current work
Deep technical details in tool sections

Project managers

Pipeline status for delivery
Team capacity and workload visibility
Detailed tracking through specific tools

Executives / Managers

Get immediate pipeline health status
Understand team productivity and allocation
Can stop here for high-level overview

04

Design Approach

The main UX challenge was not visualizing DevOps data, but adapting the same operational reality to the three different decision-making models: execution-driven developers and risk-driven managers.

It was essential to unify multiple DevOps tools into a coherent experience, which balanced technical feasibility with user needs.

Sketched multiple dashboard concepts focusing on aggregation, drill-downs, and lightweight gamification.
Prototyped role-based views: one for contributors (personal progress) and one for leads (team health overview).
Explored badge mechanics — tied to meaningful milestones like “first security fix” or “consistent clean builds” — avoiding vanity metrics.

Labels were tightened to represent decisions rather than tools, enabling faster scanning and shared understanding across engineering and management roles.