Decoding Development Data: UX Design for Seerene

About

Seerene is a Berlin-based startup, spun out of research at the Hasso Plattner Institute, that delivers developer analytics for enterprise software teams. Its platform consolidates data from multiple development systems and applies advanced pattern recognition to highlight code quality, team performance, and bottlenecks, giving engineering leaders the visibility they need to drive smarter decisions.

How it works

Seerene connects to a company’s development ecosystem, from code repositories to issue trackers, and aggregates the data into a unified analytics layer. Its algorithms analyze code structure, quality, and team activity, surfacing patterns and risks that would otherwise remain hidden. Insights are then visualized through interactive dashboards and 3D “software city maps,” giving engineering leaders a clear view of where bottlenecks exist, which teams need support, and how to optimize their development lifecycle.

Project Breakdown

Context

  • Company: Seerene, Berlin-based startup, spin-off of the Hasso Plattner Institute, Potsdam University

  • Challenge: brilliant backend for developer analytics, interesting in-browser 3D data visualization, but an interface too complex for its intended users

  • Role: UX/UI Product Designer, in-house, working in Agile

  • Team: Product managers, 2 dev teams (Berlin + Poland), business and sales leads

  • Timeline: 5 months

My role and approach

  • Conducted user interviews with engineering managers and technical leads to map workflows

  • Audited taxonomy and interface language, translating academic/ML concepts into business language

  • Balanced quick wins (incremental usability improvements) with a long-term platform redesign

  • Facilitated weekly workshops with engineering and sales to align design decisions with client feedback

  • Defined a design system and front-end migration path: custom UI → React + Material Design

Key UX Solutions

  • Onboarding Journeys: restructured navigation and flows to match how managers make optimisation decisions

  • Taxonomy & Language: reframed academic terms into accessible business/engineering language

  • Quick Wins: redesigned filtering, naming, and core interactions through bi-weekly iterations

  • Data Visualization: introduced a high-contrast color system for 3D “software city maps” to make quality issues instantly clear

  • Design System: delivered a scalable UI style guide and component library to support React migration

  • Continuous Feedback: built in validation loops with clients, driving adoption and trust

Impact

  • Transformed platform from intimidating prototype into an approachable enterprise product

  • Enabled engineering managers to quickly identify bottlenecks, quality issues, and opportunities

  • Improved performance and reduced cognitive load through design + engineering collaboration

  • Redesign won strong reception from both enterprise clients and investors, accelerating adoption

Two digital 3D city maps showing data visualizations, one with buildings labeled with tags, the other with bar graphs and data panels overhead, on a futuristic city background.

From Complex to Clear: Redesigning Seerene's Developer Analytics Platform

Seerene is a Berlin-based startup that's tackling one of software development's most persistent challenges: the visibility gap between what's happening in your codebase and what teams actually need to improve. Using advanced data analytics and intelligent pattern recognition, Seerene helps engineering teams identify specific bottlenecks, quality issues, and optimisation opportunities across their entire development lifecycle.

Their technology stack leverages data from multiple development systems, identifies patterns in code quality and team performance, and surfaces actionable insights that inform strategic decisions, all while maintaining the technical depth that experienced engineers demand. When I joined the project, the founders had built powerful analytical capabilities. Still, they faced a common deep tech dilemma: brilliant backend technology with an interface that reflected system complexity rather than user workflow.

My challenge: redesign and optimize their development analytics platform over 5 months. This redesign needed to transform complex data relationships into intuitive user journeys, restructure navigation to match how teams actually approach optimization decisions, and create an experience that would make engineering leaders want to dig deeper rather than click away.

Discovery Sprint: Understanding the Engineer's Dilemma

