Visual Design Proposal 2
I created a design mock in figma that incorporates decisions made while working with Simple Secure. I made the threes states (on, off, and cancel) into components which in Figma world means that i can update them in one place making it easy to iterate, and create and test new UX flows. Below are descriptions of the work, links to different prototype flows, and some screenshots.
INSPIRATION
The home templates draw from Mozilla VPN which has a clear clean composition. I stripped it down further for a spacious, uncluttered feeling and to make room for branding. The settings and gateway pages draw inspiration from the airbnb (headers) and signal app UX (clear content clustering).
EVOCATIVE STATES
For the different states, instead of regular lock, key, globe graphics and extra explanatory text I'm proposing the use of more evocative graphics combined with clear color indications. We don't need to spell out in cluttery text to people who have downloaded the VPN application what it's good for. We can have that info linked from a small Info icon. (Based on prior UX Review we will remove the scary guy)
FONTS and ICONS
I changed the font to us Sofia Pro, a clean modern font instead of the prior runes style (later moved to open source font) We are using bootstrap icons (https://icons.getbootstrap.com/). The bridge icon is not bootstrap its from https://www.svgrepo.com/svg/220911/bridge
EASY BRANDING
- It can be as easy as adding the VPNs logo into the connected state panel. Clear and simple.
- Further branding via background colors can be done, but should be done subtly
- riseup and others can hire artists / designers to create animations and replace the clip art shown (see block print and photo below)
MISC
- i used bootstrap icons for signal strength instead of the prior hamburger icon that we used so it doesn't overlap with the menu icon in android. It's also important that it can indicate strength via color and composition differences.
- Illustrator Sketchbook
FIGMA PROTOTYPES
TODOS
-
Add proposal for donation widget/box on splash page
Need Info
-
Add service is down indicator (on splash page?) -
Add show logs button (where?) -
define image for disconnecting state (the transition is usually very short) -
Add visual indication for "manual override" in the Home Page.
DONE
-
show where the recommended gateway is. -
Replace sofia pro with a free font - poppins -
Make splash page - logo and loading indicator. -
bridges: turn on bridges in settings which would then activeate a toggle or so in gateway that will restrict gateways to only gateways with bridges, greying out the other gateways. -
Write down specs (size and creative ideas) for off/connecting/on images, (and probably icon sets?) so that riseup can work with an artist to produce consistent assets #547 (closed)