Case Study

Barna

Envy helped Barna find a fresh voice from a redesigned online presence and data visualizations.

Dray Lacy John Wilson

Project Details

The Client

Barna Group, a leading research group based out of California.

Our Barna Group clients

Project Goals

  1. Improve the reading experience on multiple devices

    Barna Group creates information-heavy content that wasn’t helped by outdated design and a poor reading experience on mobile. Rethinking how to make their articles and research more friendly and accessible to more devices would improve readership and reach.

  2. Put data first

    The meat of Barna’s research was buried in article archives. Placing beautiful graphs and charts right on the home page could immediately showcase Barna’s talents and efforts.

  3. Appeal to a younger demographic

    Barna’s reach over the past couple decades has been growing, but has been limited to an aging demographic. By making their research more accessible and shareable, Barna hoped to tap into a younger audience without sacrificing the depth and quality they had built a reputation for.

Research + Prototype

Digesting the Data

In culinary, good presentation elevates good food to greatness, while sloppy presentation can make even the tastiest dishes unappetizing. In this regard, research isn’t that much different. The Barna Group is known for quality research, but raw research isn’t palatable to the average consumer without a little heat and some artful presentation. We took stock of Barna’s entire kitchen before we started preparing new dishes for their menu.

Barna, pre-Envy

Presentation Exploration

Starting with Barna’s existing content, we sketched out the ideal way to digest their main offerings: statistics and longform analysis. There are paradigms and norms, but often the quickest way to figure out the best layout is just exploring all the options available. Yes, these are John’s actual sketches for Barna, not a staged stock photo.

Initial sketches

Wireframes

Taking ideas into digital design, grayscale wireframes were created from the strongest layout concepts. Realistic copy, data, and titles are inserted to make sure the layout holds up to a wide variety of content.

Wireframes

Completing the Pattern

Sitemaps and dummy content can only go so far. In order for an information architecture plan to truly succeed it has to work for real content on even deep pages of the site. With a site this large, every flow and experience must be given attention so the whole site is considered and cohesive.

Shopping cart wireframes
Design + Build

Data Snapshots

Every research article on the site now features a snapshot: a quick, at-a-glance overview of the research’s core finding. Clicking on a snapshot from anywhere within the site launches the full article for users to dig deeper.

On-brand data design

Readability First

Special consideration was taken to balance data visualization with a great reader experience. The site was typographically optimized to look beautiful using Georgia and Helvetica—two fonts commonly available on most computers. Because users don’t have to download a webfont stack, the end result is a beautiful reading experience that’s also lightning fast, even on slow connections.

Reading experience

On-brand Visuals

Good design draws attention to the right areas. Despite overhauling both the design, front-end code, and back-end architecture, the launch website gave Barna a louder, clearer voice to publish their content. The new website is decidedly more “Barna” than its predecessor.

Showcasing story media

Responsive Website

Creating a fully-responsive website allows users to access the same content on desktop, tablet and even mobile devices without any need to zoom in and out to accurately navigate the website.

Responsive setup
Deliver

Results

Barna’s most readable website yet

A content-first approach yielded a single column layout with plenty of white space. This keeps ads from competing with the main article and content. Data snapshots pulled outside the text makes the articles easy to skim and beautifully showcases the research.

Data at readers’ fingertips

Data snapshots allow the user to quickly understand a key piece of information that is being communicated. If the information is interesting to them, they can simple navigate directly to the article it was pulled from to read even more about the subject.

Social media feedback

Feedback was positive

The proof was in the pudding: social media comments were overwhelmingly positive, bragging about the improved reading experience and what this meant for the future of Barna’s research.

Case Study

Tech Rocket

Envy helped Tech Rocket to teach thousands of kids how to code.

Learn More
Case Study

Ivy

Envy created a license-able course platform that teaches code to anyone.

Learn More