UX/UI Case Study: Redesign an online magazine.

4 min readDec 3, 2020

We are asked to redesign a responsive online platform for a magazine, newspaper or blog that meets the needs of a predefined Proto-Persona.

Proto-Persona

Elaine will then be the starting point of our case study.

The Magazine

Matching our defined Proto Persona, we have chosen Opcions.org magazine. Opcions is a printed and online magazine awarded by L´APPEC (Association of Periodical Publications in Catalan) as the Best Digital Catalan Publication of 2020 “for the promotion of sustainable, responsible and local consumption with a careful design and great credibility “.

Research

There is a growing trend in the consumption of digital information among Spanish readers.

Even if the 30% of Spaniards prefer to read on a more appropriate device, half of the population read books on their mobile phones. Mostly 45 minutes at a time!

We want to study, learn, and understand paper reading behaviors to improve reader’s digital experience within our product.

Interviews over 7 people

User Persona

At this point and after contrasting our assumptions with the real data obtained through our research, we can convert our Proto-Persona based on suppositions, into a User-Persona based on tested data with real users.

Nielsen heuristic evaluation

During this early stage of our project, this usability engineering method completed with some task analysis, will save us considerable amount of time. We will identify usability problems in the current webpage design so that they can be attended to as part of an iterative design process.

POOR VISIBILITY OF THE SYSTEM STATUS
Users can not identify their current location in the site’s structure.

ERROR PREVENTION
The system does not notify the users when they access the cooperative’s website from the magazine page.

AESTHETIC AND MINIMALIST DESIGN
Very crowded information with a non accessible format.

Card sorting

This method will help us to organize the structure and labeling of our menu themes and filters.
It is about creating cards according to the contents of the existing website. Let the users group them together to help us understand their mental models.

Then, we cleaned up the article page to avoid distractions, with the aim of bringing our readers closer to their comfort reading zone.

We wanted to go further and added an extra feature with which the readers can customize their reading experience. What is more, with BeeLine Reader the users can substantially improve the accessibility.

fail fast and fail often

User testing is an essential part of our UX design process. After evaluating our Mid-fi product by researching it with 5 of our representative users.

5/5 Users do not identified the reading mode feature.

4/5 Users had difficulties identifying the filters.

3/5 Readers are missing links to blogs and social networks in the articles.

Style Tyle

Opcions.org magazine uses three different typefaces. We decided to use only two, Poppins as the main typeface and a PT Serif for the articles content. We wanted to improve readability and even though the sans serif fonts are meant to be more legible, our users are used to reading books with serif fonts.