UX/UI case study · Ironhack final project · 2026

Ironhack final project: onboarding for a document intelligence API.

UX researchUI design2-week sprintTeam of 3Figma · FigJam
Hi-fi onboarding modal inviting the user to try the Kreuzberg Sandbox, over a successful extraction in Markdown and JSON
01The brief

A platform ready to launch. An experience that didn't exist yet.

Kreuzberg pulls structured data out of documents through one API. Its managed service was about to go public with no login, no onboarding and no dashboard.

Problem

No designed path from sign-up to a first API call.

Solution

A trust-building landing page, guided onboarding, a sandbox and a project dashboard.

My part

Interviews and synthesis. Onboarding modals, sandbox and the dashboard tour.

75file formats
11programming languages
5developer interviews
2weeks, start to prototype
02Research

Technically strong. Experientially invisible.

Competitive landscape
KreuzbergDoclingUnstructuredMinerUMarkItDown

Kreuzberg led on technical depth. Docling and Unstructured were winning on developer experience.

Then we asked the users

5 interviews with backend and full-stack developers, freelance and in-house.

03Insights

Same story. Five times.

Three questions guided every interview. Tap a card to see what developers told us.

01 · Trust

What makes a developer confident enough to commit to a new tool?

↻Flip
We heard

Docs are the first trust signal.

Documentation quality decides before a single line of code is written.

Tap to flip back
02 · Activation

Where do developers get stuck setting up a new API?

↻Flip
We heard

Guesswork means goodbye.

When setup feels like guessing, developers leave, and rarely come back.

Tap to flip back
03 · Adoption

What does it take to bring a tool back to the team?

↻Flip
We heard

Adoption is never solo.

Developers have to prove the value to their team before they commit.

Tap to flip back
04Meet Jarred

He doesn't want to be impressed. He wants to be convinced.

Jarred
Backend developer · growing SME
ExperiencedEfficientSkeptical, in the best way
Evaluating document tools before the next sprint.
Hover the drop-offs CONFIDENCE DiscoveryEvaluationActivation
05Direction

The problem wasn't the product. It was everything that should come after it.

01
How might we

…help developers get Kreuzberg's value in the first few seconds on the website?

02
How might we

…get Jarred to a working example in minutes, so he can check it fits?

03
How might we

…turn guided onboarding into confident, team-wide use?

Build the shortest path to the first API call.

Landing page

Earns trust in seconds with proof developers care about.

Onboarding flow

Quickstarts, copy-paste snippets and errors you can act on.

Project dashboard

API keys, webhooks, team and docs in one place from day one.

06Prototype

The first two minutes, designed.

Our mid-fi prototype, from sign-up to dashboard. Screens marked My design are the onboarding modals, sandbox and guided tour I designed. Hover to pause.

app.kreuzberg.devMy design
Landing page screen
Create your account screen
Welcome modal screen
Sandbox: drop a file screen
Sandbox: ready to test screen
Sandbox: extracting screen
Sandbox: the aha moment screen
Tour 1/5 · Usage & billing screen
Tour 2/5 · API keys screen
Tour 3/5 · Webhooks screen
Tour 4/5 · Team screen
Tour 5/5 · Documentation screen
You're all set screen
Project dashboard screen

Landing page

01 / 14
07Testing

From sketch to hi-fi.

Drag the handle to see the onboarding tour I designed, from lo-fi sketch to hi-fi.

Lo-fi wireframe of the project page Hi-fi dashboard with the guided tour highlighting API keys Lo-fi sketchHi-fi · my design
Landing page

Scroll inside the frame, flip to compare.

kreuzberg.dev
Lo-fi landing page wireframe Mid-fi landing page: Extract any document in milliseconds Hi-fi landing page
↕Scroll inside the frame
Lo-fi test
  • Dashboard earlier, guidance optional
  • Clearer, more accessible
  • Safer API keys, clearer feedback
Mid-fi test
  • Sandbox moved next to API setup
  • Google and GitHub login added
  • Feedback: "smooth and intuitive"
Next
  • Validate with hi-fi testing
  • Accessibility and responsiveness
  • Explore an AI assistant
08My part

What I did, what was hard, how I got through.

What I did

Research + design

  • Led and observed interviews
  • Synthesised the findings
  • Onboarding modals
  • The sandbox
  • Dashboard guided tour
What was hard

The friction

  • Developer jargon
  • A two-week deadline
  • Three designers, one consistent product
How I got through

The fix

  • AI tools
  • Tight feedback loops
  • A shared style guide in Figma
  • Q&A with Kreuzberg's co-founder on the tech
09Takeaways

Developers don't need hand-holding. They need the right information at the right moment.

The aha moment isn't a feature. It's confidence, earned through clarity.

Designing for trust means designing for transparency.

The result

Most Engaging Presentation.

Final Project Award from the Ironhack UX/UI teaching team, for our work with Kreuzberg. Click the certificate to see it full size.

✦Contact

Let's talk.

LinkedIn ↗
© 2026 Marius Bontas Nürnberg · --:-- Legal & privacy Back to top ↑
Let's talkLinkedIn ↗
Email copied