Responsibilities I had as the Lead UX designer for the Privacy and Security team included research planning and facilitation when needed, feature definition, experience flows, sketches, wireframes and prototyping (invision). I did final visual design on some pieces and collaborated with a visual designer for final visual execution of other pieces like icons, colors, etc.
Tracking Protection Project
Over the course of a year, I lead design work on a high profile company initiative to stop website tracking for users browsing privately in Firefox. The experience consisted of educating people about website tracking and helping them understand when sites were tracking them. As part of the work, we conducted diary studies with users to better understand their mental models around website tracking and also gauge how they interpret website breakage when tracking is prevented by Firefox. The final design incorporated research findings to provide a clear onboarding tour of this feature from several touch points and a browser UI that was not disruptive to the normal browsing experience but gave feedback when trackers were being blocked on the user's behalf.
Private Browsing Mode (Original)
Enhanced Private Browsing Mode with Tracking Protection
Tracking Protection Panel and Sub-panel
Control Center Project
In parallel with working on Tracking Protection in Private Browsing mode, I developed a new design organization for the area of the url bar where users can see more information about the site they are on. For each site a user visits, they can see if it has been verified as secure by a third party and also what permissions they gave the site access to such as microphone, video camera or location. After auditing the current feedback users get in the url bar and the panel that opens after clicking on the lock icon, I consolidated the number of states and reducing the types of icons used to make it more clear for users at a glance whether or not the site was secure. For advanced users, an information panel with an overview and a deeper view of the site's security information was accessible to help explain any differences in state. A second version of the designs below are in progress to incorporate site permissions.
A nice medium article was posted here by my team's engineering lead Panos: https://medium.com/@pastith/feeling-safer-online-with-firefox-b9fe13af6600
Previous Versions of Site Information Panel and Permissions Dialog
Updated Security Panel (Control Center)
Major changes included 1) the addition of an "i" icon (soon also added by Google chrome in their url bar) 2) Showing permissions icons with a strikethrough if the user does not grant the site a permission 3) badging the "i" icon with a dot when permissions are allowed and with a red dot for a live video or audio permission grant.
Updated Permissions Dialog
Main changes include removing the X to close the dialogue, requiring the user to engage with the questions they're being asked. Removing drop-down choices to simplify the number of options a user is presented with. Addition of a check box to enable a user's choice to be permanent. Check box is unchecked by default to protect user privacy and not support accidental granting of permanent permissions.
