Summary & Context

Hex is the official package manager and documentation engine for the Erlang and Elixir open-source ecosystems. Comprising Hex.pm (the package registry) and Hexdocs (the documentation host) , the platform serves as critical developer infrastructure processing over 1.2 Billion+ package downloads.

Despite its massive scale and utility, the original web interface looked like an early 2000s legacy website—functional, but visually dated, hard to navigate on mobile, and lacking cohesive design tokens.

Introduced by José Valim, I joined as the Solo Product Designer to overhaul both platforms. Working directly with Eric Meadows-Jönsson on Hex.pm and José Valim on Hexdocs, I led the complete visual and functional redesign —establishing a unified design system and refreshing the iconic Hex brand identity used across the entire ecosystem.

Core UX & Architectural Challenges

Redesigning developer infrastructure with over a decade of established user habits meant maintaining high speed and functional clarity while modernizing complex information architectures.

CHALLENGE A: Deeply Nested Documentation Hierarchy (Hexdocs)

The Problem:
Technical documentation pages often contain up to 4 levels of nested subsections, making it easy for developers to lose context while scanning modules, functions, and types.

The UX Solution:
Architected a high-clarity sidebar navigation and dynamic right-hand Table of Contents (TOC). Using subtle typography scales, indentation tokens, active-state indicators, and expandable sub-menus, I created clear visual differentiation between top-level modules, functions, callbacks, and inline code anchors.

Challenge B: Modernizing Heavy Package Registries (Hex.pm)

The Problem:
The legacy Hex.pm layout crammed package stats, dependency trees, version histories, and code installation snippets into a flat, dated interface.

The UX Solution:
Re-architected the package detail view into clean, prioritized visual zones: prominent copy-paste dependency snippets at the top, clear version history timelines, expandable dependency charts, and clean stat displays.

Challenge C: Modernizing an Iconic Brand Identity

The Problem:
The old logo featured harsh polygon edges and oversaturated colors that created visual fatigue in dark/light editor themes and browser headers.

The UX Solution:
Softened the geometric hexagon mark with rounded corners and approachable geometry while refining the color palette into modern, accessible tones that scaled down cleanly to tab favicons and high-DPI displays.

Product Ownership & Collaborative Cadence

Operating as the sole designer required tight syncs with open-source maintainers:

Hex.pm Ownership (with Eric Meadows-Jönsson)
Collaborated directly with Eric to audit package workflows, iterate on search usability, and modernize registry layouts.

Hexdocs Ownership (with José Valim)
Partnered with José to refine global site navigation, search shortcut behaviors, code syntax presentation, and subsection layouts.

Iterative Feedback Loops
Conducted continuous design reviews in Figma, balancing open-source maintainer needs with intuitive, modern UI patterns.

Impact & Community Reception

Ecosystem-Wide Scale
Modernized the core interface for an infrastructure handling 1.2B+ downloads and millions of monthly documentation views.

Brand Adoption
The refreshed logo mark and visual identity were officially adopted across both Hex.pm and Hexdocs as the unified brand anchor.

Positive Community Feedback
Following the live rollout, the developer community praised the sleek, modern aesthetic and improved readability across Reddit and Elixir forums, highlighting the massive leap forward from the legacy interface.