Code and Theory
Features

From Native to Responsive and Back Again

How Code and Theory worked with one of the largest digital media companies to more effectively reach their target audience

Founded in 2005 by Pete Cashmore, Mashable is online digital media company that reports on the importance of digital innovation and how it empowers and inspires people around the world. 

Over the past two years, Code and Theory has worked with Mashable to rethink the browsing and discovery experiences across all devices.

Today the company is a leader in its field and currently attracts 35 million unique visitors a month and has over 18 million social followers.

01 We Started With The iPad

See the iPad app case study
Code and Theory

Code and Theory’s first project with Mashable started in early 2012 when we partnered with their in-house product team to help develop the brand’s iPad app, which coincided with an important sponsor launch.

Mashable and Code and Theory had a similar approach to product design that allowed for a distinct, and collaborative process. The historic trust of Mashable in Code and Theory allowed for a true partnership where Mashable knew we’d be honest on what was achievable and deliver a viable and successful product.

In our define phase, we worked with the client to ensure we were identifying the core audience attributes that aligned with their brand. The attributes of Mashable’s core audience included:

1) readers who want to efficiently consume content; and

2) being that Mashable’s audience is one of the most influential and engaged social communities, sharing at any moment of the experience was not only expected, but required.

We also wanted to make an experience that was differentiated from the competition and was delightful to use.

Working with Mashable’s in-house team we began to create a platform which had both a great user experience and the graceful ability to display advertising. Navigating through the app became seamless with panels and list views for quick scanning of content, and intuitive touch gestures for moving from one article to another. Sharing was also effortless from the headline and article detail level, with easy output to multiple networks and commenting available as an accessible panel alongside the article for quick contextual relevance.

The result was a successful iPad app launch with a meaningful and optimized native experience.

Code and Theory

02 Redesigning Mashable.com

Read the Case Study

We then partnered with Mashable’s product team to develop a brand experience on the site that was timely, yet able to seamlessly evolve over the years. 

To do this, we went back and drew on some quick learnings from the iPad project, as well as deep conversations with the client to ensure we kept the brand identity consistent.

We worked with Mashable’s product and executive teams to identify and discover the following digital trends and insights, which could be implemented into the redesign of the site.

THE THE WEB WAS BECOMING MORE VISUAL
One trend, which we identified with Mashable, was that users respond to visual presentation. An obvious trend was happening across the Internet where photos, infographics, and images were the lead to drive engagement of information. This was most prevalent on growing social networks like Instagram and Pinterest. The presentation was also often displayed in bite-sized chunks, often surrounding each content element with aesthetically subtle design wrappers. This allowed content to be easily scanned.

We partnered with Mashable to execute a design with the same goal of easy scanning, placing content in tile-like packages with smaller or larger visuals based on the content’s hierarchy.

mashable

PEOPLE WANT TO BE FED
Sites that offer large amounts of new content needed an efficient way to deliver the content and users needed an easy way to understand all of it. The term "feed" was born.

This wasn't a new concept, but a refined one. Digital publishers were popularized in the early 2000s and had been creating by using this type of delivery. However, it had been limited in its evolution. Sites like Facebook have evolved the “feed” to allow it to deliver more than one template of content and order it in ways other than simply chronologically.

The team at Mashable identified three predominant types of users who were visiting the site and we adapted the feed delivery to a three-column layout, which was powered by Mashable’s proprietary Velocity technology, which predicts and tracks the viral lifecycle of a story.

For users who want the top headlines of the day the “What’s Hot” column surfaces the biggest headlines. For readers visiting the site looking for trending articles, the “The Next Big Thing” column surfaces about-to-trend stories, as identified Velocity technology. For readers who want the newest content, a pure time-based feed was created so they could read all their industry news as soon as it was released. A story then shifts from one column to the next as it continues its viral lifecycle. 

Code and Theory

users were, and are, coming from mobile
A growing trend in the industry, and one that Mashable is a significant part of, is the increasing amount of traffic being driven to Mashable from mobile or tablet devices, often through search or social networks. In order to capitalize on this, we wanted to create an optimal and consistent experience across all devices that allowed users to continue exploring content no matter how they arrived. 

We helped to implement a responsive design, which means that elements on the page resize to ensure the presentation and experience always deliver an optimal experience on all platforms, as well as allow for easy reuse of features and functionality across the site.

Additionally, entry points to Mashable are generally split between both article pages and the Homepage or Section Pages, so we wanted to offer just as many opportunities to browse and discover content on the article pages as other areas of the site.

The feature concept was simple: let’s make the end of one page be the top of another page. The article page implementation allowed users to seamlessly scroll into the Section Page as they reached the end of a story. People arriving via search or share were now able to gain a Homepage experience without even leaving the page, which helped to significantly reduce bounce rates and guide people to the best content.

Code and Theory

MASHABLE IS INHERENTLY SOCIAL
Mashable has an exceptionally high share rate per article, due to exceptionally well-written content, which is complemented by easily accessible sharing options. This contributed to its massive growth since it first launched in 2005 and was something users now expected, so we wanted to offer as many engagement opportunities as possible.

On article pages, we allowed for what we call “microcontent sharing,” where every element on the page – be it images, videos, or quotes can be shared as individual items. Users are now able to share the pieces of the story that they felt were most significant, creating conversations around specific items of the article, in addition to the entire narrative. Additionally, for users looking to share things as quickly as possible, we created direct sharing from the headline on the Homepage and Section pages.

Code and Theory

Predicting "virality"
The Mashable audience likes to see what’s next, and when Mashable users find a great new story before any of their friends, they want to share it. Mashable has developed a proprietary technology, Velocity, which scours the social web, collecting data around the behavior of people engaging with digital media content and feeding it into the company’s predictive engine to forecast what content is about to go viral. The tool is now represented through a graph indicator on the Homepage and every article. Users now have a go-to destination to easily find the trending news on the web that hadn't even gone viral yet.

Code and Theory

03 Revisiting the role of native

See the Android app case study

Now that Mashable had a responsive site with consistency across all platforms, we looked to preserve the product strategy set in place, and felt apps should only be considered if they could offer an additive experience that utilized native-specific functionality that browsers didn’t have.

The Android operating system served as a great platform for us to execute this on first, and so we set forth in helping to create the brand's Android app.

Code and Theory

A large part of Mashable’s audience used the site to discover and share trending content before any of their friends. Knowing that people typically have their mobile devices on them throughout the day, we wanted to leverage push notifications to alert them of content that was about to go viral, so they could share it immediately. Thanks to Mashable's Velocity algorithm, we were able to send "Mashable Velocity Alerts" to the user’s Android Notification Center for these types of stories that created a differentiated news notification.

We also looked to further enhance the sharing experience by leveraging Android's native sharing functionality. Working with Mashable’s in-house team we implemented a share option that allowed users to share to any app already installed on their device within just one tap from the article or from the Homepage.

The app launched in August 2013 to great success. 

Features
|
Selected Clients
|
Recent Launches
|
project
Maybelline Global Website Maybelline Global Website
project
Yonder Music Yonder Music
project
BBC Newstream BBC Newstream
project
The Guardian Labs The Guardian Labs
Code and Theory