Design research and UX/UI Design

La Repubblica

2019

The following project is an article, published on Medium, realised by a group of students at Federico II University of Naples and there is no affiliation with la Repubblica or associated publishing groups. Article

Skills:  Redesign, Designer research,  UX/UI Designer
Tools:
Sketch, Illustrator, Principle

la Repubblica is an Italian daily general-interest newspaper founded in 1976 in Rome. According to total circulation and quantity of readers, it is considered the second most important newspaper in Italy, after “il Corriere della Sera”.

It counts 2 million and 500 thousand readers for the most part men with an average age of 35–54 years.

Why we choose laRepubblica for our redesign?

The phenomenon of digitization have involved different sectors, in particular the editorial one, thus changing our lifestyle and our reading habits. In the past, for the world of mass communications, the attention was completely turned to the newspaper and the paper book, in its structure and its layout in order to make the information more pleasant and user-friendly as possible. Why? Because these were the main “products” to which the user referred to inform themselves. But with the first mentioned advent of digitization these contents change shape. The classic newspaper is replaced by the website, by the newspaper in digital format or by the news application.

So, users’ habits to access this content change! The focus shifts to the digital content and every publishing house has had to update itself in these terms.

This is the origin of the following research, which led us to analyze how the different Italian publishing companies have dealt with this process. This research allowed us to focus our attention on la Repubblica and its app.

App

The main goal of the latest update of the Repubblica application, released in July 2018, was to lead the informative overload to be a point of reference among the dozens of applications surround us.

The app is developed into four sides with different services :
  • - the free website of Repubblica.it with news 24/7;
  • - Rep’s premium insights;
  • - the live and on demand videos of Repubblica TV;
  • - the first page of the newspaper, with a link to the digital version available on Repubblica + app.

With all of this features it is easy for the reader to become disoriented. As Scott Belsky, Adobe’s Chief Product Officer says:

“Rule of thumb for UX: More options, more problems.”

Research

Before going into the redesign phase we’ve been through a deep analysis to better understand how to improve the entire user experience of the application to the reader. General research, Guerilla usability testing and App store review research.

General research

Guerrilla Usability Testing

For redesigning la Repubblica app we decided to involved a group of 15 people, not necessarily habitual users, and collected their feedbacks. To test the usability, we used the Guerrilla Usability Testing: a quick and cheap way of testing a prototype or a website with real users.

Source:https://www.uxbooth.com/articles/the-art-of-guerrilla-usability-testing/
We asked our users to accomplish little tasks:
1. Research a section and an article;
2. Save and share one of it;
3. Customise the reading settings;
4. Find the Premium area and the Tv section;
5. Scroll the feed.
First of all, we asked to search an article through the sections of the app (politics, economics, news, etc.). The first difficulty, for most the testers, was to recognise and/or locate the icon that would lead them to browse the sections; it was considered unclear for his “unusual” position on the tab bar. Furthermore, at least one third expressed the need of a button to search articles and sections.
Unlike went as far as tasks such as saving and sharing articles. The app allows, in a clear way, to save the articles through an easily recognizable icon (the classic bookmark).
The sharing of the article is present exclusively inside the news, on top, so when you finished to read the news the sharing icon is no longer easily accessible. This is a fairly negative aspect especially from a social point of view.
Customizing the reading settings is a common task for the readers so, in a news app, is expected to do it quickly and easily. The feedback with the testers regarding this task was positive even though there are some observations to make. The icon is located at the top right, where the user expects to find it but is too similar to the profile icon and look unclear. In any case, the user is able to perform this customization even if he has to complete several steps before.
An in-depth discussion must be made regarding the navigation between the different areas, such as the Premium area and the TV area. The current structure allows you to navigate thought it by swiping or by tapping at the top left in the corresponding icon with a list of them.

If you ask any user to do this, as it emerged during the test, the result will almost certainly disastrous.
The division of the different areas is not at all intuitive, the user does not understand how to navigate between it and he/she has to grope before understanding its structure. However, there is an onboardingthat explain how to use the application.

