NOS PROJETS
NOTRE APPROCHE
À PROPOS
CRÉER AVEC NOUS

UI/UX design case study personal data marketplace

February 14, 2020

< SPOILER >

We will go through a complete research and design process for a personal data marketplace application, FreeYourData, to see how we go from an idea to a complete visual prototype. The final product will look something like this :

</ SPOILER >

Introduction

Currently, gigabytes and gigabytes of user data is collected by websites, smart devices and applications and is sold to various companies without the user having a say in the transaction. With the boom of IoT (Internet of Things) right around the corner, it is time we prepare for the next big step in how we handle the data we generate : personal data marketplaces.

This document is a UI/UX case study presented for FreeYourData, a personal data marketplace application, proposing a complete visual prototype. This visual strategy will address the main points that fell from our research with potential users and competition assessment :

  • As one of the first in its category, FreeYourData needs to leverage an informative and clutter-free UI to communicate its purpose to new users ;
  • Integration with data sources needs to be clear and painless in order for users to engage with the application .

Understanding the problem

The problem

The data economy is well underway, but one player is being left out : the one who generates the data.

As devices like watches, locks, scales, assistants and cars continue to get smarter, they will generate more and more data about their user. Those users, if we follow the current model, will continue to give their data in exchange for the services their devices bring them. In addition to the obvious privacy concerns, the data economy will continue to grow without the consumers having a say in it.

The solution

With appropriate peer-to-peer or peer-to-business platforms, consumers could profit from their data by selling it on an open marketplace, if they wish to. Furthermore, they would be in full control of who their data goes to and for how much it is sold.

FreeYourData aims to be a leader in this growing economy by offering users a transparent, secure and open personal data marketplace where they can be matched with buyers in order to sell their data while retaining control over it.

In order to fully understand the problem and target potential user needs that will impact the UI, we conducted an analysis of the current players in the personal data marketplace space, surveyed potential users and created user journeys and personas. The findings from these strategies are outlined in the next section.

Research

What exists right now

Most of the existing solutions like Dawex and the Iota Data Marketplace are enterprise focussed and not accessible to the average consumer. The few truly personal data marketplaces that exist seem to still be in a stage of infancy. Without delving too deep in the technical side of things, current existing solutions are often blockchain-based. While the blockchain is a suitable technology for this application, tokens and private keys are not user friendly and thwart the growth of these platforms.

Let’s take a look at Datum, which is guilty of over blockchain-itization, but nonetheless makes efforts to inform the user during the on boarding process :

Seeing information screens on the first boot of the application is something that can be beneficial to platforms that operate in a new or lesser-known market. With this strategy, the visual interface can quickly and effectively communicate the platform’s purpose, features and advantage to the user.

Wibson is another personal data marketplace application for android and ios that handles the connection of the data source rather well (in theory, as the application is not compatible with any of our devices so we could not try it out fully) :

Wibson’s social media toggles

Simple toggles to enable data fetch from various social media is something every user should be able to understand and enable. This strategy would reduce friction during the initial setup of the application, a time where user retention is primordial.

User research

A survey was conducted on young adults ranging from the ages of 21 to 27. A majority of the respondents were software engineering students and therefore were more likely to be aware of technology’s impact on the world. Seeing as the respondents were also very young, we can assume that they have been using technology for almost all of their life, and may not be as reticent about data privacy as other age groups might be.

Let’s take a look at responses that may have an impact on the UI/UX of the application :

Most of the respondents answered positively to the possibility of selling their data. It is to note that they are not aware of the exact compensation which makes it possible that some respondents would switch their answer if they found the amount too little.

When asked which type of data they were willing to sell, app usage habits was the one category that stood out. Fetching the data for this category would be simple for the user if FreeYourData provides integration with the most used applications like facebook, instagram, youtube, twitter, etc.

Anecdotal evidence

When talking with students in software engineering about such a platform, two main points were made :

  • Who would want to buy individual data ? and
  • How could I share my data on such a platform ?

The second point is a well-founded apprehension : who wants to manually download .CSV files of data to post on a marketplace ? No one. From a UI/UX perspective, these points make two things clear :

  • Information about the platform and how they match sellers with buyers must be clear in the UI ;
  • The on boarding process must answer these common user questions and provide a simple way to connect with the user’s data.

