11-2018 | Branding, Web Design | Sketch, WordPress
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.
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.
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.
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.
From the collected data (Google Analytics and personal surveys) I was able to identify three personas: the nun; the priest and the ONG responsible.
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.
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.
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.
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.
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.
I have also applied a “colour cleaning” for the article, using the category colour just on the menu to create more contrasts.
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.
In the single category page I applied the material design style to the news feed to make the news section cleaner and more consistent.
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.