Improve the reading experience
in the world of fashion

Improve the reading experience
in the world of fashion

Improve the reading experience
in the world of fashion

YEAR
2015

FIELD
UX Design

CLIENT
Grazia – Mondadori

AGENCY
Sketchin

MY ROLE
UI & Brand Designer

LINK
Grazia.it

A project I’ve been working on during 2015 with the Sketchin team. Our challenge was to improve the reading experience in the website of the iconic newspaper magazine Grazia (Mondadori editore). The redesign has been set up to increment conversion rate on page views and average time on page.

A project I’ve been working on during 2015 with the Sketchin team. Our challenge was to improve the reading experience in the website of the iconic newspaper magazine Grazia (Mondadori editore). The redesign has been set up to increment conversion rate on page views and average time on page.

A project I’ve been working on during 2015 with the Sketchin team. Our challenge was to improve the reading experience in the website of the iconic newspaper magazine Grazia (Mondadori editore). The redesign has been set up to increment conversion rate on page views and average time on page.

We carried out usability tests with a bunch of regular users to identify the main pain points of the old website, therefore we framed the main critical points and unexpressed needs, and we met them with the actual business goals.

We carried out usability tests with a bunch of regular users to identify the main pain points of the old website, therefore we framed the main critical points and unexpressed needs, and we met them with the actual business goals.

We carried out usability tests with a bunch of regular users to identify the main pain points of the old website, therefore we framed the main critical points and unexpressed needs, and we met them with the actual business goals.

We carried out usability tests with a bunch of regular users to identify the main pain points of the old website, therefore we framed the main critical points and unexpressed needs, and we met them with the actual business goals.

We carried out usability tests with a bunch of regular users to identify the main pain points of the old website, therefore we framed the main critical points and unexpressed needs, and we met them with the actual business goals.

Research phase

Research phase

During the usability test, users have been guided to accomplish the main tasks on grazia.it, and we find out the main pain points we had to work on:

— “ Advertisement on the homepage is overwhelming, I can’t distinguish real content from ads”
— “ I can’t fulfill the purchase of all the products shown on the website”
— “ I can’t quickly share articles via social or through chat, such as Whatsapp”

During the usability test, users have been guided to accomplish the main tasks on grazia.it, and we find out the main pain points we had to work on:

— “ Advertisement on the homepage is overwhelming, I can’t distinguish real content from ads”
— “ I can’t fulfill the purchase of all the products shown on the website”
— “ I can’t quickly share articles via social or through chat, such as Whatsapp”

Grazia.survey1
Grazia.survey2
Grazia.survey3

Wireframe
& co–design

Wireframe
& co–design

On a first stage we run some co-design workshops with the client, where we defined the business goals and the most relevant brand values, that had to be pointed out on the website redesign. To design the wireframes we started with a mobile first approach, to highlight the essential contents.

In particular for this project, we considered all the Advertising and viewability concepts, designing for example pages with Ads pinned on the sidebar and adopting the infinite scroll in the article pages. In addition we gave prominence to the IT Girls role, the Instagram ambassadors to spread content and to the importance of Branded content.

On a first stage we run some co-design workshops with the client, where we defined the business goals and the most relevant brand values, that had to be pointed out on the website redesign. To design the wireframes we started with a mobile first approach, to highlight the essential contents.

In particular for this project, we considered all the Advertising and viewability concepts, designing for example pages with Ads pinned on the sidebar and adopting the infinite scroll in the article pages. In addition we gave prominence to the IT Girls role, the Instagram ambassadors to spread content and to the importance of Branded content.

Pen.marker-tappo6
Pen.marker-top5
sketch8

Mobile first
design approach

Mobile first
design approach

Mobile first
design approach

mobile.hp
mobile.related
mobile.sfilate2
mobile.lancio
mobile.sfilate
mobile.itgirls
mobile.article
mobile.menu
mobile.oroscopo

Infinite scroll
page view strategy

Infinite scroll
page view strategy

Infinite scroll
page view strategy

We worked on the essential element that guide the user: reading progress bar, infinite scroll between the article pages, to allow the customer to jump from an article to another and increase page views.


+79,18% pages viewed after adding the infinite scroll feature.
+157,3% pages viewed in the “Fashion show” section.
+10,4% times on the magazine’s online format.
-27,5% bouncing off the magazine.

We worked on the essential element that guide the user: reading progress bar, infinite scroll between the article pages, to allow the customer to jump from an article to another and increase page views.


+79,18% pages viewed after adding the infinite scroll feature.
+157,3% pages viewed in the “Fashion show” section.
+10,4% times on the magazine’s online format.
-27,5% bouncing off the magazine.

We worked on the essential element that guide the user: reading progress bar, infinite scroll between the article pages, to allow the customer to jump from an article to another and increase page views.


+79,18% pages viewed after adding the infinite scroll feature.
+157,3% pages viewed in the “Fashion show” section.
+10,4% times on the magazine’s online format.
-27,5% bouncing off the magazine.

We worked on the essential element that guide the user: reading progress bar, infinite scroll between the article pages, to allow the customer to jump from an article to another and increase page views.


+79,18% pages viewed after adding the infinite scroll feature.
+157,3% pages viewed in the “Fashion show” section.
+10,4% times on the magazine’s online format.
-27,5% bouncing off the magazine.

We worked on the essential element that guide the user: reading progress bar, infinite scroll between the article pages, to allow the customer to jump from an article to another and increase page views.


+79,18% pages viewed after adding the infinite scroll feature.
+157,3% pages viewed in the “Fashion show” section.
+10,4% times on the magazine’s online format.
-27,5% bouncing off the magazine.

cover_grazia54
homepage-min
visual.grazia.mondadori.itgirls.gallery.1280.001×2

Team

1
Elena (UX Architect)
Giuseppe (UI & Brand designer)
Stefano (Interaction designer)
Sarah (Interaction & Visual designer)
Francesca (Interaction designer)

 

 

Other projects

Mondadori Grazia2015 — UX/UI Design

Ticino rebranding2017 — Brand Experience

Castrignano typeface2017 — Type design

Carattere branding2013 — Brand design

NDA – Luxury project2016 — Brand & UX/UI design

NDA – Fashion project2017 — UX/UI design

NDA – Insurance project2016 — UX/UI design

NDA – Brand project2018 — UX/UI Design