🌱
Zero-to-One Designs

Team

Michael Donohoe - Head of Product

Jody Mak - Product & Design Lead

Ryan McConaghy - Consulting Editor

Anna Rasshivkina - Sr Front End Engineer

Sophie Schmidt - Founder & CEO

The Problem

Create a robust, enduring, and distinct design system for storytelling and a new organization.

Context

Rest of World is a journalism startup founded by Sophie Schmidt, daughter of Eric Schmidt, the former Google CEO. The organization's mission is to report on the impact of technology on society, politics, and culture in underreported and underestimated areas.

When I joined Rest of World as the first designer and fourth employee, there was no website at all. Little-to-no design work had been done (which was also why I was drawn to the role). The CEO and our Head of Product had worked with a branding studio which provided the initial wordmark, one typeface, and some suggested color palettes.

My role was to evaluate, evolve, and expand on the entire design system from UX design, News/Editorial Design, to Brand Design.

Constraints

I joined in January 2020 and we were two and a half months away from our launch target with limited engineering resources.

We worked with a consulting editor, but the Executive Editor had not yet started, so we had not yet understood the full scope of our editorial ambitions, so we needed a system that was robust and flexible.

Navigating ambiguity and under a tight deadline, I was challenged with producing a design system that made a great first impression for our audience as well as designing something enduring.

Approach

1. Story Page. I started by creating a design system around where most of the experience is: The Story Page (also sometimes referred to as a Post Page or an Article Page). People come to read stories and we need to make the user experience of reading exceptional. This page is also where readers navigate to other articles and sign up to newsletters to stay connected.

2. Visual Identity. There was also a need to establish and articulate the visual identity of our brand. While we had worked with an agency for a wordmark, typeface, and color palettes, it needed to be refined to reflect the complex information architecture and the diversity of the stories we cover.

3. Synthesis. Both 1 and 2 are interdependent. The information architecture, layout, and grid of the story page are affected by typography and color choices.

4. Systemization. Once the story page and visual identity was in a good shape, this then informed other experiences such as the homepage, newsletter, social media designs, and other pages.

Designs

Reading experience, designs in production

The mobile experience was much more important to our international audience, where phones were the primary device. Not only was mobile important, we found that majority of readers had limited data plans, so a light and fast page was critical.

Rest of World was able to accomplish a visually rich reading experience while maintaining a light page. This was accomplished through lazy loading and image optimization, but also through design. We were able to cut down font file sizes by 50% by removing unnecessary glyphs in the original fonts. We also limited the number of font weights, and opted for 'faux' bold in some instances to cut down even more.

Rest of World's article page is one of the fastest in the world.
Check out the industry article page leaderboard at https://webperf.xyz/

Here's a snapshot of the spec file of the various content elements and variations (hurray for Figma symbols!)

The best way to experience the designs is through production. This system supports different editorial formats - features, reports, photo essays, illustrations, opinion, news. Check out these stories:

Returning the Gaze: Uyghurs in exile are fighting back against China’s techno-authoritarianism to locate their relatives who have been disappeared.
‍
How to bring a language to the future: For decades, it was nearly impossible to type in Urdu online. Meet the people fighting to digitally preserve its script.

A libertarian ‘startup city’ in Honduras faces its biggest hurdle: the locals

We need to regulate mind-reading tech before it exists: Chile's new "mental privacy" laws would lead the way in protecting neuro-rights.

Fifty percent of Facebook Messenger’s total voice traffic comes from Cambodia

Artists across Asia dream of becoming digital sticker millionaires



Style Guide
As Rest of World publishes more stories, embarks on new projects, and works with more photographers, illustrators, and animators, our visual consistency becomes more important than ever – especially as a new publication and brand.

I developed a digital style guide to articulate and memorialize the organization's visual identity. This was created with the intention of it as a living document as the identity evolved.

The style guide covered items from brand design, typography roles (story fonts, brand fonts, and UI fonts), to documentation of necessary spec information for photographers/illustrators working with us.

At other organizations, style guides often live internally and sometimes as a PDF. We were excited to make ours public, as a living document on a responsive webpage.
‍
Check out the Style Guide here >

Results

The goal of the project was to create a robust, enduring, and distinct design system for storytelling and a new organization.

Rest of World has now published over 500 stories from more than 75 countries using this design system. Stories that are not only diverse geographically but also in editorial format. The system continues to evolve but remains a solid design foundation for designers to build upon. It's equipped the newsroom to tell visually rich stories. Rest of World has since iterated on holds features in this design system to also increase recirculation, discovery, and navigation from the story page.

In its first year, Rest of World won several design awards from Society of New Design in Experimental Design, Social Media, and Art Direction categories.