As a designer at heart, I believe that good design begins with how we organize our digital environment.
In early 2021 at Emirates NBD, I had the opportunity to help establish a robust and efficient approach to managing this environment.
The model we introduced remains effective to this day.
Start by setting up a Functionality Map for every project by assigning a code for every function (service) of the product.
*Earlier we used Airtable. Now, we use Notion.
Figma design files naming convention follows the exact functionalities logic.
Figma pages — inside the design file —start with the parent file code and then follow the functionality map order code.
Figma stage should be clear and easy to read by anyone visiting the file with minimum guidance possible.
*Specific rules apply on how to use sections, black header strips, and the appropriate way to organize happy flows versus edge cases.
Use figma’s native annotation, notes on connectors or color coding for more clarification.
Artboards are named starting with the project initials + flow functionality code + row (A, B, C…etc)+Screen number.
*Row B always represents the happy flow.
Video Recordings
Here’s a example of how we organized figma stages.
Credit card issuance flow designed in 2022.
Here’s another example of prototype. I try my best to simulate the live experience with showing loading steps and transitions between screens.
Credit card issuance prototype concept recording.