User personas and journey

Since direct user input was given by a very homogenous group of people, we created user personas that capture different types of potential user :

What a user like josh tells us is that a data marketplace application must be easy to use as it may appeal to people without any technical background or interest in data privacy.

Sandy’s background tells us that the platform must be trust-inspiring since many users may look at personal data marketplaces in response to a worry about how companies are currently using their data. These users need to be shown right away, through the user experience, that FreeYourData is a trustworthy alternative.

To further the types of users we consider, a user journey chart was built to link what potential users might think to the application :

User journey

User flow chart

With that user knowledge in mind, the following user flow chart was built :

User flow chart

The flows were kept simple to provide a straight-forward and pain-free experience to even the most unexperienced user.

The visuals

Mood board

Before sketching, wire-framing and iterating on the design, we made a mood board to kickstart our creative process. While most of these apps are not in the data marketplace space, this board serves as inspiration for UI components and color palettes. The overall look and feel we are aiming for would be big components that reduce clutter, pastel colors and smooth interactions.

Mood board

Colors

We chose a pastel shade of dark blue for our backgrounds and a pastel yellow for contrasting pop-ups and screens. These high impact pastels will allow us to achieve contrast between elements without being too aggressive like using black and white. In the application, these colors will make it easy to highlight certain information while maintaining a calm and clutter-free experience for the user.

colors

Icons

To preserve continuity between our icons, our icon suite will be from font awesome’s duo-tone catalog. The duo-tone variation will make them stand out without increasing the visual complexity too much. Using this set of icons will ensure a consistent experience for the user and will provide them with useful information without cluttering the screens. Here are a few of the icons we may use :

icons

Typography

We chose Merriweather as our high impact font and Avenir Next as our general font. Merriweather, if used sparsely throughout the application, can be a refreshing element of our design that both captures the attention of the user and makes the application stand out. As for the rest of the application, Avenir Next was chosen for its simplicity in order to not clutter the user experience.

Typography

Logos

We wanted the logo to be playful and inviting to inspire trust in the customer. The logo shows a cloud plugin in a walet, which communicates to the user the core feature of the application : your data works directly for you. A simpler version of the icon is also provided for the application icon in the app store.

Logos

Sketch

Before diving into designing it is always helpful to translate user flows into a sketch. It gives a general idea of the application and helps lay the foundation for a more cohesive design identity throughout the application.

Sketch

Wireframes

One step up from the sketches is the wireframes. These give a good indication of the layout of the application before styling is applied. We decided to make the wireframes interactive in figma to give us a better grasp on the user flow. This wireframe iterates on the sketches by adding a checkout page where the user can enter payment information and withdraw the money that is in their account. It also adds a pop-up for logging into data sources.

The interactive prototype can be found here.

Final mockups

Log in and sign up

The app opens with a login prompt (left). A user can choose to sign up for the application from that screen. The sign up process (right) leads to the on boarding screens.

On boarding screens

These are the information screens shown when a user signs up for the application. The goal here is to quickly communicate the application’s purpose to the user.

Homepage, offer prompt and wallet

After logging in or signing up, the user arrives on the homepage (left). The homepage shows the current buyer offers for the user’s data. If the user clicks on any of the offers, a prompt pops-up with the offer’s terms and conditions (middle). If the user accepts the offer, the money is added to their account. If the user refuses the offer, the offer is dismissed and he or she is redirected to the home page. From the home page, the user can click on their balance and be directed to the withdraw screen (right). On the withdraw screen, the user can enter credit card information and withdraw the money in their account.

Data settings, data setup and my ads

From the homepage, the user can access the data settings, where she or he may enable different data sources (left). Once a data source is enabled, a prompt to log in to that data source is displayed (middle). From many screens in the application, the my ads tab can be pulled up to show which data streams the user currently allows buyers to buy from (right). Clicking on one of these data streams will bring the user to the data settings.

Conclusion

Starting from market and user research and building the visuals step by step allowed us to propose a streamlined and functional visual prototype for FreeYourData.

This design focuses on building trust with the user while providing them with information on the application’s mission and functions. It aims to integrate painlessly with data sources to enable anyone, techy or not, to be in control of their data.