Cufflink - Encrypted Data Sharing

This case study breaks down the design, development and implementation of Cufflinks i2i encrypted data sharing module and privacy-enhancing feature set

An image showing the Cufflink app linking screen

Project Summary

Earlier feasibility workshop sessions highlighted a need and want from users to have the ability to not only store their information but to share it safely and securely with having the right set of tools to finely control its access.

Duration And Team

February - March 2021

Callum Murray - Research and Design Lead

Boris Grekov - CTO

Neil Brown - Frontend Developer

Rhisiart ap Gwilliam - Backend Encryption

My Roles

User Research

User Testing

UX / UI Design

Competitor Analysis

Process Flow Design

Wireframing

Project Overview

From our previous feasibility study, we highlighted that one of the main goals/pain points of our users was the ability to share their information with other people and companies in a safe, transparent, and controlled way.

We found through in-person interviews and workshops that our target audience was frustrated with the current lack of options to control and share their information online. They said that they often default to using social media channels such as Facebook and Twitter to share information and as a result had to sacrifice their anonymity and privacy in the process.

To combat this, we set out to implement the I-2-I phase of the app which would give users the tools and features they need to safely share their information with both companies and other users.

For this, we extended the current app and added several features such as Cufflink accounts where users could have a UID to be found by other users along with this we added personas where users could easily group their information for sharing.

When it came to sharing information, we made use of the signal protocol for encryption with multiple ways for users to link up and share information. Due to the COVID-19 pandemic, remote and in-person options needed to be available.

These new features would allow our users to see exactly what was being shared with who and for what purpose and for how long. Meeting their goals of having a privacy-centric way in which to share information online.

From user testing, we found that users were happier to now have an alternative way of sharing information online making them that little bit safer.

Image of an iPhone 13 displaying the linking up screen on the Cufflink

1

Research

During the feasibility stage of this product, we carried out a series of workshops with members of our target audience. From this we found an overall need and want for the ability to share their information safely online after expressing that a lack of alternatives left them feeling frustrated.

During these workshops, we had several feature ideas that were focused on solving the issues of sharing and controlling data. These were pitched to our users with them ranking their most favourable to least via a questionnaire and open discussion.

A bar chart showing the rating of proposed Cufflink features

With this feedback we were able to see a bundle of features that could be implemented together to solve this issue for our users, these can be grouped as the following:

Secondary research was also carried out among our competitors to find out how and if they allow for the sharing of information. From this, we were unable to find anything that completely fit our vision. However, we did learn several best practices and were able to gauge how their processes worked and identify what could be improved on.

Ability to group information

Icon used for the ability to group information

Have a Cufflink account

Image of a Cuflflink icon used for linking with people on cufflink

Linking up with users

Image of a link

Sharing Information

An icon used for sharing information within Cufflink app

Transparency Tools

A pair of binoculars used to represent transparency controls

Ideation - Grouping Information

Once we had a firm understanding of the user’s requirements it was time to start coming up with solutions on how to implement a complete data-sharing feature set.

The first feature to be added to the app was the ability for users to group their information so they could easily control what was being shared with who and for what purpose.

During the research phase, we identified that almost all our workshop attendees expressed varying levels of comfort when it came to sharing information with other people and that they would disclose different levels of information from sensitive to non-sensitive depending on who the person was.

Feedback from a user stating "I would only share private information with people I can trust"
Feedback from a user stating "I share everything with my family but guard a lot of my information with unknown people "
Feedback from a user stating "Information i share with my colleagues is different to that of my family"

This got us thinking and it reminded us of the concept of personas where both socially and digitally we have different versions of ourselves for example my online gaming persona may be very different to that of my professional persona and the information associated with it.

An example persona showing callum, the gamer and callum, the professional each have different social medias and email addresses but are the same person

From this stemmed the idea of a“Cufflink persona”whereby users could take their information and create several customisable personas and attach different pieces of information to them.

We started by sketching out the potential screen flows of a user who would want to create a persona. We thought that it would be best to embed this feature within the “Me” section of the app as we wanted all features about the user and their information to be under one location. And as it's going to be an important part of the information-sharing process, we decided to give it a bespoke tab at the top of the screen, so it was clear to users where to go if they wanted to make one.

When it came to the creation of a persona itself, we also decided to keep the process a near 1-1 match with that of adding information into the app as we wanted our users to be able to jump straight in and create their persona. All the user needs to do is select a persona label I.e. professional and tick what information they would like to add to the group. We also decided that we would allow personas to have a profile picture to help users easily recognise down the line what persona visually they may be sharing with someone.

2

Left slide show arrow
right slide show arrow

Persona User Flow And Wire Frame

Image showing the process of creating a persona within the Cufflink application

Persona Creation Screen Flow

3

Ideation - Cufflink Account

For users to share information with one another they would need a way to find one another. For this we needed to develop an account creation process that would give users a unique identifier (username).

