<aside> 👋

This, and all of the blogs, give an overview of the process and steps taken for each part. I’ve included images taken from the Figma File where the majority of the work lives to illustrate the process.

If you would still like to see further details on each part, please view the Figma File in full.

It can be found at the end of this page, or on this master page.

</aside>

With my design system and system map complete, I was now ready to create my final prototype. I had already created some prototypes for testing, but this needs to be a more complete prototype with better motion and polish.

Choosing Journeys

I first went through and chose my journeys to show. I really like being able to create a full prototype that is end to end seemless, but to get there, I think it’s better to prototype select journeys first. After identifying the journeys, I worked on linking them together, then interconnected them to create a whole system prototype.

Utility Screens

To build certain effects of screen-to-screen transition, I needed to utilise some utility screens. These are extra screens in between to that allow me add zoom in and out animations between screens. These work with the Smart Animate feature in Figma, allowing me to make super smooth animations between screens.

Motion

I also spent time making sure my screen transitions were consistent. For this I experimented with different effects in Figma, eventually settling on the “gentle” effect over 600ms. This gave a light spring to the transition between screens, which felt super nice but not over the top.

Figma Prototype

<aside> 👋

Hi, there’s an animation that plays on the splash screen that sometimes doesn’t load in time the first time you open it. I’d recommend opening the link, waiting 10-20 seconds, then pressing “R” on your keyboard to reset the prototype.

I had done my best to optimise the animation file, but regardless of the size Figma is quite slow to load it.

</aside>

https://www.figma.com/proto/y0PROqO78LpF5wLlkzWBL7/Metronet-–-Design-Library?node-id=569-54213&t=V40nWLz7bIs8tilS-9&scaling=scale-down&content-scaling=fixed&page-id=569%3A53222&starting-point-node-id=569%3A54213&show-proto-sidebar=1