<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>

Roll Out

I had already developed a UI style while working through my brand application tests, so building this version of the system map was a matter of rolling that styling out across all screen. The new brand I had developed made rolling out the UI fairly easy, as the simple clean aesthetics naturally looked good when used in UI.

Leaving Spaces

In this version, I had left spaces for assets, illustrations, and animations that I could work on later. I find this a better approach as it lets me focus more on the UI, and create the assets all in one go.

Visual Affordances

While working through the UI, I made sure to maintain consistent visual affordances throughout, such as tappable components having the same borders and corner radius’, and buttons all looking the same. This consistency is both a visual positive, as well as aiding accessibility.

Screen Patterns

I made an effort to reuse screen patterns throughout this version, maintaining the same general layout throughout. This keeps consistency and builds intuitiveness as users will find what they are looking for easier.

Repeated Elements

I like building components that can be used a lot throughout a product, such as this notification banner being a way to deliver all manner of information. It’s another consistency that helps build relationships between information and components for the user.