VPN Mobile App UI
UI Design Case Study
Stockholm, 2020
Stockholm, 2020
About
Here is a 3-day mobile app UI design challenge that I got. I used this opportunity to get myself used to Adobe XD, and create something in neumorphism (soft UI).
_______
The challenge
"Prepare a mobile application design for a VPN service. Design should include:
Login / Signup views
Signup with Facebook & Google account only. No username / password required.
Signup with Facebook & Google account only. No username / password required.
On-boarding view
Select country (IP) should be shown as a list with Flag, title and Ping.
Main view
Connecting / Status. VPN Country, Connection health, Upload speed, Download speed, Ping.
You should be able to connect, disconnect, change Country server. You should be able to go to settings from main view."
Select country (IP) should be shown as a list with Flag, title and Ping.
Main view
Connecting / Status. VPN Country, Connection health, Upload speed, Download speed, Ping.
You should be able to connect, disconnect, change Country server. You should be able to go to settings from main view."
_______
Solution
Please click to play the video
Wireframes
The goal of this project was to reach simple yet attractive design for a VPN service. Since the user flow was already given, I moved to wireframes and design decisions.
I created a dark theme with night colours.
A neumorphic button with light animations for emphasising current status.
Clear indications for ease of use.
UI screens are designed for iPhone X/XS/11 Pro resolutions.
Prototype
Please click on the screen below to start
Thank you for watching!