Integral Magazine: Website redesign

Editorial project at Ironhack

Project carried out by Jordi Milán and Justyna Ziolkowska

A magazine with more than 30 years

Integral was founded in 1978 by a group of naturopathic doctors and medical students and the publisher Jaume Rosselló in Barcelona, including its first director, Santi Giol and Pedro Ródenas, Daniel Bonet, Mila del Pozo, Ester Vilarnau and Joaquín Peleteiro. Among the collaborators of the first stage, Frederic Vinyes also stands out.

Entrepreneurially, the project started as a cooperative and then as a limited company. Later it belonged to the RBA publishing house and currently to MC Ediciones, a company that made a voluntary creditors’ contest and dismissed the entire editorial team. Since its appearance, Integral has published its own magazine, monographs and books.

The website today

We had to transfer the essence of the magazine to the website, as there is currently a lot of difference between the magazine in physical format and the website. After visiting his website and doing secondary research, comparing how other websites were working, we decided to interview readers of related publications.

Research

The objective of the research was to know the main motivations, frustrations and habits of the people who read this type of publications, what is the context in which they usually do it, in what way and why.

The interviews

In what year were you born? What kind of press do you read? Why? When? In what situations? Tell me the last time you have read your favorite magazine? Where? What magazine? What subjects? At what time of the day? At what time / situation? In what format do you read the press? Why? Which sections of the magazines interest you the most? Why? Do you usually read wellness or healthy life newspapers?

What is a healthy life for you? Why? What do you like in the magazines you read? Why? What do you lack in the newspapers you read? Why?

Would you like to comment something else. Would you like to ask me something?

After interviewing 5 people with ages between 24 and 48 years, we created an affinity map with which we obtained these insights:

People read in their spare time at work (3/5) They like topics related to the care of their relatives, children or elderly people (4/5) They read on public transport (3/5) They do not use any application to save their favorite items (5/5) They take screenshots of your device to save pages of interest. (4/5) They read in digital format (3/5) and occasionally in physical format (3/5) They value the presentation for the cover (4/5) and look at the titles and images of the content (3/5) to choose what to read They want to live in a healthy way to take care of themselves (4/5) and of others (4/5) They like to read topics related to food (5/5), medicine (4/5), relaxation (3/5) and habits (2/5) You would be interested in topics such as: healthy and sustainable food (3/5) health and psychology (4/5) and sport (3/5)

Problem Statement & Design Question

People who have a healthy lifestyle need to decide quickly what to read when they have little time because they want the information to be useful to them to fulfill their goal of staying healthy and caring for others.

User persona

Use Case

User enters the web, chooses an article from the highlights, reads it in its entirety and wants to continue. Reach the end of the article and pick a recommended / like article you read. User enters the web, chooses a topic from the navigation bar (menu), chooses an article from the list, does not finish reading. Doesn’t read it in its entirety and wants to save it to read later. user enters the web Choose an item Are not registered, she like it and she want to save it — click on the save button System shows dialog to create account User create account She is notified that the item has been saved successfully. She do not read it in its entirety and you have not saved it. It is saved automatically. User enters the website and wants to register.

• User enters the web page and wants to search by keyword.
• User enters the website and wants to visit social networks.
• User wants to subscribe to the newsletter.
• User wants to subscribe to the monthly purchase of the physical magazine.

Ideas

Save the article to read later? — yes, (3/3) Notification to continue reading within X time via web or mail? — notifications no (1/3 yes), email no, within the app or browser (2/3 )— yes, it can be a little bell Does saving to bookmarks mean you want to read it again? — favorites no, read later — yes Time to read what it teaches you before you start? — yes, (2/3) Save an article author to favorites? — no, (3/3) Save the article in favorites? Why do you keep it? — no

Answers interviews ideas: I would base my reading on time I save it without closing the browser (stand-by) I wish I could save the article Keep it separate I don’t look at the author

Ideation

Our purpose at the beginning of the ideation stage, we thought of creating a functionality with which readers could save their unfinished readings, to resume them later. We thought it would be a good idea to keep it visible at all times while the reader scrolled through the article and recorded it as it was read.

We also wanted to customize the main page so that you could find the saved or favorite readings quickly and, as you were choosing the topics that interested you, they would appear by default as suggested.

In short, we wanted to personalize the readers’ experience so that they could also find and save their readings quickly.

It also occurred to us that it might be a good idea to indicate the total or remaining reading time if you have already started.

Low Fidelity

This is the first prototype created in low fidelity, to which we had to carry out quite a few important changes after testing 5 people.

People did not see the remaining reading time tool during the test. The title “For you” was changed to “Recommended” since they did not know if they were still logged in and it created confusion. The icon to save the readings was not understandable. When we asked them to search for a section, they did not notice the search bar. We change from 4 to 3 the images in the “Recommended” section since the carousel button was not appreciated.

Mid-Fidelity prototype

The save reading button was not well appreciated and not understood. However, when we explained what it was for, people understood the utility and imagined that it would scroll as they progressed in reading.

We choose to put the word save next to the icon.

We also include the share buttons on social networks and the recommended section right after the end of the reading so that, in the case of having more time to read, users could find more articles based on their interests.

More research

We were investigating how to create the registration to the web to be able to log in and create a list of preferences and saved readings. Most of the 5 users interviewed told us that they preferred to register by email or by logging into Google. Only one person told us that he preferred to do it through Facebook.

The registration process is the usual, you receive a confirmation email to log in. We wanted to make it clear that the advantage of registering was to be able to use the button to save the readings.

Search page

By removing the search bar, we decided to create a special page for it, since in the tests we realized that people assumed that when they searched they could do it for interests.

We added a tag cloud directly, to make it as simple and intuitive as possible.

Style tile

We wanted to respect the colors of the logo and take advantage of them to create an integrated corporate image.

High Fidelity Prototypes

High fidelity home page

Article page with “save to read later” button

High Fidelity prototype screen when the user is registered

You can see the prototype here

[embed]Prototypes - InVision Edit descriptionjordi241392.invisionapp.com

Next Steps

High-Fidelity test in context situations with little time. Adapt the focused design for quick reading in other magazines of the group.

Thanks for watching!