Start with the notebook
A visitor finds a note worth reading. Mockspace captures this screen and keeps it connected to the rest of the journey.
Next in the flow: Open a note
Follow the next screen
The note opens with its content and a Save action. Scrolling takes you to the next frame, just as following a link would in the deck.
Next in the flow: Save the note
See the completed journey
The saved note appears in the list. Browse, read, and save are one connected flow, ready to review together.
Next in the flow: Remove the saved note
Review what happens next
Removing the last saved note reveals the empty state. It explains what happened and gives the visitor a way back to browsing.
Include the first visit
A notebook with no notes needs its own screen. Keeping the empty state beside the default makes missing copy and dead ends easier to notice.
Make recovery visible
When notes cannot load, the visitor gets a clear explanation and a retry action. Review this state before anyone encounters it in the product.
Cover the broken link
A note can become unavailable after the visitor opens it. This frame gives that case the same attention as the successful journey.
Bring every state together
Three screens, seven states, one reviewable flow. Use Fit flow for the whole picture and Fit screen to return to a single screen.
Try this in your own project ↗