Now that the layout is approved, connect the screens together using Figma's Prototype tab so we can "click" through the app. Then, design the "Unhappy Path" screens we discussed during the whiteboarding session.
Definition of Done:
[ ] Prototyping is linked (Clicking the "Find Route" button transitions to the Map Screen, etc.).
[ ] Loading State designed: What the user sees while waiting 3-5 seconds for the backend (e.g., a spinning wheel or a skeleton loading card).
[ ] Error State designed: A clean popup or alert for "No Safe Route Found."
[ ] Out of Bounds State designed: A warning banner or toast notification indicating the user has walked off the green line.
Now that the layout is approved, connect the screens together using Figma's Prototype tab so we can "click" through the app. Then, design the "Unhappy Path" screens we discussed during the whiteboarding session.
Definition of Done:
[ ] Prototyping is linked (Clicking the "Find Route" button transitions to the Map Screen, etc.).
[ ] Loading State designed: What the user sees while waiting 3-5 seconds for the backend (e.g., a spinning wheel or a skeleton loading card).
[ ] Error State designed: A clean popup or alert for "No Safe Route Found."
[ ] Out of Bounds State designed: A warning banner or toast notification indicating the user has walked off the green line.