<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>
I wanted a custom coloured map for my project. While I understand this would typically be done using an Apple or Google Map API, I still needed something to use for my prototype. I found a Figma plugin that would let me import vectorised maps, which I used and then recoloured with my brand palette. This let me create a base map that fit in with my brands aesthetics.
I understood that the soft colours used in the map may not be 100% accessible. While this is somewhat ok as the map would be more of an additional guide than the the core navigational aid, I still created a high contrast version to use too.
I then started to plot stops and routes on the map. For the sake of time (and my sanity) I’ve plotted enough to use for prototype examples rather than the full map. I was conscious to not overload the map with labels. I think general areas are fine, but this isn’t as detailed as say an Apple or Google map, as it’s mainly about getting users to their nearest stop.
With the network plotted, I then started developing snippets of the map to show what it would look like when a user it travelling and getting navigation from it.
I found the process of mapping really interesting and challenging. When start doing something like this you realise what massive undertaking it is to produce a detailed map. Using a plugin massively sped up drawing the map, but the amount of time it took to plot routes was still crazy and something I’m glad I just did enough of. This has a valuable lesson in knowing what to do yourself and what to use API’s and plugins for.
To wrap up mapping and make my life easier, I created a “map kit”. This was just the assets and parts used to show information on the map. I included this in the design system for use in the future.
https://www.figma.com/design/y0PROqO78LpF5wLlkzWBL7/Metronet-–-Design-Library?node-id=366-22196&t=qeEftiEIQUxvabBE-1
Next, I wanted to focus on moments of motion and animation.