|




Product Design Lead
Google OSS 
Cyber Security 
Developer Tools
2022

SSF Scorecard evaluates open-source projects for security risks using automated checks. It was created by OSS developers to enhance the health of critical projects that the community relies on.
The Google Open Source, AI, and Supply Chain Security team was tasked with creating a dedicated site for the project, which was previously only hosted on GitHub.

  • Led UX discovery and design for a website introducing OpenSSF Scorecards and its underlying security concepts
  • Worked to translate complex, technical security signals into clear, accessible narratives for developers and stakeholders
  • Partnered with engineers and subject-matter experts to understand system behaviour and accurately represent it to users







  • Approach
    A close-knit team, including a product manager, front-end developer, copywriter, visual designer, and UX designer from Projects by If, collaborated with the Google team to design and build the site within six weeks.

    We began with quick branding exercises to define the kind of experience we wanted to create. Then, we conducted external landscaping and competitor analysis. We validated and iterated concepts quickly by working closely with our target audience (developers).



    We used branding exercises to define the kind of experience we wanted to create 




    ProcessThe team's unwavering focus was on ensuring that all information on the website was accessible and easily scannable

    We tested two UX concepts: A, a traditional landing page with links to nested pages, and B, a one-page with fixed side navigation inspired by old-school documentation sites. 

    Concept B was selected thanks to its superior ease of navigation and scannability



    The chosen concept is a one-pager with a clear taxonomy and information architecture, 
    resulting in simple and easy side navigation.




    It was crucial to get the information architecture right. Since we opted for a one-page structure, the section headers needed to be very clear. We collaborated closely with the content writers to ensure that each section and title were concise.






    Wireframe development for the chosen concept




    Outcome
    The visual treatment, with its unique blend of subtle shades of brown and minimalistic diagrams, brings a refreshing twist to the old-school developer’s site aesthetics and adds a touch of excitement to the project.

    Within a year of the website launch, the project's exposure on GitHub increased, with 1k new stars and 100+ new forks.















    Platform-level impact
    • Made opaque security concepts and scoring logic understandable to a broader, non-expert audience
    • Improved comprehension and trust by aligning explanations with how developers reason about software quality and risk
    • Established a clear conceptual bridge between technical system outputs and user understanding
    • Enabled wider adoption and engagement by lowering the barrier to understanding the Scorecards initiative


    Agency
    : Projects by If
    Product manager: Dev Morgan
    Lead product designer: Yarden Gur
    Front-end developer: Mark Dunbavan
    Visual designer: David Marques