The brief
The brief
The brief
Someone on Stripe's engineering team needed an explainer animation for a technical blog post - visualising how their database infrastructure automatically recovers when things go wrong. The subject matter was dense, involving graph search algorithms, state machines and distributed database sharding. The ask was to create a visual that would help the concept land, without dumbing it down.
Someone on Stripe's engineering team needed an explainer animation for a technical blog post - visualising how their database infrastructure automatically recovers when things go wrong. The subject matter was dense, involving graph search algorithms, state machines and distributed database sharding. The ask was to create a visual that would help the concept land, without dumbing it down.
Someone on Stripe's engineering team needed an explainer animation for a technical blog post - visualising how their database infrastructure automatically recovers when things go wrong. The subject matter was dense, involving graph search algorithms, state machines and distributed database sharding. The ask was to create a visual that would help the concept land, without dumbing it down.
Create an animated visual to accompany the blog post that makes the system feel intuitive, without losing the complexity that makes it interesting.
Create an animated visual to accompany the blog post that makes the system feel intuitive, without losing the complexity that makes it interesting.
Create an animated visual to accompany the blog post that makes the system feel intuitive, without losing the complexity that makes it interesting.
THE ASK
THE ASK
THE ASK
The challenge
The challenge
The challenge
You can't design something you don't understand. Before anything was animated, my first job was getting familiar with the technical concepts well enough to know what actually needed to be shown and the best way to show it.
The second challenge was execution. The animation had a lot of moving parts (quite literally) - there were multiple recovery paths, each made up of the same four operations but in a different order (and that order mattered). Each operation held a different weight and therefore took a different amount of time, some sequences hit dead ends that violated the system's rules, and ultimately one path emerged as the fastest valid route. Getting this to feel clear rather than chaotic required careful thinking about layout, sequencing, and motion.
You can't design something you don't understand. Before anything was animated, my first job was getting familiar with the technical concepts well enough to know what actually needed to be shown and the best way to show it.
The second challenge was execution. The animation had a lot of moving parts (quite literally) - there were multiple recovery paths, each made up of the same four operations but in a different order (and that order mattered). Each operation held a different weight and therefore took a different amount of time, some sequences hit dead ends that violated the system's rules, and ultimately one path emerged as the fastest valid route. Getting this to feel clear rather than chaotic required careful thinking about layout, sequencing, and motion.
You can't design something you don't understand. Before anything was animated, my first job was getting familiar with the technical concepts well enough to know what actually needed to be shown and the best way to show it.
The second challenge was execution. The animation had a lot of moving parts (quite literally) - there were multiple recovery paths, each made up of the same four operations but in a different order (and that order mattered). Each operation held a different weight and therefore took a different amount of time, some sequences hit dead ends that violated the system's rules, and ultimately one path emerged as the fastest valid route. Getting this to feel clear rather than chaotic required careful thinking about layout, sequencing, and motion.
The process
The process
The process
The concept went through several iterations before landing. Early explorations felt too illustrative and overly simplified. Others were trying to capture too much information and lost sight of what actually needed to be understood. Finding the right level of abstraction was the real design challenge.
The final animation was built in Rive, working closely with an engineer on the Stripe team to collaboratively map out the logic and sequence. The animation moved through four distinct scenes: the initial degraded shard state, the system exploring possible recovery paths via breadth-first search, then evaluating all valid routes, and finally committing to the optimal (fastest/lowest-cost) route.
The concept went through several iterations before landing. Early explorations felt too illustrative and overly simplified. Others were trying to capture too much information and lost sight of what actually needed to be understood. Finding the right level of abstraction was the real design challenge.
The final animation was built in Rive, working closely with an engineer on the Stripe team to collaboratively map out the logic and sequence. The animation moved through four distinct scenes: the initial degraded shard state, the system exploring possible recovery paths via breadth-first search, then evaluating all valid routes, and finally committing to the optimal (fastest/lowest-cost) route.
The concept went through several iterations before landing. Early explorations felt too illustrative and overly simplified. Others were trying to capture too much information and lost sight of what actually needed to be understood. Finding the right level of abstraction was the real design challenge.
The final animation was built in Rive, working closely with an engineer on the Stripe team to collaboratively map out the logic and sequence. The animation moved through four distinct scenes: the initial degraded shard state, the system exploring possible recovery paths via breadth-first search, then evaluating all valid routes, and finally committing to the optimal (fastest/lowest-cost) route.
The outcome
The outcome
The outcome
A technical explainer animation published on Stripe's engineering blog, making a genuinely complex data infrastructure concept legible to a broader developer audience.
A technical explainer animation published on Stripe's engineering blog, making a genuinely complex data infrastructure concept legible to a broader developer audience.
A technical explainer animation published on Stripe's engineering blog, making a genuinely complex data infrastructure concept legible to a broader developer audience.
Tiana helped with illustration and animation to bring a deeply technical post to life on the Stripe engineering blog post. The post itself was about a complicated system and Tiana’s ability to understand the domain and combine it with her ability to illustrate and explain were critical in making the post an engaging read. Tiana was prompt and responsive as we iterated towards a final polished animation of the concepts and I’m definitely looking forward to the opportunity to work with Tiana on any future projects.
I worked with Tiana on a key app project over the course of a month. She was efficient, detail-oriented, and consistently went above and beyond to ensure even the smallest nuances were addressed.
From ideation through to execution, she delivered high-quality work within timelines despite operating in a remote, contractual setup. The feature she helped build was well received by our users, and her contribution added clear value to the outcome.
I worked with Tiana on a key app project over the course of a month. She was efficient, detail-oriented, and consistently went above and beyond to ensure even the smallest nuances were addressed.
From ideation through to execution, she delivered high-quality work within timelines despite operating in a remote, contractual setup. The feature she helped build was well received by our users, and her contribution added clear value to the outcome.
Ainsley Escorce-Jones
Principal Software Engineer - Stripe
Ainsley Escorce-Jones
Principal Software Engineer - Stripe
Ainsley Escorce-Jones
Principal Software Engineer - Stripe
![](data:image/svg+xml,<svg display="block" id="2642483122" role="presentation" viewBox="0 0 64 76" xmlns="http://www.w3.org/2000/svg"><path d="M 0.177 43.857 C 0.179 43.891 0.187 43.921 0.19 43.954 C 0.156 44.707 0.238 45.449 0.574 46.131 C 0.857 46.522 1.221 46.809 1.624 47.043 C 2.099 48.684 5.078 49.404 6.949 49.532 C 7.283 49.586 7.653 49.587 8.02 49.568 C 10.071 49.643 12.132 49.527 14.171 49.376 C 14.986 49.353 15.8 49.333 16.614 49.31 C 16.775 49.297 16.939 49.291 17.103 49.285 C 17.722 49.627 18.328 49.588 18.836 49.229 C 19.836 49.172 20.808 49 21.601 48.345 C 23.305 46.86 23.282 44.369 23.47 42.308 C 23.724 38.636 23.798 34.909 23.564 31.209 C 23.444 29.402 23.31 27.608 23.089 25.815 C 22.979 24.959 22.827 24.071 22.112 23.482 C 19.771 21.938 16.671 22.463 14.035 22.771 C 13.072 21.951 13.67 20.321 13.768 19.23 C 14.725 14.625 17.683 10.767 20.798 7.315 C 22.047 5.893 23.503 4.689 24.821 3.344 C 25.82 2.406 25.539 0.604 24.014 0.473 C 18.365 0.836 14.321 5.98 10.758 9.819 C 5.722 15.313 2.746 22.418 1.295 29.615 C 0.419 34.293 -0.359 39.093 0.175 43.857 Z M 11.222 21.971 C 11.298 22.632 11.481 23.22 11.782 23.712 C 11.216 23.981 10.768 24.652 10.679 25.399 C 10.804 24.252 10.997 23.109 11.222 21.971 Z M 12.787 41.048 C 12.695 40.967 12.603 40.887 12.512 40.804 C 10.794 36.948 10.097 32.626 10.42 28.419 C 10.434 32.729 11.291 37.006 12.787 41.05 Z M 19.704 31.548 C 19.911 34.438 20.109 37.33 20.109 40.23 C 19.786 37.318 18.832 34.438 19.704 31.548 Z M 6.004 43.304 C 6.027 43.313 6.05 43.322 6.075 43.331 C 6.251 43.503 6.435 43.669 6.616 43.836 C 6.231 43.86 5.848 43.9 5.468 43.956 C 5.468 43.672 5.469 43.389 5.472 43.105 C 5.647 43.176 5.825 43.242 6.004 43.303 Z M 6.317 30.076 C 6.335 30.332 6.337 30.588 6.361 30.845 C 6.309 30.59 6.263 30.331 6.226 30.069 C 6.256 30.071 6.287 30.076 6.318 30.076 Z M 3.105 43.222 C 2.961 43.162 2.817 43.105 2.673 43.042 C 2.771 42.335 2.947 41.632 3.193 40.937 C 3.14 41.706 3.114 42.478 3.105 43.22 Z M 5.11 34.881 C 5.17 35.005 5.247 35.122 5.311 35.246 C 5.039 35.332 4.798 35.495 4.587 35.727 C 4.294 34.658 4.238 33.553 4.328 32.435 C 4.514 33.271 4.755 34.093 5.11 34.881 Z M 20.202 45.914 C 20.297 45.938 20.394 45.955 20.491 45.966 C 20.467 46.021 20.441 46.076 20.413 46.129 C 20.351 46.052 20.276 45.984 20.202 45.914 Z M 6.467 21.975 C 6.364 21.879 6.252 21.791 6.133 21.714 C 6.285 21.35 6.449 20.991 6.612 20.631 C 6.556 21.079 6.504 21.526 6.468 21.976 Z M 18.826 24.819 C 18.412 25.724 18.347 26.856 18.059 27.767 C 17.776 26.824 17.792 25.546 17.111 24.782 C 17.669 24.771 18.249 24.769 18.826 24.819 Z M 14.614 25.104 C 14.738 25.104 14.887 25.081 15.02 25.074 C 15.012 25.093 15.002 25.111 14.995 25.132 C 14.465 29.624 17.303 33.981 16.189 38.422 C 14.385 34.175 14.951 29.329 13.684 25.011 C 13.99 25.074 14.301 25.105 14.614 25.104 Z M 18.47 6.399 C 18.657 6.179 18.824 5.946 19.017 5.732 C 19.427 5.099 20.37 4.536 20.838 3.859 C 20.902 3.817 20.964 3.772 21.03 3.729 C 20.149 4.592 19.295 5.482 18.47 6.398 Z M 11.086 13.015 C 10.904 13.335 10.73 13.661 10.551 13.985 C 10.574 13.915 10.591 13.843 10.615 13.773 C 10.627 13.734 10.617 13.694 10.625 13.654 C 10.778 13.44 10.93 13.226 11.088 13.015 Z M 36.772 48.034 C 36.492 49.403 38.173 49.648 39.193 49.768 C 42.469 50.25 45.758 50.642 49.05 50.999 C 51.722 51.258 55.907 52.149 56.845 48.775 C 57.572 42.904 55.545 36.947 54.749 31.137 C 53.536 24.51 53.334 21.358 45.457 21.135 C 41.757 14.046 48.842 7.742 53.47 3.067 C 54.733 1.904 54.277 0.046 52.437 0.046 L 52.405 0.046 C 51.942 0.123 51.49 0.218 51.049 0.324 C 50.922 0.206 50.752 0.096 50.523 0.003 C 50.475 0.001 50.427 0 50.381 0 C 48.743 0 47.367 1.348 46.113 2.338 C 36.34 8.227 34.104 22.947 33.837 33.608 C 34.078 38.119 31.722 45.53 36.771 48.035 Z M 35.866 40.987 C 35.885 41.181 35.896 41.376 35.919 41.57 C 36.068 42.187 36.247 43.597 36.555 44.995 C 36.072 44.356 35.797 43.491 35.83 42.292 C 35.843 41.865 35.855 41.43 35.866 40.987 Z M 40.297 46.582 C 40.004 46.485 39.694 46.424 39.39 46.411 C 38.844 44.976 38.477 43.504 38.251 42.009 C 38.72 43.628 39.372 45.169 40.296 46.582 Z M 42.798 46.394 C 43.253 45.658 42.588 44.875 42.391 44.152 C 41.046 40.466 40.464 36.57 40.068 32.691 C 40.428 34.378 40.853 36.051 41.342 37.706 C 41.533 38.691 41.743 39.674 41.993 40.653 C 42.439 42.2 43.106 45.078 44.166 47.283 C 44.04 47.207 43.9 47.151 43.744 47.135 C 43.64 47.119 43.531 47.107 43.424 47.093 C 43.185 46.889 42.974 46.654 42.798 46.395 Z M 41.278 20.854 C 41.135 20.965 41.021 21.108 40.945 21.27 C 40.941 21.073 40.926 20.879 40.924 20.682 C 40.924 20.643 40.906 20.618 40.901 20.581 C 40.957 20.33 41.024 20.082 41.085 19.833 C 41.189 20.242 41.266 20.598 41.278 20.854 Z M 53.642 48.964 C 53.471 48.986 53.3 49.011 53.127 49.024 C 53.242 48.981 53.361 48.951 53.474 48.898 C 53.534 48.928 53.586 48.94 53.642 48.963 Z M 46.62 25.004 C 47.015 25.478 47.439 25.939 47.776 26.454 C 47.681 26.46 47.588 26.476 47.496 26.502 C 47.15 26.592 46.927 26.794 46.787 27.048 C 46.655 26.304 46.498 25.555 46.467 24.798 C 46.511 24.871 46.562 24.94 46.62 25.004 Z M 49.743 47.035 C 49.158 46.985 48.646 46.828 48.195 46.589 C 48.071 44.796 47.883 43.011 47.645 41.236 C 48.207 43.218 48.873 45.166 49.743 47.035 Z M 45.621 43.406 C 45.277 42.64 44.993 41.847 44.72 41.123 C 44.282 39.8 43.88 38.47 43.502 37.133 C 42.823 33.702 42.497 30.204 42.666 26.747 C 43.942 32.241 44.939 37.806 45.62 43.406 Z M 36.864 28.768 C 36.586 28.935 36.37 29.203 36.326 29.54 C 36.308 29.683 36.291 29.826 36.272 29.968 C 36.396 28.204 36.568 26.429 36.81 24.669 C 36.781 25.468 36.764 26.265 36.772 27.053 C 36.81 27.615 36.838 28.189 36.864 28.768 Z M 46.271 23.39 C 46.303 23.392 46.329 23.396 46.361 23.399 C 46.245 23.613 46.19 23.887 46.227 24.243 C 46.022 23.989 45.706 23.825 45.355 23.825 C 44.855 23.852 44.567 24.099 44.407 24.471 C 44.286 23.925 44.166 23.379 44.046 22.833 C 44.664 23.354 45.492 23.358 46.271 23.39 Z M 48.197 5.217 C 48.681 4.631 49.18 4.055 49.708 3.501 C 49.884 3.289 50.124 3.031 50.365 2.75 C 50.525 2.685 50.678 2.612 50.842 2.55 C 49.978 3.365 49.078 4.26 48.197 5.217 Z M 48.197 5.217" fill="rgb(247, 190, 136)" height="51.30000229934014px" id="EaMQcrJxs" transform="translate(3 13.35)" width="57.000000596812214px"/></svg>)
