January 19, 2016 | Business | by Xavi Beumala

How mobile design boosts readership and revenue

Our team is mobilized to try and solve a fundamental dilemma: how do we design the mobile experience to enhance engagement and increase revenue?

Publishers’ great content enhanced by the Marfeel experience is drawing more readers in and bringing them back again and again. Better design has expanded readership and made advertising more effective, boosting revenue for everyone.

Progressive mobile development

CEO and Founder, Xavi Beumala has strived to put Marfeel’s team at the forefront of the industry. After completing a recent push of intense development he says, “Marfeel is positioning itself to be the product that publishers and bloggers think of when they are looking to enhance their mobile experience and monetize their online content. We have worked very hard to design the smartest web-app on mobile.”

Our solution is in constant evolution. The changes we make are small and large, simple and intricate. Some will be apparent, some operate behind the scenes. Taken all together we are extremely confident that as our design evolves so will the numbers. Our improvements will increase readership, make advertising more effective and generate more revenue.

You can see for yourself how we progressively sharpen the look and feel of the mobile reading experience. You will notice that things improve, but we want you to understand why. There is a whole philosophy of design behind the choices we make. Here we will explain three of the design principles that guide our decisions.

1. Design that balances

The sophistication of Marfeel’s solution is due to the delicate balance it strikes between the needs of publishers, readers and advertisers. Design is easy if you have no constraints. It becomes very challenging, for instance, when you have to create a reading experience around ads with unpredictable content that are like black boxes for a designer. Or when you have to negotiate the interaction between an element that promotes the brand of a publisher versus the readability of a text.

Just as there is an imperative to promote business objectives for publishers and advertisers to raise brand awareness, there is a powerful payoff for finding simple and elegant solutions to meet user needs. We design the mobile experience to achieve balance between maximizing the impact of the publication and minimizing the clutter and complexity of the user experience.

a. Maximized

We have maximized the interface to create a greater influence on the reader. The experience is designed so the most impactful elements including logo, pictures, titles and ads all have a striking effect that leave a strong impression on the reader.

Marfeel Mobile Experience--Impactful Design Here are the standout qualities of this design:

  • A prominent frontpage picture that together with the logo create a dramatic introduction to the publication
  • Maximum impressions through advanced layout design and mathematical formulas that determine the optimal positioning of ads according to device type, device size, user type, etc
  • A central, strategic position for the publisher’s logo that improves brand awareness
  • Article titles overlaid on top of images to maximize layout and to highlight the most important editorial selections
  • Transparent, rounded effects on buttons that support the main focus on the logo
  • A sharing bar that dynamically reminds readers to share and that features one metric capturing the impressive overall impact of the article on social media
  • Options to customize color schemes and typography to match publishers’ brand identity

These impactful elements are intended to increase return visits, make advertisers look good and improve the standing of the publisher.

b. Minimized

A frustrating mobile experience can be enough reason for a user not to return to the site. That means less readership for the publisher and less revenue.

Marfeel Mobile Experience--Read-Mode

The need to maximize impact must be balanced in design with the need to minimize unnecessary complexity through clean, precise design that improves the reader’s experience.
In addition to the initial impactful landing we design to prioritize the main reason the user comes to the site: to read content. We designed the “Read-mode” in order to achieve a minimized effect.

When a user is in read-mode the view of the content is optimized and all that remains is the menu icon in the upper left hand side of the screen and an arrow in the bottom right that returns the reader to the top. The content occupies more space in this mode improving engagement and removing any distraction. This is a design that minimizes complexity at the right moment, cleans the experience and improves reading on mobile.

 

2. Design that moves

The real brilliance of design is in how it moves. Design that enhances the user experience is not static like a picture. It is dynamic like a movie and has a logic that can be played forward and back. This is why our clients call it the Marfeel “experience”. The design principle of orchestration is what’s behind this dynamism. Here we’ll share with you how we use orchestration to achieve the progressive interplay between impactful elements raising brand awareness and the optimized user experience in Read-mode.

Research of user behavior on the Internet shows that when someone lands on a website their first and immediate action is to slightly scroll or swipe down the page whether on desktop or mobile. This has been learned in response to the thin banner ads often appearing at the top of a page and now it has become a habitual fact of user experience. Learning from this research we decided to make that initial downward swipe work to our advantage.

As the user swipes slightly down the articles move, but the logo and editorial section bar remain constant at the top of the screen in the most prominent position. The effect this creates is to introduce a marked contrast between the steady brand of the publication and the shifting content that comprises it. The stickiness of the brand heightens the publication’s impact and enhances brand awareness.

As the reader moves farther down the impactful elements recede in stages. The bar with the editorial sections is the first item to slide away as the user continues down. The logo is still prominently in place but the space for the pictures, titles and text has slightly expanded. When we can see the user is fully engaged with the content and has moved even farther down, the logo finally slides away entering read-mode.

It works in both directions. When the user finishes perusing the content and moves upward on the page the logo snaps back to the top of the interface. This serves as a dynamic reminder of the brand of the publication at a key moment. Move down to engage more content and the gradual transition to read-mode is orchestrated again. Designing our mobile experience using orchestrations is one way we dynamically achieve business objectives and meet user needs.

3. Design that teaches

A significant percentage of traffic to most sites is made up of new readers. Any pattern we notice of users interacting with the site for the first time in a less than optimal way is an opportunity for us to “teach” them a better way through design.

Marfeel Mobile Experience--Smart Design

We’ve seen that some readers do not expect to be able to swipe on a web-app, at least at first. We take this as a sign we are ahead of the game! Nonetheless, we know that a higher percentage of impressions come from readers who swipe. So we set out to teach new users how.

What we have done is to create a thin, semi-transparent bar towards the top of the interface with arrows pointing to both sides indicating the direction where you can find new articles. These indications reveal the side by side arrangement of the layout and suggest that articles can be flipped through like a magazine.

At first, the user might touch these arrows, which will still transition to the next page. But what is remarkable is the visual effect of the transition. The new article slides across in a motion that simulates being swiped. We believe this will provide the guidance readers need to begin flipping through the content. And once they have learned to swipe, this bar fades away to optimize the use of the interface. Because a higher percentage of your audience will now be converted into “swipers” we calculate higher quality impressions and more revenue will be generated.

Just a few examples of improvements to our mobile experience guided by business objectives based on design principles that will subtly and effectively improve engagement and increase revenue.

You’ll see in numbers how our mobile experience boosts your readership and revenue!

Try it out on your site and let us know what you think about the evolution of Marfeel’s mobile experience. If you are not already a partner take a look on your smartphone or tablet at the silky smooth design we gave to one of our clients at Geo.fr.

Tell us when you’re ready to expand readership and raise revenue with the Marfeel experience.