This process was rather straightforward as we leveraged a lot of research from other app developers on how an account creation process should flow. We, however, wanted to ensure it was as frictionless as possible and required the least amount of information from our users.

In the final version of the process flow, we decided later to add another little help tooltip if required by the user to reassure them what we were doing with the information they had entered.

A low fidelity wire frame sowing the creation of a cufflink account and how it could work

Account Creation Wireframe

a high-fidelity in app process of creating a Cufflink account

Account Creation Flow

Ideation - Linking up

For users to be able to securely share their information they needed to find a way in which to connect with other Cufflink users. Our initial idea for this was to offer three routes:

QR Code Scanning

During the pandemic it was clear to us that the revival of QR codes was well underway so we decided a good method of being able to establish a connection with someone would be through QR codes, this was done by creating a unique QR code for every cufflink account. Users could then scan this from within the app and trigger the linking process. We thought that this would be a nice value add as people could take it a step further and create zoom backgrounds and business cards with it.

Left slide show arrow
right slide show arrow

Contact Syncing

The next idea was to let people sync their contacts. We researched several other apps that enable this and saw that they often weren’t done in the most private-centric way, and we thought we could do better by changing the process. In our version the user can selectively choose who they want to sync across alternatively they can choose to do all but are given the choice first.

Once a user has synced their contacts, they will be populated in a contact screen, and they can see the status of their contact. We decided that these stages would be denoted as ready to invite, waiting, available to link and finally linked.

Left slide show arrow
right slide show arrow

Username Search

The final way and something common in most online apps where connecting / linking is involved of any kind was a username search function this could be done from the contact screen. Here the user could search for the username of the account they would like to link with.

We decided for increased privacy and to minimise the number of calls to the server we would disable the ability to search with anything other than the full account name and not search with each character input.

4

5

Sharing Information

When it comes to users being able to safely share their information with other Cufflink users and companies it was vital that the design both front and back end had to be approached in a private-centric manner considering the users’ feelings towards the goal of having a safe place, they can trust in both storing and sharing their information.

For this feature, we researched intensively liaising with the back-end engineers and finally settled on using the open-source signal protocol used by WhatsApp to ensure that we could be completely transparent with our users.

The idea for the front end was to keep the process short and sweet with the user just having to press a few buttons while being able to accurately share the information with another user. Our initial idea was to create a process that would in some ways hand hold the user through a 3-step process as shown below.

First, they would be given the option to link with the user using one of the personas made earlier, or a quick contact can be set by the user, and it may contain only the information that you regularly share. From here the user is then given the option to select/deselect information from that persona. This is done so that if for whatever reason the user can always change their mind in that instance and decide to share something else if required, from here the user either accepts the link or dismisses the process, this is then confirmed by a confirmation animation and now the user is linked up.

Once linked, the user can find their contacts in the contact screen here, we decided to include the linked persons contact with a status indicating the state of that contact and the colour of the persona used to link with them around their profile picture this was designed so that the user could quickly see who they were sharing with what.

a wire-frame design of how the process of sharing information may look like using the Cufflink app

Linking Wire Frame

A high-fidelity process flow of how a user shares information with another user.

High Fidelity Linking Flow

Control Transparency Tools

To enhance the data sharing process for our users we wanted to enable them to always have complete control over their information.

For this, we decided to design a contact profile screen that could be viewed once linked up with another user. Here we display the information that is currently being shared with the contact and what is being received from the contact, we also highlight the persona being used for that link along with a notification tab for any updates that may have occurred since the link was created.

These updates could be along the lines of someone updating their phone number or a shared login. From this we discovered that users were happier than we first expected to part ways with their personal information when understanding what it was being used for or who it's being shared with.

To take it a step further we also decided to let the users delete their link or alternatively unlink with a contact (this keeps the shared data of both parties, but the contact will no longer receive updates) or to edit the link entirely with what information is being shared.

6

a high-fidelity design showing the variety of transparency controls available to the user

High Fidelity Linking Flow

7

Testing

Once the implementation was complete, we invited a select number or users that expressed the greatest interest in the features previously pitched and ran through several task-oriented tests that incorporated all the new features.

From this we observed that most users found the new features helpful. However, it is worth mentioning there were a few sticking points with users not completely understanding the use case for a persona and what they could be used for. After this was clarified many users were able to give examples of a situation in which they might use one.

The idea for the front end was to keep the process short and sweet with the user just having to press a few buttons while being able to accurately share the information with another user. Our initial idea was to create a process that would in some ways hand hold the user through a 3-step process as shown below.

Overall the new features were well received within our test environment and over the coming months we will reach out to more users for their feedback once in production.

Let's talk.

I'm always eager to hear from new people regarding their projects and love discussing new ideas so if you fancy a chat drop me a line.

Thank you! Your message has been recieved I will reply ASAP.
Oops! Something went wrong while submitting the form, please try again.
A button that will take you back to the top of this page