<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>
It had came out in testing that users really liked the moment to moment guidance in the navigation flow, so I wanted to consider how I could push it further.
An idea I had was to turn it into a smart watch companion app, that would show the steps as you’re walking.
I spent some time in Figma translating the navigation cards from the bottom of the navigation screens over to a watch screen, which went really well as they were already a similar size.
I then developed a full set of watch screens to simulate a full journey.
Although simple, I think these finished screens work really well and a very valuable extension of the main app. I think doing the navigation steps on the watch was a good idea, as the rest of the app would have been to much to translate to the size of a watch screen. Overall this was a really good exercise and helped me consider how I could push the product further.
Full working and documentation of wireframing can be found in this FigJam file.
https://www.figma.com/design/y0PROqO78LpF5wLlkzWBL7/Metronet-–-Design-Library?node-id=684-30874&t=gS1c2UcqzKKtEPxR-1