Secure messaging app

Mobile security and device management solution on iOS and Android for corporations that need to manage their internal team and maintain internal information integrity. With the device management, the application enables internals to communicate through a secured and encrypted channel with the assurance that their corporate information transferred (whether it be messages, files, photos, and recordings) is protected from any malicious attacks.

My role

Creative Director (UX/UI) at Secure Enterprises from 2014-2016. I identify problems, set benchmarks to address it, and then design, test, and iterate on different solutions. I work collaboratively with our Developers to guide user experience design throughout the planning and development lifecycle for our mobile platforms and management system. More about me.

Challenges

  • Design the entire function and innovate where it counts.
  • Making better and stronger process.
  • Appeal product to new and old consumer and business users.
  • Articulate user needs and solution, make specs, build, understand dynamics of what were benefits to the individual and the benefits of any product that we launch.
  • Facilitate and craft.
  • Humanize the brand.
  • Find what the minimum viable product (MVP) look like.
  • Content-centered experience and decluttering.

Goals

  • Re-design the full-fledged mobile security and device management solution.
  • Add many new features, such as payments and in-app subscriptions. Cashless payment is a new standard for many users.
  • Make simple user journey while staying feature-rich.
  • Need clear visual hierarchy of UI elements using strong visual signifiers, such as call-to-action buttons and contrasting colors.
  • Establish brand guideline, specifications, and icons for all native platforms to developers.

Requirements

brainstorm

User Journey

User journey

Platforms

iOS human interface

iOS tab

  • iOS tab bar at the bottom.
  • System typeface San Francisco.
  • Minimum tap target 44x44 pt.
  • Primary action button top nav, right side.
  • 2-5 tabs total. Labelled in size 10 font.
  • Navigation back using "back" action in the upper-left or swipe right from the left edge.
  • Action menus triggered slides up from the bottom.

Android material design

Android tab

  • Android tab at the top.
  • System typeface Roboto.
  • Minimum tap target 48 x 48 dp.
  • Primary action button, floating.
  • Back buttons in upper-left or permanent back button below the screen (Android 9 or older). Android 10 (and newer) navigate back by swiping right from the left edge.
  • Action menus triggered by tapping the 3-dot "kebab menu". Large menus slide up from the buttom.

BlackBerry UI

Blackberry tab

  • BlackBerry tab at the bottom.
  • Typeface Slate Pro.

Different platform design languages

Each screen is designed with which a user interacts and ensuring that the user interface visually communicates the path that my user experience work was laid out.

The navigation within the application needs to feel appropriate with customized icons on each platform. I craft icons, controls, and visual elements, making use of suitable typography.

Accessible and consistent

#007BC3
#000000 #5C5D63
#258828 #FFCB00 #EE0000

The primary application colours are neutralized to allow the sparse use of the primary blue and content to take center stage. Each area of the app is branded with a colour not only for aesthetics, but also for functional experience.

Iconography

Icon Meaning Icon Meaning
lock unread icon Number of unread messages, pictures, video, note pad or voice note that was sent to you. Icon Your message has been delivered.
Lock read icon Your message has been read. Lock played icon Your contact(s) has played your video or voice note.
Lock sent icon Your message, picture, video, note pad or voice note has been sent (has left properly and has reached the server). Lock sending icon Your message, picture, video, note pad or voice note is sending (pending, waiting, or your device has an issue with the reception).
Icon Your message, picture, video, note pad or voice note is pending to be sent Icon Your email is pending to be sent.
Icon Number of unread emails that was sent to you. Icon Your email has been read.
Icon Your email has been sent. Icon Destruct time remaining.
Icon Screenshot has been taken from a contact and is prevented. Icon Secured vault to encrypt and store notes, pictures and conversations.
Icon User is available. Icon User is offine.
Icon User is away. Icon User is busy.
Icon Has reached the server, not delivered, or re-attempt.

Technical features

iOS, Android and BlackBerry

Login enter password on Android

Application container

Everything is contained inside the App, requires authentication, and establishes secure connection with the server before it will allow you access inside the app (this will destroy any possibility of someone trying to brute force into your messages). App has no link to the device storage and contained in a secure partition.

Subscription expired on Android

Subscriptions

Your sales representative sell services and troubleshoot. When you first purchase the Secure Messenger App, you are offered with two kinds of packages; to install the app with BYOD or purchase a new device with the app installed.

Chat on iOS

Self-destruct chat

Set a time to your conversations that will self-destruct from yours and recipient’s device. Invite up to 10 users for one-on-one instant encrypted group messaging.

Off-the-record messages are only relayed through the server and are never stored for any amount of time.

Group chat on iOS

Encrypted pictures and attachments

Send/receive encrypted picture attachments and record short encrypted voice notes.

Chat details on iOS

Chat information

Destruct at lowest time in group chats or the admin can change the settings. Group admin can "destruct chat", while non-group admin can "clear chats".

This screen indicates each of the group member's retention time. Each attachment item will self-destruct with retention time indication.

Message information

Message information details

Number of unread messages and items that was sent to you.

  • Message delivered
  • Message read
  • Played your video or voice note
  • Sent (has reached the server)
  • Sending (waiting or reception issue)
  • Pending to be sent
Vault folders

Vault compartment for saved mail, notes, files, and chats

Secured Vault allows you to store notes, photos, conversations, files, etc. Encrypted and Secured. You can also send/share the encrypted files from the vault with other users.

Enter vault password on Android

Enter vault password

Mail received on Blackberry

Self-destruct mail

Set a time to your mail that will self-destruct from yours and recipient’s device.

New payment successful on Android

Digital payments

Digital is a way to send mobile payments to contacts.

Wallet

The Wallet keeps track of your digital transfers.

Captured image

Captured

Contacts on Android

Contact list

Address book is encrypted, password protected and contained within the Secure Messenger App. You can approve or reject who you want to communicate with.

Next case study