Visual Design proposal

We have created a simplified version of the designs that include a visual design. Inspiration for the visual design came from the header image on the riseup website

A summary of results from our first round of testing can be seen on the issue #512 (closed).

We also supply a light mode and dark mode, feel free to use both or pick one of them to implement.

Key features of the proposed design

• Prioritize automatic reconnection & redirection, minimize user interaction;
• Give signposts and clear information about leaking data, errors, and slow connections;
• For headers and buttons, use lower case text and font that closely matches the riseup logo, something fun and edgy.
• For explanatory text, use the system readable font
• Use a status bar to clearly display the current state of the application

Theme colors

• Light blue: #2E639C
• Dark blue: #021122
• White: #FFFFF
• Black: #0000

Indicators

• Green: #4CF112
• Yellow: #FFFF00
• Red: #FF0000

Disconnected

Click big button in the middle to begin connecting to the recommended location.

Only two lines of help text should be available.

Connecting

The background image is for fun, not required :)

Based on feedback from @cyberta, we think it will be more visually appealing and less jarring to show the connection status on the bottom status bar.

Location Selection

There are a few options for the recommended location screen. You'll notice that there is either a back button, or a close button. All platforms should use a back button, if possible. But the desktop app could use a close button, but feel free to experiment to see what works best (and test it with users!). The concern with the X close button, is that it may indicate to the user that the VPN will be turned off or closed, so be careful.

You'll also notice that there is an option to have a 'Use recommended location' button, and another option to put the recommended location in the list along with all of the other cities. The button should nudge users to connect to a recommended location and it mimics other applications like Nord VPN that have a prominent button for this feature. However, during tests, people were still able to figure out how to click 'recommended' so it will probably be OK either way.

When a location is selected, the app should immediately return to the connecting screen.

Settings

Similarly to location selection, the settings would ideally be a back button.

Slow connection

If someone selects a location that is very slow, we can nudge the user to select a different location by prompting them with this screen. If after a certain timeout (5 seconds?), they take no action, reconnect them to the recommended location. This is hard to test with a clickable prototype and we will likely find out more information if the design works when we have a real implementation of it and watch users play with it.

Error

When there is an error, it should redirect automatically after a few seconds.

Turn off VPN

If someone tries to turn off the VPN, it should give a prompt (this is how Mobile does it, desktop should do the same). No one complained about this message in testing.