EDITORIAL DESIGN
A responsive online platform for a magazine — A 6 days project at UX/UI Bootcamp Ironhack, teamwork with Jay
Intro
“The rise of the digital press has seen a tremendous peak over the last years. The audience is increasing as Millennials grow older, demanding all sorts of content.
The best magazines and newspapers had already launched their digital version in early 2000, but it has been only in the last 5 years that the digital experience started to take its own shape.
With numbers increasing, publishers are prompted to deliver quality content along with a great digital product for readers to experience a different but still unique act of opening up a magazine and dive into it.
The Challenge
Design a responsive online platform for a magazine, newspaper or blog directed to meet the needs and goals of one of the presented User Personas.
User Persona
Most digital magazine readers are educated, young and upper middle class. Recent studies indicate that they are part of the so-called Millennials.” (Text by Ironhack)
Paula is thirsty! And she’s seeking for profound insights to the world. She’s curious always trying to read EVERYTHING as much as she can. As a future artist, she desires to expand her perspective and dive deep into unknown worlds. Paula wants to network with people and share her opinions while validating and challenging her own opinions and thoughts.
By doing some additional research we wanted to learn about people’s online-reading behaviour and user needs. It revealed that they don’t read word by word but rather scan contents. Priorities of choice are topics, design and writing style. 37% read whenever they can and 60% use mobile devices for that.
Brand Identity
From there we created a Brand Identity for our magazine “Deviant” — which we wanted to be unconventional, maybe weird but OPEN. We want to be a platform for people like Paula who want to build a unique perspective to the world.
Product & Competitors
As a term deviant stands for, the magazine as an open space to discuss topics that are not widely covered in major medias.
Deviant offers unconventional and sometimes provocative perspectives of arts, cultures and international affairs. The topics vary and there is no boundary in terms of discovering something new and contemplating current/ongoing issues. There are 4 categories Arts, News, Perspectives and Events. Deviant News covers major issues in a global scale, Perspectives includes columns, art/book critics and unique opinions. Competitors as well as a source of inspiration for design and content are Spex Magazine, Juxtapoz and Vice Magazine.
Card Sorting
By several rounds of card sorting we structured our content into categories and created a sitemap from that.
Moodboard
We wanted the magazine to be vibrant with vivid color and bold typeface. Black and white are the basic colors and one color that stands out. As the magazine contents are bold, the color and design also had to align with the concept.
We got inspired by our competitor’s clear designs and wanted to adapt that.
Style Tile
We decided to use the Barlow font family for Headlines, because it has a clean, modern style. To visualize enthusiasm we used the Italic for the main Headlines.
The Bodytext is set in Montserrat to provide a good redability.
Simplicity and readability were the main priorities. As we aimed for a website that can be scannable anytime anywhere, the images are designed to hook the audience in order for them to grasp the texts right after. We cut down the use of colors and went for a gender neutral, fresh yellow to highlight categories and text on buttons to make our content scanable.
Mid-Fi-Prototype
In the Mid-Fi we set our layout. It took quite a time to achieve consistency in the design which still needed iteration in the Hi-Fi.
Hi-Fi Prototype — Mobile
Here you will follow Paula’s user flow. She is scanning the content on her mobile, finds an article she likes to read but saves it for later in her personal archive which she can organize with folders and notes.
Desktop-Version
So Paula would come back home, visit our website again were to find her saved article in her archive and then read it on the bigger screen.
As we spend a lot of time creating the mobile version — the desktop version turned out to be just a huge copy of that instead of being responsive actually. That’s why I only a show a screenshot here in order to iterate that, when I find some time.
Next Steps
Iterating the Desktop-Version, doing animations, implementing interactive features and thinking about a print version.
Conclusions
Working in a team has its pros and cons. On one hand the project benefits from different ideas, talents and double knowledge — on the other hand it can be tiring and time consuming to discuss a lot and to explain your ideas/thoughts. So time management is very important. Also testing the desktop-version in a preview earlier in the making might have prevented the actually not responsive design.