Seerene’s journey began as a PhD project at the Hasso Plattner Institute before evolving into a venture-funded startup. At its core was a sophisticated algorithm that crawled codebases, analyzed their grammar and architecture, and produced quality assessments as color-coded “software city maps.” The technology was groundbreaking, offering insights that would take engineering teams months to uncover manually. Yet the paradox was clear: a tool designed to simplify complexity had itself become too complex. The taxonomy reflected academic concepts rather than management workflows, navigation assumed deep technical knowledge, and the interface intimidated its intended users. As sole UX designer, my role was to preserve Seerene’s analytical sophistication while translating these insights into intuitive user journeys. This meant improving the existing UI, restructuring the most critical flows, and working directly with business, sales, and technical directors across two development teams as part of the Agile process.

Here's what the platform looked like on Day 1.

Screenshot of data visualization dashboard showing analysis of complex code files, with 3D bar chart labeled for different code files and color-coded indicators for complexity levels, alongside a list of code metrics and a time series graph.
Screenshot of a software dashboard displaying a 3D map with labeled nodes such as Hadoop, Groovy, Jackrabbit, HBase, and HTTPServer. The interface shows dropdown menus for company selection, analysis aspects, and options for objectives tracking, with indicators for objectives status as on track or behind schedule.
Screenshot of a software dashboard titled 'Basic - Critically Complex Code' showing a 3D visualization of code complexity with labeled code files, a legend for complexity levels with color codes, and a left panel showing total lines of complex code, chart, and statistics.

Solving the Complexity Puzzle: A Systematic Design Approach

We kicked off a comprehensive product design process to untangle this complexity challenge:

  • Research & Discovery: Conducted user interviews with engineering managers and technical leaders to understand how they currently evaluate software quality and make optimization decisions.

  • Case Study Development: Documented specific user scenarios where the platform's insights could drive meaningful improvements, creating concrete examples of value delivery.

  • Opportunity Mapping: Identified key areas where product development could bridge the gap between analytical power and user accessibility.

  • Taxonomy & Language Audit: Reviewed existing terminology and information architecture, translating machine learning concepts into engineering management buusiness language.

  • Agile Integration: Collaborated with product managers to negotiate design priorities, plan iterative improvements, and execute changes through structured sprints.

  • Performance Optimization: Worked directly with engineering teams to improve platform responsiveness and reduce cognitive load through incremental technical enhancements.

  • Feedback Loops: Established continuous user feedback cycles to validate design decisions and guide iterative improvements.

  • Visual Design System: Developed a comprehensive UI refresh with new style guidelines that made complex data feel more approachable and actionable.

This systematic approach ensured we addressed both surface-level usability issues and deeper structural problems that were limiting platform adoption.

Diagram illustrating layers of a data visualization software, from bottom to top: customer needs, data requirements, information architecture, navigation design, and visual design.
A detailed project Gantt chart titled 'Seerene Design Plan' with activities, task start dates, durations, and completion statuses, featuring color-coded progress indicators and a timeline from July to August 2016.

Strategic Redesign: from custom UI to React and Material Design

Based on our brainstorming sessions, we planned a platform redesign and a complete front-end framework update. We needed to transition from a custom UI front-end to a Material Design Component Library built on a React responsive framework.
I set the redesign goals and worked with PMs and Engineering teams to split the work into manageable packages, balancing immediate usability improvements with longer-term architectural changes.

This systematic approach allowed us to maintain platform functionality while implementing substantial structural improvements across iterative development cycles.

A digital analytics dashboard showing various data visualizations and metrics, including line graphs, bar charts, ranking lists, and user activity. The interface features menu items on the left with expandable sections, a top navigation bar in blue with categories like Insights and Advanced Analytics, and user information at the top right. The dashboard includes data points, dates, and performance indicators.

Dual-Track Implementation: Quick Wins and Strategic Planning

We agreed to work on two parallel tracks. After conducting a comprehensive usability review, we launched bi-weekly incremental improvements targeting immediate pain points: data visualization clarity, naming conventions, filtering mechanisms, and core user interactions.

I run weekly whiteboard sessions with engineering and sales teams to accelerate deployment and gather rapid client feedback on each iteration. Here are some of the design assets I attached to Jira tickets for our remote development team at STX in Poland.

