Stripe Docs
UI/UX design for the payments page of stripe’s documentation.
I worked with Stripe’s design team in translating complicated technical diagrams into various user-friendly graphic representations of some of their API’s most crucial processes.
From wireframes…
To code — see the docs live!
The initial requirement
When Stripe approached me, the documentation for the API features we worked on were currently vague and confusing for developers. They kept getting questions on forums, issues on github and other messages on different channels of communications, ragardin issues that should have been easily addressed in the docs but weren’t.
It was clear that they needed a change. With some research and by conducting user interviews with 4 developers, it became apparent to me that devs were just not reading the docs because of the amount of text in them. They were just skimming the text, and if they couldn’t find an immediate answer they would open a support ticket.
After bringing this up with the team at Stripe, we tried to condense the process into diagrams, resulting on the charts on the left — too technical and overly complicated.
With a bit of UI magic, we arrived at some great looking mocks that I later turned into code that got published in Stripe’s documentation. I recreated the process for 3 different sections of the docs, but the overall chart style that I designed has been replicated multiple times by the internal team.