Retesicomoro

Redesign a news website.

11-2018     Branding, Web Design     Sketch, WordPress

What is Retesicomoro

Retesicomoro is a website on “theological, cultural, managerial, scholastic, youth and international themes”.*
The website is held by an association which aims to inform and enrich the panorama of information in the Catholic world. They also provide reports on announcements intended for the socials associations in Italy, events of different regions and teaching activities for religious organisations.

*www.retesicomoro.it/presentazione/

Problem

Their original hosting provider was taking care of the website structure, but it was working just with windows-XP, so the client asks for a solution to solve this problem. 

In the first place, I needed to study the original CMS to find an equivalent in usability. The best result was WordPress.

Moving all the system to WordPress

Previous website

Once I decided the program to use I started to analyse the website that they had. Following you will find some screens of different pages.

homepage

article

second part of the article

page > article section

Main areas

I have analysed the different areas, and I restricted them to three main areas of activities: information; announcements; teaching activities. After that, using Google Analytics, I checked which of the three areas had the most significant number of interactions. It resulted in being the information area.

In particular, a more in-depth analysis helped to find out that the sections more followed were the article related to the Pope and the part about the Sunday sermon/lecture.

This process helped me to understand the users’ interactions with the website and the starting point of the redesign.

three main areas

Users and Personas

From the collected data (Google Analytics and personal surveys) I was able to identify three personas: the nun; the priest and the ONG responsible.

personas

By analysing the personas, I was able to identify some common patterns and some important considerations:
– The Nun and Priest are in most cases between 50-65 years old.
– The ONG responsible is younger, between 40-55 years old.
– The ONG responsible is more tech-savvy, so more open to changes and being able to navigate through new web structures.
– The Priest and Nun come from a more classic and conservative background, so they are less open and have a higher learning curve to tech-base information.

From these considerations, I decided that the redesign should be focused on cleaning out incomprehension and clarification of interactions instead of creating a more modern design.

Inspirations

Keeping in mind those considerations I have analysed and researched inspirations.

I focused on websites that could have been used by the personas, selecting four sites in particular: Avvenire, Famiglia Cristiana, Repubblica and the Vatican website. The first two report news about the Catholic world, Repubblica is one of the most read Italian newspaper (especially the digital version) and the Vatican website is reporting all the news about the Pope and Vatican State.

If we have a look at the Vatican website, we can see how the “classic” style strengthens the idea that experimenting with new extreme UI styles could push away some users.

Famiglia Cristiana / website

Avvenire / website

la Repubblica / website

Vatican / website

Wireframing

To make the wireframes I used Sketch. I created two different versions of wireframes that would have fit to the intended purpose and then selected one of them. Below you can find some examples.

For the homepage, I decided to resize and to reduce the header. I also cut the size of the menu, aligning it in the centre. I divided the space into four columns: three for the news and one for the sidebar. For the news feed I used the material design style and cleaned all the shapes.

homepage

For the article, I resized the title section drastically, and I moved the title into the article structure. After I resized the font dimensions of the title, subtitle and text to give a clearer view and to support the reading priority. I have generally kept the structure of the websites that I checked for inspirations.

article structure

Mockups and style changes

After a meeting about the wireframes, I started the front-end web development on WordPress. To create the website in WordPress, I used the page builder Elementor. This Plug-in allows having quite complete control over the design. It requires, indeed, a basic knowledge of HTML and CSS to make some personalisations and optimise the website itself. Below you can find some comparisons between the old and the new version of the website.

For the homepage, I have cleaned up a bit the colours, resized the news feed and structured the news as cards. I changed the main green colour to a stronger nuance to make it more modern, and I removed the category colours from the single articles. I have also created more contrasts between the title and the description of every single card.

homepage old/new

I have also applied a “colour cleaning” for the article, using the category colour just on the menu to create more contrasts.

article old/new

While scrolling to read the news, the menu stays stick at the top, and the logo disappears because it is not relevant in this case. We can see in the image below how much space the text of the news gains by removing the big header.

second part of the article old/new

In the single category page I applied the material design style to the news feed to make the news section cleaner and more consistent.

page > article section old/new

Final result and considerations

If you want to see the result, you can check the website here. The client was quite satisfied with the final result. Considering the budget, the strict limits of the client and the design process, this project helped me a lot to improve my expertise.

error: Content is protected !!