Skip to Content

Work

Omidyar Network

A website that positions people as the true protagonists in our digital future.
closeup of two human faces

Founded by Pierre and Pam Omidyar, Omidyar’s vision is a world where digital technology fosters shared power, prosperity, and possibility, with people at the heart of decision-making for our digital-first future. Teal was Omidyar’s partner in bringing the evolution of their organizational strategy and new brand identity to life on a new website that showcases their distinctive approach at the intersection of policy, markets, culture, and technology.

Omidyar brand design system

A central element of the rebrand crafted by Omidyar’s brand designers, 20-something, was to visually emphasize the crucial connection between people and technology. They created a pattern generator as part of the brand process, and we worked closely with them to incorporate that pattern generator into the experience of the website.

This translated into special features for big brand moments and key website interactions. We replicated the pattern engine and isometric grid, ensuring it could be applied to photography and essential content, and influenced by users without disrupting the user experience.

Building a brand engine

In addition to key user interaction moments, Teal built a flexible and scalable design system that allows the Omidyar publishing team to scale with the changing times. Some of the components in this design system include a robust report builder and pattern generator built right into the CMS.

Robust Report Builder

  • The report builder transforms Omidyar’s in-depth PDF reports into prominent, easy-to-digest site content. The comprehensive components we designed and built offer the Omidyar team the flexibility they need to construct sections, slideshows, and compelling narratives that effectively communicate their mission. And for those who still want to access the full report, we continue to offer the option for users to download traditional PDFs.

    Every Teal team member whom we worked with has shown us that they are not only experts at what they do—from design to web development to SEO—but also able to lead, partner, and teach at every step of the way... we especially appreciate that Teal prioritizes accessibility, privacy, and security. With Teal’s support, we launched a new website that creatively expresses our visual identity, clearly represents our mission and values, and helps us stay agile amid changes to digital trends and algorithms.

    Abi Weaver

    Senior Director of Communication, Omidyar

    Pattern Generator

  • A highlight of this project is Teal’s development team’s innovative approach to integrating an animated pattern generator directly into the site. Unlike traditional methods that rely on movies or animated Lottie files, we worked hard to create a solution that renders precise band patterns. This allows for diverse variations, scales, and grids to be achieved through simple code modifications.

    Omidyar was one of those rare projects where we got to stretch what’s possible and push the boundaries of what we normally do. Experimenting with GLPL and Three.js to create interactive fragments reignited my love for front-end craft. It reminded me how powerful our dev team can be when we have the space to explore alongside clients who are open

    Headshot of Brandon Amey

    Brandon Amey

    Senior Front-End Developer

    Brandon Amey

    Next Project

    Knight-Georgetown Institute
    Image collage of white robotic hand in front of abstract blue shapes

    Knight-Georgetown Institute

    Building a boldly simple brand and website for a new organization that connects technology and information.