Magsty

Research

• Reading on a screen

  Screen-based behavior is characterized by more time spent on browsing and scanning, keyword spotting, one-time non-linear reading, and selective reading rather than in-depth and concentrated reading.

  A new way to consume content

  

• Responsive text

  Displaying article full width requires more physical and cognitive effort from the reader, and increases bouncing rate at the cost of deep understanding of content. In fact, the longer the line, the greater the eye movements, pauses, and skimming.

  Line-length issues, screen vs paper

  

• Proprietary solutions

  Competitors adopted proprietary solutions, based on mobile operating systems. However, magazines often remain a mere PDF version of the paper edition, limiting any possible interaction.

  Facing the challenge

  

Competitive analysis

Personae

Virginia Green, 45

Freelance Journalist

Intermediate

Writes in early mornings, alone, at home, and spends the rest of the day reviewing what is happening in her field, or she spends time with her children.

1. Tasks

   Logs in, writes articles in the in-house CMS and send them to review.

2. Wants

   A CMS for focusing on writing only without having to deal with coding aspects.

3. Asks

   How can I change the layout of my article, or add picture galleries?

James J. Brown, 50

Editorialist

Intermediate

Works at a small publishing company. He spends his day reading and reviewing articles, and making revisions. He manages a team of in-house and freelance journalists.

1. Tasks

   Logs into CMS and email to review submissions, into CMS and email to review submissions.

2. Wants

   A CMS for gathering all information and managing the release of current issues.

3. Asks

   At what date did you send me that information by email?

Leonard Perry, 31

Academic Researcher

Advanced

Spends his days reading articles in his field, and his nights scrutinizing the sky...when he is not partying or playing Call of Duty.

1. Tasks

   Connects to multiple sites to read articles and copying and pasting to another software.

2. Wants

   A tool for copying/pasting every interesting data, following authors, also commenting.

3. Asks

   In what article did I read that? Who wrote that, again?

User flows

• Content pages - Editor view

  Editors have access to reading content, and can control the flow of their own publication. Here are the main pages related to content management.

  1. Article and magazine feed

  2. Drafts page

     listing reviewed, pending, and published articles

  3. Editors page

     to edit and create articles on the go

  4. Magazine - Table of contents

  5. Article - Reading mode

Moodboard

• Bonnier, Mag+

  

• The Daily Beast

  

• Two Fold Creative

  

• • Adam Coulombe

    

  • 

    The NY Times

• Neighborhood Studio

  

• • Grayden Poper

    

  • 

    Capitol Couture

• 

  Milwaukee Police News

• 

  Second Story Interactive Studios

Art Direction

Active and passive colors

Studies show that passive are better for long visual focus and deep reading on a screen. That is the reason why we chose them to display content. To contrast, we used active colors to let the functions stand out. Different color schemes were also created to help editors to design their magazine.

Color schemes and themes

Flexible grid

Creating a magazine CMS in the ever changing width of our displays, requires flexibility and freedom. 16 and 18 column grids are available to match the layout of the publishers. To differ from responsive web design, we strongly recommended not to design a fluid grid, but to reorganize the content depending the available width.

Odd and even grid

Typography scale

Lucas Sequence ratio and Optimal Line Length theory creates an instant vertical hierarchy that enhances readability; It respects cognitive needs: perception of recognizable chunks of information, and consolidation of overall comprehension via reduced amount of eye movements.

Typography scale and optimal line length

Font stacks & SVG Masks

In order to help editors design with poise, we created font stacks along with color schemes. The CMS, taking advantage of the Hoeffler & Frere Jones Typography Cloud, relieves editors from paying and hosting a font license. We also decided to dust away the old rectangur header image by changing the way we display images. For example, we used SVG Masks to give editors the same creativity they have with the paper edition.

Font stacks and color schemes

Enhancing rather than displaying the same

From a pure user experience point of view, the same content should be enhanced rather than being displayed the same way across devices. Responsive web design does not take work environment into account. Therefore, eye fatigue, light reflection, ambiant noise around, mobility, are issues that are not addressed. We imagined ways to enhance readability, and make content accessible whatever orientation, or environment the user is into.

Landing page. Same page, different device and orientation

Renderings

• Home / Sketches & wireframes

  

• Landing page / Sketches & wireframes

  

• Home - Feed

  

• Table of contents

  

• Reader - Article

  

• 

  Landing page - Publish

• 

  Landing page - Intro