<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>
A process I’ve found to work really well over placement is the idea of “system maps”. This is essentially a step up from a user flow diagram, while shows arrows and logic around the actual screens. As a very visual thinker, I’ve found this approach to be far more effective than lots of user flow diagrams. I still did them for this project, as I think they’re a good jumping off point, but when you get to this level of a project, I find this to work best.
To keep organised in the system map, I find it’s useful to designate colours to certain types of label. For this system map I used:
Purple arrows and notes indicate links and interactions between separate screens, such as moving from the homepage to settings.
Orange arrows and notes indication links and interactions within separate screens, such as tapping a button to open a modal.
Blue arrows and notes indicate variation in screens, such as different notifications depending on the users scenario.
Yellow arrows and notes are extra notes, logic, and thoughts explaining parts of the system.
This approach helps me keep organised and weed out any dead ends or inconsistencies in the system. Additionally, it helps new designers (or markers) understand the system more thoroughly. You should be able to just follow the arrows to understand how the system works.