With the main workflows defined, I was able to begin mocking them up in more detail. Using the Ripple design system as a basis, I began building higher fidelity mockups of what the end product would look like. Creating a component library allowed me to quickly iterate on these higher-fidelity mockups, especially later in the project when many of the main workflows and components had been defined.
I used high-fidelity mockups to create a range of prototypes. We used these to get user feedback on workflows in a series of workshops. With the Australian borders closed and social distancing in place, we were forced to use Miro and Teams to run the workshops. Even with the inevitable technical difficulties, we were able to gather extremely valuable feedback from expert users which flowed directly into further iterations of the product.
Building up a design system as I designed different workflows, I was able to use Figma as a point of truth when communicating with the developers. Having the styling and different states defined in one place and accessible for all made communication much easier and sped up the development and QA process.