A Data Visualization and Data Management Web App

As a Product Designer for Rita Personal Data, I have worked on the design of the web application which enables users to upload their data files from Google, Instagram and Spotify and visualize it in a dashboard.
Users also have options to control some of the data settings.

Role

As the only designer in the company, I led the design research to ensure all the required tasks are described, and done on time and in accordance with user and business goals. My responsibilities included user research, aligning stakeholders on product goals, information architecture, visual design, prototypes, user testing and creating design guidelines. I worked closely with the business and the marketing team, as well as both front- and back-end developers to ensure we are accurately aligned on all aspects of the product.

Challenge

Finding a way to adapt the design to changing requirements of the project was a challenge because the project was in the making at the same time as we were designing the product. Due to limited time, it was challenging to produce a user-friendly and understandable interface with limited amount of user testing. Another challenge was to accurately communicate the complex capabilities of the product in a digestible way since it consists of a lot of data visualization and various data categories that had to be organized in a way understandable to a layman.

Goals

Project goals

  • 💻 Develop a platform (web-app) where users can easily download their data and visualize it through the dashboard.

  • 💻 Provide the users options and features to be able to control their data, i.e. to be able to restrict companies that have their data and manage ads and other settings.

  • 💻 Through blog posts and social media, educate users about their data and current data regulations.

  • 💻 Identify problems and users' pain points, as well as features that they find useful in order to implement them in the mobile app later on.

  • 💻 Increase the number of sign ups, get users to join the community, introduce the project and establish a user base for the mobile app launch.

Design goals

  • 💻 The interface needs to be easily understandable and all data needs to be shown in an easy way so that users are not scared by the graphs.

  • 💻 The interface needs to be informative and provide insights into users' data without being too overwhelming. It needs to provide the users the option to control their data in an easy way.

  • 💻 The design needs to be accessible. It needs to be legible on all devices, organized so that it is readable for everyone and not overwhelm the users with information.

Project overview

Defining the problem

A lot of Internet users are not aware how and where their data is used and collected. (According to research by European Union Agency for Fundamental Rights, 51% of Internet users are aware that they can access their personal data held by other companies) It can often be very confusing and abstract for users to understand their data, manage it, or adjust their privacy settings. Additionally, many users are not aware that they can adjust and manage ads and control which ones they want to see and how their information can be used for targeting. Many users are also not familiar with GDPR and current data regulations.

Streamlining visualization

In order to visualize their data, users would first need to download it from Google's, Facebook's, Instagram and Spotify's website and then upload it into the dashboard. Their file would then get processed and the data would be visualized in a simple, structured and organized way with the help of graphs, charts, tables and lists so that everything is immediately understandable. Since data points vary for each platform, a different organizational system and different information architecture had to be developed for each platform.

Features that enable control

The original features that the web-app offers are restricting companies' access to personal data by choosing companies you want to remove your data from, managing ads, monetizing your data (exchanging data for coupons and discounts) and managing privacy settings directly from the dashboard. We had to make these features understandable to users and communicate exactly what they do. For this purpose, we had tested not only the design but also the copy.

UX process overview

Comparative analysis/Market research

Since a lot of similar products are emerging in the market, we did a comparative analysis to establish and identify what we can offer that is different from our competitors, as well as to see what existing pain points and needs their users have. From analyzing other products, it is easier to come up with a strategy on which feature of the product to give emphasis to and to make assumptions which one would have the most value for the users.

An analysis of Jumbo App - a major competitor.

Iterate fast to ensure the best version of the product

Since the company is an early-stage startup that is actively looking for investors and supporters, this time-bound project had a defined set of business requirements. However, when it comes to design and product requirements, they weren't set in stone and were subject to frequent changes. Before I joined the team, the developers used a template to build the initial version of the product. Not having time for a rigorous discovery research, I began redesigning the web-app from the beginning and conducting user testing along the way to confirm assumptions and iterate on the design. With users feedback we were able to iterate rapidly and drive the project with design. Through discussions with stakeholders, including potential users and investors, we gathered some data and information which we used to decide on the deatures and to identify use cases, scenarios, pain points and used these to create hi-fi prototypes. This approach helped us to validate assumptions and iterate on the design at the early-stages and examine usability through various stages of the development.

Identify user needs through design

Due to tight deadline, we started to develop first mockups right away and present them to potential users and other stakeholders. We conducted interviews with them to examine usability, identify their needs and pain points and identify which features they find the most valuable.

User need #1

Easy and understandable way to consume overloading information.

Accessing information about what data companies collected is confusing. I wish there was a simpler and easier way to see it all in one place.

SOLUTION

For an average user who is not very tech-savvy or doesn't know where to look for information about what companies collect about them, navigating and looking through their data privacy settings can a major pain point.
Our solution to making this information transparent was to organize and visualize it in a clear, informative and digestible way.

User need #2

Controlling data directly from the dashboard.

I am not sure how I can improve the privacy of my data and how I can manage it. To be honest, I rarely look into the privacy settings, but I do get annoyed with constant ads and with the feeling like my phone is listening to me.

SOLUTION

In the same way that accessing data and understanding it can be difficult, adjusting privacy settings, managing targeted ads and requesting companies to delete their data can be a challenge too. In order to facilitate that, we have implemented some features that enable users to do it directly from the interface. Having it in one place like this instead of having to navigate through settings is a solution that is much clearer to the users.

User need #3

Be more informed about which companies collect which data about me and show relevant information.

I was surprised to see that Facebook and Google collect so much information about me like my interests, location points and even record the audio. I wish they would be more transparent about it and allow me to restrict it.

SOLUTION

A lot of our testers were surprised by the information that companies collect about them and expressed that they would like to be able to know what companies use to target them with ads. We have asked our early testers to pick which data points they deem the most valuable and decided to include those in the final version of the product.

Reflection

One of the biggest challenges of this project was the time constraint and developing the design while the exact project and design requirements were not 100% established. I have discovered that it is important to implement a design system, support the project through documentation, validate assumptions through user research and user testing, as well as work closely with the developers to make sure that the implementation goes smoothly. I have also realized that communicating the design to stakeholders is not only about presenting what has been done so far, but is also an opportunity to get additional feedback and align on the vision.

Another thing that was very important was to build a community of potential users who have proved to be a lot of helps and a source of valuable feedback when we had to validate design decisions quickly.


One thing that could've been done better was to set all the requirements early on so that we don't waste time designing features that are not going to be implemented. Another important thing would be dedicating more time to user flows and user journeys so that we can establish and calculate the project scope more accurately and more early on.

A screenshot of part of the design system created for the web app.