Flipboard

Surf

  • Flipboard
  • Challenge

    As social networks close their APIs, users are forced into silos, limiting cross-platform engagement and content discovery.

  • Solution

    Close collaboration with a design team creative enough to reimagine editorial experiences and technical enough to embrace the Fediverse.

  • Results

    Surf, Flipboard’s latest innovation, delivers a customized feed-driven user experience that embraces the open web's flexibility.

Flip the script. In 2010, Flipboard was Apple’s iPad app of the year for its innovative content aggregation amid social sharing’s rise.  It quickly raised over $250M, becoming a household name. Fast forward a decade: as media companies struggle and social networks restrict APIs, the demand for an open internet is stronger than ever. With over 145M active monthly users, Flipboard is ready to lead this change.  We teamed up with Flipboard to plan, design, and launch an all-new product, Surf, that leverages a novel open data protocol to curate content across platforms. Surf offers a customizable feed-driven experience that embraces the open web's flexibility: a nod to Flipboard's past success and a bold leap into the future.

  • Mobile graphic for the surf home screen

    Graphic of an isolated Surf Logo

  • Concept Design Get the Juices Flowing

    We were first brought on board to provide an external design perspective and push the conceptual boundaries of what the product could become through rapid ideation. We began by engaging in creative brainstorming sessions with the leadership team to identify exploration opportunities. Our designers then got to flex their versatile styles, engaging in concept ideation to envision forward-thinking themed feeds such as tech, travel, and the gritty underground of New York. As part of the overall concept exploration, we collaborated closely with the Flipboard team to help establish an overarching name — Surf — and developed the identity for the product, helping to establish it from the beginning as a cutting-edge product from a well-established brand.

  • Graphics that illustrate the ideation process for creating a custom logo
  • Design System Curating the Curation

    As the product’s vision evolved, so did our role in shaping its design. Integrating the vast array of open internet content into a sophisticated aesthetic posed a significant challenge. Surf’s dynamic feed-based interface required templates that could seamlessly accommodate yet-to-be-created content. To tackle this, our designers collaborated closely with Flipboard’s development team to create and refine a comprehensive design system featuring adaptive layout grids. This process involved defining high-level attributes like typography and spacing and dealing with nitty-gritty design decisions, such as displaying photo content of varying orientations, user profiles, article mentions, and threaded comments. Our team both influenced and designed in response to these varying technical requirements to develop a complex, rules-based engine that optimally arranges content in a design-forward solution.

  • Collage demonstrating the design process from low to high fidelity
  • Strategic Starting Point Building for Now, Planning for the Future

    Along the way, we recognized the need to distill the forward-thinking, big-picture work from the concept design phase into a strategic starting point for the initial release. This approach allowed us to lay a solid foundation for future iterations, ensuring the product could evolve toward the broader vision while focusing on immediate, impactful features. This thorough approach ensured that we designed for the now and the future of Surf’s unique vision and user experience.

  • Mobile phone with a card that says Create a Custom Feed
    Collage of custom feeds
  • Launching the Future The Beginning of Surf’s Evolution

    Our collaboration with Flipboard led to the successful launch of Surf, a product that redefines content aggregation in an era where user control and customization are essential. Central to this success was our team’s ability to rapidly ideate, sketch, and collaborate with Flipboard’s leadership, transforming ambitious concepts into practical solutions. From the early design stages to the final user-facing features, we balanced big-picture thinking with the technical realities of designing for the first version of a product. The Beta release is just the start, providing a solid foundation for Surf to evolve, push the boundaries of content curation, and redefine social engagement.

  • Key screens for the surf beta including a home page and an interior feed view

Summary

We designed Surf, Flipboard’s new product that embraces the open internet with a flexible, user-centric, magazine-like experience, leveraging open data protocols to make the web, once again, more open.