case study : facebook security portal

Altering the behavior of an industry.

How do you create a platform to change the mental model of information security professionals to start openly sharing information? That was the question myself and a small team of designers needed to answer.

my role

Scenarios & stories
System modeling
Ideation & sketching
Wireframing & testing
Experience design (UX)
Interface design (UI)
Motion prototypes


Responsive web

Facebook's security team decided they wanted to redefine their industry by creating a secure, global platform for sharing knowledge among peers. I led the visual design while closely partnering with client stakeholders, product managers, and the UX team.

As a cybersecurity professional, you work tirelessly to uncover and patch vulnerabilities across multiple platforms. Due to the nature of this work, your knowledge is a closely kept secret, often causing efforts to be duplicated across companies and verticals. Leveraging insights from generative research, concept validation, and user testing, Harbor's beacon was lit.

Getting to know the users.

The original product concept the team from Facebook came in with focused primarily on sharing best practices. Essentially, wanting to become to source-of-truth for how the best companies in the industry are protecting themselves, or identifying new threats.

So collectively, we journeyed to find out how security professionals communicated — both internally and across other companies. This turned out to be a smorgasbord of email chains, private chat groups, and personal conversations. If you weren't in, you were most definitely out.

This made it strikingly difficult for new recruits to feel connected or mentored, and was a pretty significant barrier to rising up the ranks.

We interviewed professionals from multiple industry-leading companies and discovered limiting the platform to 'best practices' impeded their ability to conversationally exchange ideas. The team discovered we had to pivot. Ironically, this needed to be more social, built around conversation, not static documentation.

Setting a few ground rules.

As Harbor’s strategy continued to pivot, so did its design. I continued to refine the concepts with research in-line with the business goals. I also came up with a simplified information architecture that focused on content creation and discovery. Content, as they say, would be king.

I continued sketching countless ideas and brainstormed various solutions with my team, creating (semi) low-fidelity wireframes and prototypes to test. The outcomes of this was a structure and feature prioritization that highlighted content moderators, personal brands, and anonymous questions that would act as conversation starters..

We interviewed professionals from multiple industry-leading companies and discovered limiting the platform to 'best practices' impeded their ability to conversationally exchange ideas.

The use of moderators ensured that any information shared with the community was safe and acceptable to ship. We baked in a simple set of permissions to streamline the drafting, editing, and publishing process within a single organization's account, allowing professionals to share quickly with those they trusted most.

Establishing an identity.

Originally code named ‘Security Portal,’ I worked with our brand and creative director to settle on Harbor. This concept was all about communicating a safe and secure platform for professionals of varying experience levels to confidently discuss their unique experiences and be able to carry them across different roles or organizations.

“JP has an uncanny ability to gather overlooked insights and see opportunities that reinforce our vision.”

julian n.  |  product manager, facebook

C'est la vie...

Ultimately, all the work the team delivered never actually saw the light of day. As with so many individual initiatives, the value we had created in Harbor wound up being similar enough that Facebook decided to merge its tech and concepts with two existing products — ThreatExchange and Facebook Workplace.

If I'm being honest, I was surprisingly comfortable with this turn of events. It was never about the screens I designer or the cool permissions flow we developed — it was about the problem we set out to solve. And I believe we did that. I can walk away with confidence knowing the work I and the team did had a big impact on the foundations of those two products.


This engagement spanned nearly two years and was crafted in partnership with the incredible talent @Handsome. Contributing partners included:

Jonathan Lewis, Anna Krachey, Annette Neu, Cullen Wilson, Brandon Termini, Adam Deutsch, Tate Chow, Christiana Guzmán, Mike Arpaia, and Julian Nagler