ALL WORK
/ CONFLUENT DEVELOPER
Make the complex
feel approachable.
Confluent Developer
Confluent Developer brings Apache Kafka learning, support, and community together. I worked as a designer on the original developer microsite and its later homepage refresh, helping make complex technical concepts easier to understand.
PHASE 01 / ORIGINAL MICROSITE LAUNCH
The original developer hub offered limited resources. Documentation lived on a separate microsite and tutorials were scattered across YouTube. We created a dedicated learning microsite, starting with a sitemap to organize courses, quick starts, patterns, documentation, and community resources.
CONTENT SCOPE
17 tracks · 204 video tutorials · 8 programming languages · 52 patterns
14 FAQ topics · 1 community · 1,000+ documentation pages
Three interactive homepage diagrams explained event streaming, patterns, and Kafka internals. Courses kept related videos in one view; getting-started guides and patterns used a shared left rail to make substantial content easier to navigate.
PHASE 02 / V2 HOMEPAGE REFRESH
About a year after the initial microsite launch, new leadership shifted the site’s goals. Developer feedback also showed that the homepage felt too long and its diagrams too detailed. The V2 refresh focused on three priorities:
01
Position Confluent Developer as the go-to site for Kafka.
02
Reorganize the site’s content and integrate the documentation.
03
Integrate with Confluent Cloud
Original microsite homepage, before the V2 refresh
Once the page structure was approved, we focused on the main animation. Kafka sat at the center, surrounded by the services it connects to.
Each service connected to Kafka by a road, with moving dots representing data flow. I built a ProtoPie prototype to demonstrate the animation’s timing.
We kept the main blue building and incorporated the terminal on the right. I added more information to each hub.
A dark version of the previous illustration.
I explored an isometric illustration with buildings surrounding the main square.
We reduced the height of the central circle and buildings. I colored the roads to match their icons.
I explored a central pyramid surrounded by taller buildings.
To increase contrast, we tried a dark version with simple shapes and a taller central building.
V2 / FINAL DIRECTION
A technical story,
made visual.
The approved direction pairs a clear Kafka-first headline with a code selector, an animated hero and interactive content sections. The illustration peeks above the fold to signal more below. Subsequent illustrations share the same visual language, creating continuity as the explanation develops.
Four decisions shaped the experience: establish Confluent as a Kafka destination; make the next step language-specific; explain the system visually; and offer deeper information through progressive disclosure.
V2 status: At the time of the case study, this refresh was still in development and testing. Results were pending, with influenced signups and time on page identified as the measures to watch.
NEXT PROJECT
Vimeo
ashlee.