![](/wp-content/uploads/2021/07/no-logo-01-300x110.png)
![](/wp-content/uploads/2021/07/no-product-01-1024x597.png)
Our Role
Fundraising
Product Design
Advertising
Platforms
Web
Deliverables
UI, UX, Branding
Website
nationalobserver.com
The Project
The National Observer is an independent online news platform based in Vancouver and Ottawa, Canada. It publishes investigative reporting, multimedia features, opinion and daily news coverage.The team and site have won numerous awards and their investigative reporting has affected policy change at the federal level.
![](/wp-content/uploads/2021/07/COPA-2016-Logo-01.png)
![](/wp-content/uploads/2021/07/Michener-Award-01.png)
The Brief
Codename Design has partnered with National Observer since its inception. At our heart, we’re digital product designers, and we’re at our best when we have soup-to-nuts involvement in a project… from strategy to pixels, and beyond. Before the National Observer, we had previously worked with this team to redesign the Vancouver Observer, a local online news site. With this strong working relationship, as well as our experience as the award-winning design team behind the user-generated news site NowPublic.com, we had some previous success to lean on with National Observer.
Other than building on some small parts of the editorial flow, and banking on some Vancouver Observer readership coming to the National Observer, we were building an online news platform from scratch … on a limited budget. However, since the site launched, it has both a steady rise in traffic and revenue, and has collected several awards along the way. Now, we continue to support the National Observer on an ongoing basis running experiments to optimize readership and revenue.
![](/wp-content/uploads/2021/07/no-slide-01.jpg)
![](/wp-content/uploads/2021/07/no-slide-02.jpg)
![](/wp-content/uploads/2021/07/no-slide-03.jpg)
![](/wp-content/uploads/2021/07/no-slide-04.jpg)
Pre-money. Post-truth.
While it’s dire times for the news business, independent journalism has never been more needed. These are the two sides of a fundraising story we needed to be able to articulate for National Observer. The first job was to convince impact investors that there was both the need and the hope of profit. Even with an award-winning investigative journalism team, that’s not an easy thing in the post-truth era. We helped craft a narrative that supported early-stage financing efforts by developing content and designing pitch decks, as well as other promotional materials. We worked on business plans and revenue projections to help secure funding. Simultaneously, we worked with the team to craft the initial strategy for content and audience development. We looked at ways to build readership quickly to get immediate traction out of the gate. Over time, as the funding came in, we turned to designing the site itself.![](/wp-content/uploads/2021/07/no-product-02-scaled.jpg)
Understand the Audience and Optimize for Reading
Based on audience analysis and technology trends, we built the National Observer site to be mobile-first. We placed a high priority on readability for mobile and desktop, running readability tests for a combination of typeface, font sizes, as well as line length and line spacing. For traditional print publications, the front page is likely the gateway to the publication. While this holds true for larger publications like the New York Times, smaller independent sites thrive on social media traffic. This means article pages are the real landing pages and need to undergo tests to increase their efficiency.![](/wp-content/uploads/2021/07/no-popup-01.jpg)
Get Your Long-Form Reporting On
For in-depth articles, we needed to develop a new section on the site that allows the editorial team to better make use of video, hi resolution photography and audio. To do this, we developed a magazine-inspired layout for multi-chapter long form content.Advertising and More
To ensure the National Observer advertising efforts perform well, we’re constantly testing conversion from on-site banners. Then we provide concept, copy and design for various campaigns.
![](/wp-content/uploads/2021/07/no-popup-02.jpg)
Experimenting for Growth
The next step is to test the National Observer homepage to see if increasing the amount of content will drive deeper engagement both from first time visitors and returning subscribers. These experiments are ongoing.Other Stuff
Working with a client over the long term means flexing many of our design muscles. Over time maintaining a brand and taking advantage of opportunities means venturing into other media. To help National Observer get the word out, we’ve designed everything from printed books and e-books, to t-shirts and bags.![](/wp-content/uploads/2021/07/no-books-01-scaled.jpg)
![quote-01.png quote-01.png](/wp-content/uploads/elementor/thumbs/quote-01-pa15096rkjneu7f4qxwhqaick78lp0wr6vndwvp8zm.png)
Codename
![quote-02.png quote-02.png](/wp-content/uploads/elementor/thumbs/quote-02-pa150a4lrdop5tdrlgb4as9t5l3ywq0hj0ave5nute.png)
![no-client-01.png no-client-01.png](/wp-content/uploads/elementor/thumbs/no-client-01-p9u3h5hw24ytk2ahn1wp2ocdkpal97bebep7xhqdx6.png)
Linda Solomon Wood, CEO, Editor-In-Chief, National Observer