Cryptino

UI/UX | Branding | Research | Graphic Design | Illustraion

Product Thumbnail
Project Duration

03 Months

Client

Gaditek

Team

Musab Ibrahim (design), R&D, Marketing

My Role

Product Design, Branding, Illustrations

overview

Due to increasing number of data theft, data compromise and personal security concerns it is now becoming a trend for people to use services that helps them to secure their personal details and communications. Recent events regarding data exchange by some of the major social media services, mail services and others have shaken the users and their privacy concerns and people now being extra conscious about their privacy over internet or online. cryptino is providing its user the facility to encrypt their communication effectively and freely to prevent their data/info being fetched by third parties of any type.

The objective of cryptino is to make life easier for people who share personal and confidential data over the internet by encrypting their communication using cryptino’s state of the art encryption technology. This will help the users to send/receive emails without any fear of being monitored or their data being stolen.

I was asked to deliver the product end-to-end within 3 months, this involves not just MVP (minimum viable product) but also involves branding, marketing collateral and guides to be provided as well. These items were additional to the initial requirement of iOS and Android App along with Chrome and Firefox Extensions.

P.S.the product was renamed after it's resemblance with a famous trojanware.

Process

process that I follow is very simple.

Research

Do research including contextual study, competitor analysis and interviews with exisiting users as well as the stakeholders e.g., management, marketing and engagement teams if there are any.

Design

Once done with reserach and collected all the necessary data and details I get down to define the mockups which includes paper prototypes , wireframes and then low-fi mockups to define the assembly of the actual product may look like. After that I prepare the final designs.

Testing

I just love testing the product/service/design artefact, I love to hear what the user have to say once I present the product in front of them, this happens at two levels. 1st when I am doing prototyping and 2nd when I design the final version.
so, it's like multiple iterations that result in the final product and of course further testing would help to present a viable soltuion that can proivde benefit to the stakeholders.

Design

Email Encryption For Gmail

Available on

logo concept

The logo has been derived from "morse code". An encryption language used in world war. The idea derived while exploring about encryption and symbols associated to it.
Later I thought why not just make a logo symbol out of this very code, so, I've used the letter "S" of Super and letter "C" from crypt, the two initials and put in a logo, of course this wasn't done overnight , it took great number of variations to land on this solution which reflects the product idea but also enables the user to inquire about the symbol and believe me! when I explain what this is ,
oh! boy I just enjoy the expressions.

On Boarding

Onboarding-animation

On-Boarding

In the on-boarding we've tried to clearify the purpose and benefits of the services as much as possible.We've made sure the user gets complete insight and brief on the service and it's scope.

Activation

Activation

The activation process, I've found it a bit critical, due to the fact that user have concerns about privacy and security and this is the only reason user is signing up for this serivce, so, we wanted to make sure and inform the user that we'll only encrypt the emails and that's the only authorization we need, other then that we won't be or the serivce won't be recording, monitoring any of user's activity whatsoever.
Activation Image

Encryption

Encryption Process Image

Encryption

This is again a critical part, we wanted to make it subtle and clear at the same time, the idea was to provide serivces without alerting the user that something is going on, so, we used the default ui of gmail as well as iOS. So, user shouldn't be alerted that there is something wrong with the mailbox. Also we wanted to make things as clear as possible and less clicks to achieve the results.
ios App Screens wireframes ios app screens

Android

android app screens

Desktop Product

In order to use Supercrypt for desktop, the user needs to download and install supercrypt extension frmo either chrome extension store or Mozilla Firefox Extension store.

Desktop On-Boarding

Desktop onboarding Image

Desktop Activation

Desktop Activation Image

Desktop Compose

Desktop Activation Image

Email Received By User Who Has Supercrypt Installed

Desktop Activation Image

Email Received By User Who Don't Have Supercrypt Installed

Desktop Activation Image

Website

Supercrypt Website Supercrypt Website Thumbnail

icons

Supercrypt icons

Guidelines

Supercrypt Guidelines