The feed navigation is the main point of a news app. From the tests performed, it is not clear and intuitive. The layout between the various articles is not very comfortable and confuses the user. During our research we observed a general sense of disorientation and confusion.
Suggestions proposed bu users:
Navigation structure, layout, reading mode: all these elements, combined together, generate a slow and frustrating UX. Not really the best for an app that aims to reach such a wide and heterogeneous audience.

App store review

Since we wanted to have a complete overview, we considered some of the most critical App Store reviews for the past moths. Users noted that they were frustrated for: Low text style legibility, Picture positions not well aligned to the referred text, Slow news updates. Redundant news and Inability to comment under articles.

“The task of a newspaper is to collect, write news and get it to the public. My feeling is that, with all of these updates, the focus here is on the special effects and not on the content”
Sarah Smith
App store review, 1 star
"App slow, you have to update it manually and it take very long times, like two minutes. Duplicate and mixed news. To choose the local edition you must necessarily register.The previous app was much better."
Craig Sams
App store review, 2 stars
"The daily upload is very long (about two minutes). What about the timed reading of the articles; if while reading you need to stop for a few seconds to answer the phone or blow your nose you can no longer continue reading. Absurd."
Giovanni
App store review, 1 star

redesign

We have totally revisited the architecture of navigation. First of all we removed the “cubic” transition between the sides, preferring an alternative way to arrange contents that is familiar and innovative at the same time: the main content areas are indeed reachable through a tab bar, meanwhile a side menu — available in the first tab, the one related to the news feed — enlists or filters the newspaper sections, depending on whether the user chooses the classic mode or the custom mode.
Feed

New navigation flow and architecture

With the introduction of the side menu, we incorporated free contents, updated in real time, and the premium ones in a single feed. This choice not only simplifies the overall structure, but it might produce an advantage on the conversion of the users (from free user to pro user).
We have also done a more clear subdivision of the different sections (politics, business, foreign affairs, sport, technology), which the users can now navigate in a more hierarchical way, according to his needs. Also, for a more customized experience, the user can now custom his feed by choosing his favorite sections.

By analyzing the results from the initial study, we decided to implement a button for the search among the published news.

feed

The newsfeed now presents a more simplified structure in order to enhance app navigation and content legibility. In fact, the feed is now composed only by two different formats of news: main news and related news.

premium content

La Repubblica is a well-known newspaper thanks to its authors and its up-to-date investigative reports. The premium section, named “R:”, has a daily edition and represents one of the main feature in the publishing strategy of the newspaper. This section, where the users can find articles and comments on the main stories of the day, stands out already in the original app due to a dedicated “facade” and a more refined design; what should be redesigned, instead, is the integration with all the other (free) contents.

Try to imagine a user who, pushed by his/her thirst for knowledge, stumbles into a premium article about a topic he wishes to dig deeper into, thus he could start to consider to try the free trail (and yes, this would involve the use of a paywall).

tab bar

The user can select between different tabs to access the four sections of the app: feed, video content, saved elements and personal profile with all the technical info and the settings.

Tab bar

New reading experience

Being a news app designed to be used (mostly) when you are on the go, we think a lot about the reading experience itself. The original app shows an article view which is very static, kind of replicating the mobile version of the website. In our proposal we have instead preferred a full-screen view, using a toolbar for the main interactions; we have been driven by the desire of offering a more transparent and immediate reading experience, reducing all the distractions.Speaking about the main sources of inspirations for the new reading mode, instead of the traditional news apps we considered services like Medium and Pocket, which already offer enhanced features for improved readability such as full screen view, text size and brightness control.

In a nutshell, the following are the main features we have proposed in our solution:

  1. Full screen view;
  2. Emphasized title above the main picture;
  3. Box with estimated time of reading and counters for both sharing and comments;
  4. Comments reading and editing;
  5. Reading progression bar;
  6. Toolbar with navigation feature, bookmark, sharing and reading options.

Final remarks

Following the introduction, the focus of the editorial world is increasingly shifting on the digital one because this is a fertile and ever-expanding market that cannot be avoided. The applications play a key role and must not be confined to offer content that totally or in part reflect those already shows on the relative website or on the paper.

A news app must have its own identity and must be designed to put the users at the hearts. For this, our primary goal, was to redesign La Repubblica app and simplify it to give more emphasis to the contents, users needs and use.