Spotlight
A platform to know and control your data
My Role: UI/UX Designer for Dartmouth College class credit
Team: Myself and one other UI/UX Design student
Timeline: 2 week design sprint in June 2020
Motivation: Our world is becoming increasing digitalized and we have more data out there than we can understand. As an Engineering and Computer Science buff, I am deep rooted in this issue and wanted to explore how users can be more in control of their data to reduce cognitive load and increase digital democracy.
Problem
People release a lot of personal information online to different websites without realising it which can be unsafe if used incorrectly. People do not entirely understand data privacy and have many misconceptions as well but do not take the effort to understand or control their data. And that is where we step in with figuring out:
How might early career people be able to control their user data on social media platforms?
This writeup will cover the 3 ideas that we iterated through:
1. Make T&Cs more digestible.
2. Compare data provided across social media platforms.
3. Contextualize what specific data on a platform means and how it can be changed.
Solution
Spotlight: a Chrome extension and website that makes keeping track of and controlling your data on social media applications easy and safe.
Idea 1: Keyed In — Digestible Terms and Conditions
We started with making a user journey map of users starting to use online platforms and decided to concentrate on the pain point of having to accept terms and conditions without reading them.
Simply, T&Cs are long.
Research shows that 97% of 18–34 year olds do not read terms and conditions despite knowing that they contain crucial information. These young professionals browse a broad range of websites, not keeping track of where they have what information.
How might we incentivize users to better understand their data privacy?
I chose to focus on finding a product that would seamlessly integrate into users’ current experiences of surfing the web — a Chrome extension.
Our first product idea, Keyed In, summarizes the main points of terms and conditions that users care about without the confusing legal jargon (accompanied by disclaimers that this product was not a complete substitution for the legal documents).
After getting user feedback we added elements of progressive disclosure to make T&Cs more digestible than the long pages of text we see today: strategically placed icons, blurred sections, minimum time requirements, and rewards systems as seen in the mock up below.
We ran this idea by our in-industry design mentor, a Director of Product Design at Intercom who coincidentally has had experience working with Facebook’s Privacy team. She pointed out the obvious flaw in my plan:
“People have to accept Terms and Conditions no matter whether they read it or not”
Idea 1 takeaway: The need is for change in behavior and not just understanding.
Idea 2: Uncovered — Data across platforms
Our design mentor helped us realize that Terms and Conditions are simply a barrier before the main experience using a platform, and that companies rather minimize the set up time than add to it.
We switched paths to focus on empowering users to better control their data. We narrowed down our scope from thousands of websites to social media platforms as our user group expressed the most concern about them.
To integrate into the current user experience and provide the ability to compare data across platforms, we conceptualized a website and a Chrome extension that is able to tell users:
- What private information is on the platform?
- What can be done with this information?
- Who can interact with this information?
- How long will this information persist?
‘Uncovered’ collects and reiterates this information and allow users to compare their data privacy information and settings across different platforms. This provides users a comprehensive understanding of the different websites on which their data lives. To nudge users, it also includes updates detailing changes in privacy policy and data breaches on both the website and the extension.
Lorie Loeb, Dartmouth UI/UX Professor, suggested that we keep the content on our screens at a manageable level, emphasized the importance of nudges and stressed on the core concept: magnifying users’ data privacy on these platforms. She prompted:
“Would users want to compare their same data repeatedly across platforms or compare with other to see what is ‘normal’ by understanding how much data others share?”
Idea 2 takeaway: Compare data across society not across own platforms
Idea 3: Spotlight — Contextualize data on social media platforms
We started focusing more on placing users in the context of their peers, which serves as its own nudge because of human desire to run with the pack. We shifted all the statistics on the website to contextualize the user’s data by comparing it to their own data and their peers’.
We modelled our Chrome extension on FontNinja. In the FontNinja extension, users click on the icon to activate it and then can see the font breakdown of whatever text they hover over in a window that appears by the extension (in our case details of the data they share). We also decided to include an update screen in the extension for any data policy updates.
The idea of uncovering one’s data privacy still remained relevant, but we wanted our metaphor to be something that can highlight the importance of really figuring out where the user’s data is and how they can gain control of it as much as possible much after they’ve agreed to Terms and Conditions page that they probably did not read.
“Who Done It…Discover…Detective…Spot?”
“Oh my god we are shining light on the data that has been in the dark for so long!”
“Let’s call it Spotlight.”
Final Product
Feature #1: Presenting content
Through user testing the prototype, we finalised what data is presented on Spotlight for each data type and website:
- What private data is on the platform
- Any details about that information
- Who can see this data
- How long it lasts on the website
- How the amount of user data changes over the years
- How it compares to peers
- Real scenario — added the idea of physical privacy, after a user exclaimed:
“I would be so much more scared of revealing data if someone said billions of people knew where I lived!”
This revealed that a statistic like 2.6 billion people seeing the user’s data is much a larger nudge than just saying that their data is public. After getting positive feedback from our mentors, we pushed this idea further to explicitly show what harmful situations data could be used for.
Feature #2: Effective Navigation
Maintaining a decluttered navigation system, Spotlight queries this large amount of information through a sidebar and a top nav bar for four types of combinations:
While this amounted to iterating through many screens, it reduces clicks by allowing users to go through their data without having to change entire pages. The top search bar is a typable dropdown so that the user’s flow of changing the platform that they are seeing data of is much faster.
Easy navigation to the chosen platform and its data policies is also provided so that if the user sees a change they wish to make, they can immediately be redirected to the settings page instead of having to figure out the process themselves.
Feature #3: Graphical representations
Because our main nudge is data and statistics, finding appropriate graphical representations was something we brainstormed and mocked up extensively:
- Line graph to show data change over time is common and is easily read without any cognitive overload
- Data amount percentage circle, though users may be tempted to finish to a 100%, provides an easily-digestible visual of where one stands compared to others
- Pie chart is the simplest way to show which settings what percentage of people have while simultaneously adding more color to the page.
Together, these data representations show the user how much data is normal to put out into the world and how visible this information is to others.
Feature #4: Chrome extension popups
The extension is the component of Spotlight that allows users to gain control of their data since the website is more about understanding that data. When the user hovers on their information they are given real-time feedback on what data setting they have compared to others and how they can change that.
Additionally, if the website updates a user data policy, the user is notified of it by the Chrome extension popping up when they are browsing the site. This allows the user to stay updated and informed without having to delve into any legal jargon.
Feature #5: Style Guide
We created a style guide of buttons, textboxes, text styles and sizes, and — most difficult of all — color. We attempted to combine bright colors like bright yellows with darker purples and grays to emphasize the contrast our product creates, but we had to play around for a good luminosity and saturation. We chose purple as it was dark enough to contrast yellow but still a good mix between formal and playful and was neutral for most people in the young professionals user group.
Usability testing
After some extensive testing we improved a few aspects of Spotlight:
- Having design and software knowledge, we wanted to make the sign up of the Chrome extension and website as tangible and real as possible, which led to complications on how to navigate and set up the two halves of our product. We, hence, created modals, error states and tutorial screens, to improve the flow. While it increases clicks for the first time user, it is the optimal realistic solution we found.
- Simpler changes like labelling the combo boxes and navigation panels.
The effort put into the UX for the idea of the product, careful creation of hover states in UI, and encouraging language was well received. We also retained fun aspects of the product.
“I loved the metaphor to spotlight and its strategic placing of the logo on the extension to literally shed light on data!”
Let’s make it a reality!
If we were to go on to making this website and extension a reality, we would have to jump through legal hoops from social media websites in order to interact with so much data which is also ethically questionable. Spotlight would need to be granted permission to read data from every social media platform that exists to populate information for it but no website currently allows others full access to its user database.
However, we can improve on our learnings from usability testing to include more drastic changes we were unable to complete. We can possibly move to a solution we initially discussed of having Spotlight be a central location where users put their data and use it to log in other sites almost like a ‘sign in with Spotlight’ instead of ‘sign in with Google’. This always our site to only provide platforms information that the user chooses to allow.
Conclusion
This project tried to simplify a very complex topic which we should be mindful about the next time we are choosing to solve a problem. We will make sure to concentrate on an even smaller aspect of the problem. It was also challenging trying to balance our developer and designer knowledge to create something exciting while trying to make it feasible, a balance I hope to improve on.
Gratitude to:
Lorie Loeb — Dartmouth College UI/UX Professor
Natalie Svoboda — UI/UX Assistant Professor
Jeanne Annpark — UI/UX Teaching Assistant
Industry design mentor, Product Design Director at Intercom
Samiha Datta — Teammate
