The ideal flow

The user connects a device directly via ethernet, Wi-Fi connection is administrated remotely, and the device > location > user link is made automagically via scanning a QR code.

Secondary flow

A backup user flow, where the user can connect to Wi-Fi locally, without needing to log into the portal.

Wi-Fi only flow

A final flow was done in the case of networks where only Wi-Fi is available.

QR code flow

A proposed flow to explain how the QR code link would work. The QR code would link to the device setup documentation, where a call to the api would be made to check if the appropriate device id has registered itself. If so, the page would automatically redirect to the location registration page on the web app. If not, we stay on the page, directing the user to the setup guide.

The device is manufactured with a two colour LED, which we can use to provide a status code

1. An overview of the entire final user journey prototype:

2. After scanning the QR code on the device, the user gets directed to the device setup page on the public site. The device ID is passed as a query string, and if the query string is picked up, this automated connection check modal shows up. Upon landing on the page, an API call gets made to the backend to check if the device has registered itself and if it's online. If so, the user gets redirected to the location setup page on the web app. If not, the connection check modal provides the option for setup help, and the user gets directed to the setup wizard.

3. Here is the setup guide to help a user set up their device if the automated system did not pick up the device being connected. This is also the default state of this page.

4. If the automated connection check has passed, the user gets directed to the web app to register the location, or attach the device to an existing location. This flow also guides the user to setup Wi-Fi credentials if the device was connected via ethernet.

5. Once the location has been registered, the user is directed to the location dashboard. Here there is a connection status tab, which also allows the user to set up or change Wi-Fi credentials.