Privacy badger onboarding

PB banner.png

Privacy badger ongoing onboarding

Privacy Badger is a browser plugin that allows people to control how they are being tracked across while browsing the web. As you may or may not know, there are cookies and all sorts of things in place that lets advertisers and companies know what you look at so that they can target advertising and show you more of what you've looked at. Privacy Badger lets you be the judge of which sites get to track you and you can toggle the permissions as you see fit. I was tasked with redesigning the onboarding flow as it was a 16-step process with a carousel that was not responsive. There was also a need for easy translations as we have an international audience using our tool, so the text would have to be separated from the graphics for easy editing.

16 steps! It's doubtful most people go through it all.

16 steps! It's doubtful most people go through it all.


Determined to get rid of the carousel and cut down on those steps, I met with the project lead to discuss how to boil down the information as well as present new graphics that would visualize the main points. We decided on one page long scroll that would be concise. I also separated out the text from the graphics so translation would be possible.

Screen Shot 2018-07-18 at 4.09.31 PM.png

type exploration

My art director and I decided that we needed to refresh the typography so I did a little type exploration. We ultimately decided on a heavy slab typeface called ChunkFive.

Screen Shot 2018-07-18 at 4.20.49 PM.png
Style guide

Style guide


final onboarding

The finished onboarding took in the feedback from the project team and was implemented fairly easily as it was mostly text and images. It was mobile-friendly and allowed for translations. We also published a blog post you can read which goes into some detail about how this project came about. While I felt like it was an improvement on the old onboarding, I wish I had more time to incorporate usability testing to validate my decisions. 

PB onboarding – 1.png