A concept for an application that allows users to view their web application live on an infinite canvas.
This new vantage point allows for clear observation of how the various flows work in the application. The tool can facilitate strategic conversations about where users might struggle, how the language matches from one screen to the next, how changes to one area might impact other areas.
Let’s imagine a simple contact book web application. In this app a user can save contacts, add notes about recent meetings with the contacts, and group contacts by certain characteristics. When the user first signs up for the application they follow a 3-step flow:
Create account credentials
Import contacts from LinkedIn
Create groups for the contacts
After completing the sign up flow the user lands on a Dashboard where they can see the 10 most recently updated contacts and a Group indicator that shows what group each contact is in if any.
Using an App Map the user would see an infinite canvas with 4 screens: Sign Up, Import, Create Groups, and Dashboard. The user could see arrows connecting the screens sequentially. The user would see a floating dock on the canvas that allows them to change the device type they’re currently viewing and toggle between an admin and a regular user view.
If the user clicks on the Create Groups page they enter into Interactive mode where they can manipulate the screen like any web browser. The user adds a new group and clicks save. According to the logic of the contact app this will advance them to the next screen. The user now sees a reset button appear adjacent to the Create Groups page. Clicking this reset button will return the page to the previous URL. The user can also see that there has been an update to the database for this user, a new group has been created and that means an update to the data represented on the dashboard. The user can see how the dashboard changes as a result of this change.
Now lets imagine we introduce two additional pages called All Contacts and Groups. On the All Contacts page the user can see a table with their contacts, they can click a contact to add it to a group. They can delete a contact or change the contact information. On the Groups page a user can see all of their groups, they can click a group and then search contacts to add a contact to a group.
In the App Map a user zoom over to the All Contacts page. If they Hover over the Dashboard link in the navigation they could see an arrow connecting The All Contacts page to the dashboard. The user clicks a contact and adds it to a group. Now the user can see some notification that a change has been made to two other pages: Dashboard and Groups.