Building a user journey map using Figma, Konva & react-konva

As part of an upcoming product that I’m working on (reciprocal.dev if you want to sign up early) I’ve been looking at how to render a user journey map on a webpage.

I’ve created maps before in tools like Miro and Figma but never had to put much thought into the code that sits behind these tools — turns out thanks to Konva (and react-konva) this is actually pretty simple to do.

While this might not be the final solution I use, this approach is a nice introduction into how to use SVG to create the objects in a design program and render them to a canvas in the browser.

Creating the user journey map

For my example user journey I’ll pick using JiffyCV (another app I’ve built) to create and print a CV.

Adding screens

In order to create the map I dragged the screens from the app into Figma and created a vector outline of an iPhone 11 around them by grabbing a .png from the Apple developer website and tracing the outer and inner outlines.

Initial screen flow layout

I had some issues with Figma extracting the inner outline from the outer in order to create one path so I used Adobe Illustrator to do this before pasting that into Figma.

Adding an iPhone 11 device outline to the screen to make it feel like an actual screen

I then applied some styling to the device outline so it looked a little less flat and applied this same outline to the other screens.

Applying some styling to the device outline to make less bland

Linking everything up

The next step was to add connections between the parts of the screen’s UI and where that would take the user, as the example user journey is pretty simple this wasn’t too hard but as things scale up this could get a bit messy.

To create these links I decided on two different connection types; a positive connection that moves the user towards the end goal and a negative connection that takes the user back away from the end goal.