Passport is a browser extension I created that replaces the new tab page with beautiful images, quotes, and a daily intention for those who want to practice mindful productivity. I designed it to be unobtrusive but something that would encourage you to pause on occasion as you go about your workday, to give you something to think about, and a space to breathe. It’s available for Chrome, Edge, Firefox, and Safari for macOS.
The Chrome Web Store team granted it the Featured badge. Here’s how they describe extensions they grant the badge to:
“The Featured badge is assigned to extensions that follow our technical best practices and meet a high standard of user experience and design. Chrome team members manually evaluate each extension before it receives the badge, paying special attention to the following:
Adherence to Chrome Web Store’s best practices guidelines, including providing an enjoyable and intuitive experience, using the latest platform APIs and respecting the privacy of end-users.
A store listing page that is clear and helpful for users, with quality images and a detailed description.“
Source: Google blog
This is the first thing I’ve ever designed on my own, rather than collaborating with an actual designer. I’ve found that even more so than engineering, it’s an intensely personal exercise. When you approach building an idea just as engineer, you outsource parts of the experience to the expertise of others: maybe it’s the founder, the marketer, or the designer, but most often in our work someone else is responsible for some other element of the project. Owning the full widget really makes you responsible for all of the outcome. It’s a bit of a vulnerable feeling. And it’s not to say I think I’ve found the end state and am “great” at any one of these jobs, but rather that I took a small step on that journey that I feel good about.
All of this came together into an experience I think users appreciate for its simplicity and beauty. I’m grateful the Chrome Web Store team agreed!
How it’s made
I actually designed it as if it were a webpage, so the initial prototype was done in Framer. If I were doing it again I’d use Figma, as I understand how to customize the primitives more clearly there. However, Framer was great for mocking up the general design quickly and seeing how typography would work to express my intent.
On the engineering side, it was made with React and that’s about it: everything else was intentionally kept as vanilla as possible. Some engineers love reinventing the wheel, others use so many 3rd-party scripts that you can never make the experience as performant and custom to the vision as what you’d want. I made an intentional trade-off to be in the middle: I use a view library, React, to handle most of the heavy lifting, and writing the rest in vanilla JS using native browser APIs for things like modals so that it would never be an experience you’re stuck waiting for.
Last but not least, I’m mindful of users privacy. While I’m interested in tracking usage broadly, I’ve intentionally kept a privacy-first approach. For awhile analytics were handled by Plausible, but the limitations in understanding usage were too much, so I struck a balance with an EU-hosted Mixpanel project.