Case Study: UX/UI Design of a Personal Data Marketplace
Introduction
Years ago, companies have started to gather data on their customers. Back then, they didn’t do much with this data…so….what? Nowadays, with the developments in the field of artificial intelligence, people have become aware that data is now very valuable to companies.
Have you ever read through those long legal agreements after you’ve just downloaded an application or when you’ve just created an account on a website? Well, somewhere hidden along those lines, companies have sometimes asked to gather your data. Some of them have even asked you to give up ownership of it. Is that right or wrong?
The creation of a Personal Data Marketplace application that understands the needs, point of view, thoughts and worries of its users has now become exceedingly important.
Understanding the problem and the situation
What is data? Data is information on the people that we are. It can range from personal data such as name, age, occupation to what food you’re buying everyday, your click patterns on your computer, etc.
What is data being used for? Some people are fearful of their data being stolen or sold without their consent. Others don’t have much knowledge on what it is possible to do with data. The most common reason companies wants to use data is to understand their consumers and society better.
By understanding patterns of behavior or other metrics, they can use that information to target you with appropriate ads. They can classify your health risks, your lifestyle habits, determine your eligibility for a job and even influence you with personalized marketing. On the other side, data is important for other companies to further research. For example, in the health sector, the more data these companies can get, the better they will be at identifying/ making discoveries for certain rare diseases. The more people are willing to give data on their experience with certain diseases or medication, the easier it will be to give out more accurate care.
However, the issue right now is that our data is being obtained without our consent but also without our knowledge of it. This could lead to possible consequences such as discrimination, or manipulating of democracy (Cambridge Analytica).
Data ownership is a very “trendy” subject these days. The issue is that there are few regulations in this field, since it is very new to society. The FCRA(Fair Credit Reporting Act) and the GDPR(General Data Protection Regulation) exist but is it enough? There are numerous debate about data, who has the right to gather it, analyze it or even sell it to others.
The most important thing for users is transparency and the sense that have ownership over their own data. For a lot of people, they feel like they should have the right to decide where and to who they give their data to. They also feel much more inclined to give their data, if they know how it’ll be used. Therefore, a Personal Data Marketplace that empowers users and gives them the sense of data ownership that they need should exist. It should also promote transparency and provide a feeling of security to its users.
Research Method
Survey
To collect information on this topic and what users would need from this type of marketplace, we started with a Google Forms survey. The first few questions we asked were general questions to better know our users’ demographic. They were then asked to divulge their general knowledge/thoughts about data privacy and the idea of selling data. This allowed us to better understand their feelings on the subject and what their fears were so that we can work to diminish those fears.
The second part of the survey was more UI/UX oriented where we got to know how people prefer to navigate through a website and/or a mobile application.
First, we asked users if they’d like a web or mobile application and an overwhelming majority voted for a web application.
Then, we asked users to review and rate two already existed data marketplaces: the Wibson mobile application and the Datacoup website. They were asked to rate these marketplaces based on aesthetic appeal and the ease of use. They were also asked what they noticed/caught their attention from different screenshots of the applications.
This was very subjective, as they had to answer these questions based on screenshots. However, it was interesting to gather this information since if a design is appealing or looks more intuitive, the application is more likely to be used. If people cannot find what they are looking for in a specific page, then even if the application suits their needs, they might decide to search for a better, more user-friendly application. Therefore, it was important to assess what caught our surveyors’ attention and what they thought of already-existing products. Based on their responses, we could improve and create a product truly tailored to our consumers.
Finally, questions about type of menus, display of account details or product displays were asked and the opinions were taken into account. For this part, we understood that sometimes it might not be easy to give comments about on picture and questions could be vague. Therefore, we asked users to choose the option they preferred between two options. This allowed us to further understand what would be more popular and what design choices we should make while designing our web application.
Determining Demographic and Users
Personas and their journeys
From the survey, we identified two different distinct demographics that made up our two personas, Alexandre Pineault and Maddy Coffman. These two personas are very different from each other, in accordance to our survey results. This also helped us keep in mind that we needed to design an application that would suit a range of people.
Our first persona is Alexandre Pineault who represents the majority of our users of our web application.
- He is a young man in his 20s and works in the technology field.
- He is on many social media platforms and uses multiple intelligent devices such as a smartwatch and a Google Home assistant.
- He spends around 12 hours a day on electronic devices.
Alexandre is a person who is well aware of the concept of data and data privacy issues. He strongly believes that he has the right to own his data and to choose where/who he will sell his data to.
We then created a user journey in order to experience what it feels like to be in Alexandre’s shoes. His journey starts when he gets bored from working non-stop for two hours and he decides to go browse on FreeYourData to see where he could contribute with his data.
Our second persona is Maddy Coffman, a mother of 2 children. She is someone who is more reticent or vigilant about data privacy. She is a nurse and patients’ private information has always been something that she needs to protect. Therefore, she is much more worried about sharing data to the world. She has much less knowledge in the area compared to Alexandre and she hears countless rumors and news about data privacy scandals such as the Cambrige Analytica scandal. She wishes that companies would be more transparent about what data they gather and their intentions. She represents the segment of people who are scared and less receptive about giving out their data.
Maddy’s journey starts with her curiosity of learning more about data breaches and data privacy following the Cambrige Analyca scandal. She then stumbles upon FreeYourData’s website. The website catches her attention, not only due to its professional aesthetic and looks, but also because of its empowering concept that she can gain control of her data.
Design Choices
Given our users and their different mindsets to data privacy, we aimed to provide an inclusive and comforting experience to both types of users. A website’s aesthetic can be a greatly important part to a user’s experience, so before we could tackle the functionality of the website, we had to decide on our aesthetic and the feelings we wanted to evoke in users.
Our color palette, inspiration and font choices are detailed below:
Inspired by color theory, we chose a rich navy color as a background color, a bright turquoise and vivid purple as accent colors, and an off-white/off-black colors for text.
- We chose navy as it symbolizes trust, strength and reliability, according to color theory.
- We chose turquoise as bright blues are energizing and refreshing, and invoke a sense of serenity.
- We chose purple as it invokes a sense of wealth and luxury, due to purple’s historic association with royalty.
For our typography, we chose to use a sans-serif font, since these fonts are modern, clean and strong. They also display more clear on websites and devices.
Logo
Since data is precious, we decided to create a logo that evoked that sentiment. We found the imagery of a diamond to be an excellent conveyor of that. Additionally, since we believe that data is safest in our user’s hands, we decided to create a literal representation of this belief.
Our logo is a silhouette of hands curled around a diamond to symbolize how valuable data is and how important it is to protect it.
Sketches
Naturally, our next step was to sketch out our website’s initial design. We didn’t sketch every aspect of the website’s interface as we weren’t aware that we’d extend the website’s functionality during the time we created our sketches.
For our sketches, we fleshed out our splash screen, homepage, hamburger menu, account and marketplace pages. This helped us understand how our website would look.
Wireframes
Next, we focused on creating wireframes for the website. This simplistic technique helped us understand our website’s layout and where we’d place our background and accent colors. It also helped us figure out where to place our elements for ease of navigation and clarity of information.
It was during this phase that we decided we’d need to add to the pages we sketched. We realized we needed to create an “About” page to explain our what our website is about, “Create Account” /“Login” pages for users to create or access their account, “Complete Transaction” page where users can review their transaction before committing to it, and “Checkout” and “Confirmation” pages where users can confirm they’re selling their data and can see that their data has been sold, respectively.
Our wireframes’ layout was completed according to the data we gathered through the second part of our survey.
Looking at the results, it was possible to see that 45.7% of people prefer to use a hamburger menu to navigate through different pages. 50% of people prefer browsing through items organized and displayed as a grid instead of a list. Our choices of menu design and item presentation were greatly inspired by the results given by our survey results. This was done because ease of navigation was a priority for our users, and thus for us. To ensure transparency and to provide sense of trust, it is important that people can easily find what they are looking in a simple and intuitive menu. Therefore, our items are displayed as a grid to ensure that everything is well placed and organized without excessive text.
The layout of our account profile page and our checkout pages were also chosen according to the results below. An Account Details page was created as a full length page with collapsible sections. This ensured that it was not too clustered and gave users a simple and organized view of their account. Instead of going with icons, we have clear titles which make finding the correct section easier.
Final Design
These first few images depict our website’s initial interfaces for unregistered users. An unregistered user will encounter FreeYourData’s splash screen and can choose to read the website’s About page and/or create an account.
The About and Login pages are located within the hamburger menu to keep the interface clean and simple, while the Sign Up page can be accessed from the Splash screen, as well as the hamburger menu. Should a user choose to read the About page before creating an account, they can easily sign up by clicking the hamburger menu and clicking “Sign Up” at the very bottom of the menu.
These next images depict our website’s interfaces for registered users. A registered user will encounter FreeYourData’s splash screen and can choose to read the website’s About page and/or login in the Login Page. Should a user choose to read the About page before logging in, they can click on the hamburger menu to access the Login page.
Once a user accesses the Login page, they can then choose to stay logged in and then log in. Once they’re logged in, they’ll be greeted with a user homepage where they’ll see what has happened since they last accessed the account. Since users can choose to connect their accounts and have the platforms sell their data for them (with user consent, of course), they’ll see how their data was used and how much they earned for it.
The users can access their account in the hamburger menu and can either proceed to the following sections: Profile, Accounts Connected, History and Analytics & Statistics. Their profile contains their email, username, password and their payment method (through which users paid). Any of these fields can be edited.
The Accounts Connected section lists all the platforms they’ve connected to FreeYourData, by which their data is automatically collected and sold. They can choose to edit these accounts.
The History section lists a detailed order of a user’s transactions for a certain time period. They can choose their desired time period and see the data sold during then. They’ll be able to see the buyer, the money they earned, the date of transaction and how their data was used. From there, they can leave a buyer a review or rating, and they can also blacklist a buyer. By blacklisting a buyer, the buyer will never be able to purchase the user’s data.
The Analytics & Statistics section contains a graph detailing how much a user’s FreeYourData income has varied over time, as well as statistics regarding their earnings.
These next images depict our website’s interfaces for our marketplace. A user can click on the Marketplace page in the hamburger menu where they’ll be redirected to a page that lists all the offers that are currently available to them.
If there is an offer they’re interested in, they can click on the “+” icon and the window will expand to list the type of data required, how it will be used, how much a user can earn and the buyer’s rating. They can then proceed to contact the buyer, should they have any questions, or complete the transaction. If they do not want to complete the transaction, they can click on the “x” button. They will then be redirected back to the Marketplace.
Should they choose to complete the transaction, they will then proceed to a Confirm Checkout page where they will review the transaction one last time. They can then say “Yes” or “No”. If they choose to proceed, they will be redirected to a Confirmation page that confirms that they’ve sold their data.
Presentation
This video depicts the website’s flow for a registered user. It will clearly demonstrate the flow from Splash Screen -> Sign In -> Account -> Marketplace ->Checkout ->Confirmation.
Conclusion
This case study started with prior research on the controversial subject of data ownership to clearly understand the current situation and general thoughts. Then, a survey was conducted to further investigate how potential users of a Personal Data Marketplace would feel and/or fear using such an application. This brought us into a deeper understanding of the kind of users we would be targeting though the web application. Then we created personas and depicted their journeys, which allowed us to reflect on how the application would fit into a customer’s daily life, and its possible features/elements. We then designed sketches, wireframes and mockups. We always had to keep in mind that we were designing our application for our users with the goal that they would feel safe and in control of the personal data they would be willing to share to the world and how it would be used. This application aims to break the “ we do not own our personal data anymore” fear that some people may be struggling with.
