Privacy By Design

Free to share ideas. Free to be private.
Free to be you.

Problem Statement

Creating a safer, secure, and private internet!

With data leaks, hacks, and ransomware attacks on the rise, we set out to build a secure storage solution that ensures no hacks and data leakages!

Personal cloud storage is an essential part of an internet user’s life, with important files, pictures, videos, and other files backed up to the cloud. The problem with mainstream cloud storage solutions is they are severely lacking in providing a robust, secure, and private platform that can’t be hacked. Partnering up with the Opacity team, we went on a journey to create a cloud storage solution that gives the user control of their data and privacy.

The Result?

Opacity – a secure storage solution that relies on client-side encryption to ensure that the user, and only the user, have access to their files. Opacity has zero knowledge regarding users’ account activity and usage.

Objective

Build Opacity’s iOS and Android apps with a security-first approach and ease-of-use parallel to solutions like Google Drive and Dropbox.

Challenges

1

The problem sets we faced were very specialized technically and needed a strong team with diverse skills to fully deliver the client’s requirements.

2

Initially, there was limited interaction with the core Opacity team, meaning we had to get familiar with all of the complex systems and solve problems independently while maintaining the high-quality benchmark we have.

3

Opacity’s existing upload library was not built with mobile in mind, so we needed to rewrite and repurpose the library to work with mobile.

4

One of the core features of auto-uploading and syncing files, when taken outside of the application, required us to build an extensive customized library for iOS and Android from the ground up.

5
When taken outside of the application, one of the core features of auto-uploading and syncing files required us to build an extensive customized library for iOS and Android from the ground up.
  • React Native is single-threaded, and processes libraries weren’t working on iOS and Android. We had to fork and correct the implementation for our needs.
  • 50% of the libraries involved in the project needed a fork, resulting in a large amount of iOS/Android and React Native code we had to write to support the needs.

Team Worked on It

img

Performance & Stability

Kamran P

ui/ux designer

Emma T

Android Developer

Osama A

Product/Marketing

Saqib Z

ui/ux designer

Taimur B

iOS Developer

Mayur B

React Native Developer

Omar A, Nelson S, Yohan K, Ravi R

The Services We Provided

Our Approach

We surveyed the existing solutions in two groups.

#Group 1

We focused on mainstream cloud storage solutions to better understand the convenience they bring and what security flaws they have.

#Group 2

Surveyed the privacy and security-centered cloud storage solutions to understand what features sets are being offered and how true are the solutions to their claims.

1

Once mapping the existing landscape, we focused on creating a detailed PRD and aligning with the client’s core team members.

2

Meticulously wireframed the UI/UX to ensure we meet our objective of creating an intuitive user experience for opacity apps.

3

Once the Wireframes were approved, we quickly developed high-fidelity designs and shipped them to the engineering team for development work.

4

Once the Wireframes were approved, we quickly developed high-fidelity designs and shipped them to the engineering team for development work.

5

On the engineering side, we worked in sprints to iteratively develop and send builds every week with weekly email updates to the client for constant feedback.

6

Once we reached our first milestone, we started testing with a group of open beta users and built on the constant feedback we got from our beta users.

Refine & Output

We have completed the application product on the phone with
a fast file upload speed, ensuring the security of user data.

OPACITY User Flow

We outlined a simple user flow so that the design and developer can understand the single-user flow of this application, especially in the feature of controlling privacy and user data.
From here, we determine what the main features are, what should be included in each version.

OPACITY Wireframe

We built a simple sketch wireframe of the initial concept. How to arrange functions in a way that is easy to understand and logical with the user story.

OPACITY Logo & Color

  • #2E6DDE

    Primary/Blue

  • #2E6DDE

    Secondary

  • #2E6DDE

    Secondary

  • #2E6DDE

    Secondary

  • #2E6DDE

    Text

OPACITY Typography

Poppins

Aa

  • Heading 1

    LEAD

    Lead - Silver mist suffused the deck

  • Heading 2

    BODY - 18PT

    Apparently we had reached a great height in the atmosphere, for the sky was a dead black, and the stars had ceased to twinkle.

  • Heading 3

    BODY - 15PT

    Apparently we had reached a great height in the atmosphere, for the sky was a dead black, and the stars had ceased to twinkle.

  • Heading 4

    BODY - 12PT

    “The sky was cloudless and of a deep dark
    blue."

  • Heading 5

    Capitalized

    Brainstorm alternative ideas

  • Heading 6

    SMALL

    Value your time

  •  

    TINY

    Nothing is Impossible

Dark Mode

Light Mode