Case study: browser privacy dashboard
UX design case study for DuckDuckGo
Summary
For my review of DuckDuckGo’s privacy service, I conducted two in-person interviews and four remote interviews where I tried to understand how effective the current privacy dashboard is.
Each participant used the chrome browser extension and had been new to DuckDuckGo’s service. During my interviews, I primarily observed their behaviour and questioned their actions.
The interviews gave me good insights on each screen of the privacy dashboard. After observing their behaviour, I found the following key pain points:
1. Uncomprehensive rating system
2. Counterintuitive interface interaction states
3. Misleading iconography
4. Insufficient protection analysis
5. Non-user friendly copy
I then turned these pain points into opportunities and created solutions for them.
Homescreen
Grading system
Despite the participants’ various backgrounds, from the first moment, each of them understood the applied colour-coding. Red for bad and green for good. Nevertheless, every contestant searched for an explanation of.
- “Why do I only have ‘B+’ or ‘C’?”
- “How can I improve it?”
A couple of the participants were confused about the American inspired grading system, which led some of them to try to check for an established grading standard. Most feedback was “[…] to get rid of this grading system and or change it to something else. […]”.
For 4 out of 6 of the participant’s English is their second language and the wording “enhanced” in “Site Enhanced From ‘C’ ” created some comprehension issues due to its rare usage in their daily communication.
To fix the grading controversy by applying a universal expression, I went for a comparable number-based grading system (x/ highest score).
Further, to emphasize the impact on the user’s privacy after installing the extension, I also updated the copy under the URL from “Site Enhanced From ‘C’” to “Privacy Before DuckDuckGo’ 3'”. Again, by engaging in a plain and simple manner, it draws a picture of reliability, transparency and trust.
One of the other recorded issues was that for none of them was it evident to excess the grading breakdown screen by clicking on the grade. Therefore I added a hover state to it which intuitively signifies access to further details. (image above)
Chrome extension icon
It occurred as well that the extension button “B+” got overlooked in the extension bar, because of the interplay of its detail overload in a tiny space and suboptimal user circumstances, especially participants who were sitting far from their screen or who were using a big screen or who got a bad vision.
By implementing just a simple one-digit number in the icon in the extension bar, it turns friction into visibility, communicates website privacy level instantly and provides quick user access.
Privacy grade breakdown
During the interviews, the participants were not able to understand what was happening or why the score was B+.
Some participants expressed confusion about the cross icon as they thought it was not blocking anything.
The elements above the breakdown in this screen are identical to the home screen, which causes confusion as the user does not understand immediately what the content below represents.
To make this screen more understandable, I have made a few changes:
- By replacing “Site Enhanced From ‘C’ “ with “Privacy Score Breakdown” and utilize it as a heading, which was missing before, a clear context and structure take shape.
- On top, I replaced the cross icon with warning icon to communicate quickly and updated the copy “Enhanced Grade” to “Improved privacy score” as it’s easier to understand by a non-native English speaker.
- Additionally, I also added a link to another page which shows the breakdown of the score. As mention earlier, many users were curious about how the score was calculated.
Unknown Privacy practices
Unknow Privacy practices icon
Here I replaced the previous with a distinct question mark sign to match the text on the right to lift the participant’s confusion about the status of “Unknown Privacy Practices”. As well as “Unknown privacy practices” got changed to “No Privacy Practices Found”.
Privacy practices state: unknown
To make this screen easier to understand quickly I changed two things
- One, I made the icon more relatable to the tile “Unknow privacy practises”.
- Second, I made some changes to the typography by making “No privacy practices found” more significant and also giving it more emphasis by adding a background. This will quickly grab the user’s attention and help understand what is happening.
Privacy practices state: Poor
In the notes to the “Poor Privacy Practices”, the icon displayed on the home screen still does not convey the importance and danger. I replaced it with a warning icon due to its clear signal that it is terrible and everyday usage.
Top offender analytics
The top offender’s analytics is also something which got added to the “not clear-list”. They looked at it; however, they were not able to tell what was going on. They were able to recognize some names on the list but not all of them. To make this screen more clear, I made the following changes:
First, I improved the copy to “Show protection report” and redesigned its structure. As the user installs DuckDuckGo, he or she will be informed about how many trackers in total have been found and blocked since day one. This will also inform and remind users that the Duckduckgo is doing its job protecting their privacy.
To simplify the analytics, I categories the type of trackers( in my usage of the extension, I was able to find three types: advertising, site analytics and social media).
I put the total number of trackers blocked on top between inside the pie chart with different colours to capture its insights quickly.
If the user wants to explore a particular category further, they can click on it, and it shows the list of companies in that category. In my design above, I also provided a small explanation about the tracker type to educate users as well as I removed the “Reset Global Stats” as none of the participants wanted to reset their stats there.
Privacy score explanation
In general, participants tried to find out more about the compositions of the grading system by searching on DuckDuckGo or Google. Wherever they looked, they were unable to find good results.
To solve this problem, I added a link inside the setting dropdown.
When the user clicks on the link, it will direct them to another page where they can read about how each score is calculated.
Each score has its explanation next to it. Providing this information will likely help them get a better understanding of the privacy measures and helps to promote transparency in your practice of grading.
DuckDuckGo mobile Privacy Dashboard
To access the privacy dashboard on the iPhone at first glance, it was not immediately visible, and I was only able to find it after a few seconds. But as I started using the browser, the privacy grade sits in the background and looks disabled even if I am visiting a “D” grade website. I believe users should be warned in a better way when they visit such websites. To avoid any misunderstanding, I applied colour to the privacy icon (image above). I also added a number based score along with the colour. Just like on the desktop, this will immediately help the user to identify the level of safety and privacy.
Besides other changes, I also found some room for improvement for the mobile privacy dashboard. To seek consistency in look and feel to the mobile app I did my best to apply all taken measures of the desktop extension to it.
Just like on the desktop extension, on the mobile app it is not clear how to access the privacy score breakdown. In the current version, the arrows, especially with the grey background, are not legible. To fix that I made the arrow darker to inform users that there is more information on another screen.
When I interviewed participants, everyone understood the wording “Encrypted connection” straight away, and I would suggest keeping the same copy on the mobile dashboard. To make it even easier to understand, I updated the icon which has extra detail representing the secure connection.
Prototype
I have created a prototype using Axure to demonstrate the changes I suggested above.
The prototype is for the desktop extension. https://88993d.axshare.com
Conclusion
In today’s day and age, people are not as aware of the shady privacy practices and how their data is being harvested. As a designer, I believe we can help communicate this and make people more aware of it. I also think privacy should not be limited to one group of people. It should be a universal human right.
Overall I believe the current implementation of the privacy dashboard on desktop and mobile is a good start, but there are still some gaps which create friction, and by applying some design changes, as suggested above, it will help improve the experience of DuckDuckGo.