The deployment of these quick wins was extremely well received by clients, who began providing regular, detailed feedback that informed our broader redesign strategy. This approach built momentum and user confidence while we developed the more comprehensive platform changes.

Diagram showing Seerene design stack with layers from business goals and customer needs at the bottom up to visual design at the top, illustrating task-oriented and information-oriented perspectives.
Line chart displaying weekly effort with a highlighted note about additional spend due to combatting fighting, showing peaks in effort over time, and annotations about development spend and complexity penalty.
Screenshot of a web page with a top navigation bar showing insights, application landscape, advanced analytics, a username, and a series of four blue interface elements labeled 'seerene' with icons and user profile options.
Whiteboard with handwritten notes, flowcharts, and diagrams related to project progress and management processes.
Whiteboard with a grid drawn on it containing labels for App A, App B, and App C on the left, and programming languages C++, Java, JS, and Python across the top. Colored dots are marked in various grid cells, and there are some notes and arrows written on the board, with a whiteboard marker at the bottom.
Whiteboard with handwritten sketches and notes including a line graph, a bar chart with labeled axes, a mockup of mobile app screens, and text such as 'COMPLEXITY' and 'APP 1'.
Screenshot of a web application interface showing monitoring of different applications. The page includes tabs for application landscapes and advanced analytics, with two applications highlighted with expanded tabs labeled AVA-Rechner-App and AVA-Rechner-Batch, both displaying 42% progress and pending updates. The left sidebar lists applications such as AVA-Rechner-System, CALM-GUI, CALM-Loader, and others. The right side contains green instructions for layout and display specifications, including tab sizes, order, and accessibility features.
Presentation slide titled 'Objectives and Goals: the why' with bullet points discussing enhancements and redesigns, including objectives like enabling sales, fixing usability issues, improving information design, and consolidating dashboards.

Data Visualisation: 3D Software Maps

A major breakthrough came with our updated, high-contrast color scheme for the 3D software maps. Delivered as part of a comprehensive UI style guide, this change instantly made the product more visually appealing while significantly improving data visualization clarity for clients.

The new color system didn't just enhance aesthetics, it made complex code quality patterns immediately more readable, allowing users to identify critical areas and optimization opportunities at a glance.

Diagram of a cityscape with 3D bar charts and color palettes showing different color schemes and their hex codes
3D city model with multicolored buildings of varying heights on a printed city grid.
A 3D city map showing buildings in various colors with a pop-up window displaying code and recent changes in Java.
A 3D city map with tall buildings, some of which are highlighted in yellow, orange, and red, indicating different data points or categories

Making the complex, simple

We wanted to move toward simplicity and ease of use—no small feat for a product built on sophisticated machine learning algorithms. With complex enterprise tools, there's rarely a quick fix for usability challenges.

We worked collaboratively across teams to define what kind of product Seerene needed to become to succeed in the competitive SaaS landscape. This strategic alignment process helped us identify which complexities were essential to preserve and which were simply artifacts of the platform's academic origins.

The goal was clear: maintain analytical depth while creating an experience that felt intuitive rather than intimidating.

Application ranking dashboard displaying data comparing Hadoop application performance over the last 12 months, including metrics such as effort, complexity, documentation, lines of code, and component details.

Results: Turning Academic Research into User-Friendly Product

Our product updates hit the mark with both clients and investors. The platform became genuinely easier to navigate, and people finally understood what Seerene could do for enterprise development teams.

The redesigned interface meant engineering managers could actually find what they were looking for instead of getting lost in data complexity. Combined with major performance improvements, the platform transformed from feeling sluggish and intimidating to fast and intuitive.

What started as brilliant but buried academic research had become a tool that teams wanted to use daily, exactly the kind of transformation that gets both users and funders excited.

A 3D visualization of outliers for effort in complex code over the last 12 months, showing vertical bars of varying heights in sections labeled with different code units such as 'HBase' and 'Hadoop', with a sidebar displaying charts, filters, and revision history.

Let's connect. I'm open for opportunities, freelance projects, or just to talk shop.

[email protected]