Rise Magazine: A responsive editorial design
--
One of the most exciting projects we worked on during the Ironhack UX/UI Bootcamp consisted of coming up with an Editorial Design perfectly fitted to a specific persona.
For this project, I worked in collaboration with Juliette Lu, and we immediately agreed to choose Elaine, the eco-friendly researcher, as a persona.
The challenge of creating an online magazine today
Even if print has gone through a serious decline in the past decade, magazines are still extremely popular. Users are more than ever in search of good well written and eye-pleasing content, but “they read more, read longer and subscribe more often to print than digital” (Print vs Digital: How We Really Consume Our Magazines — 2018 edition). In fact, the digital revolution created a new publishing model: some platforms launch online then go into print, as did the music guide Pitchfork. However “evolving consumer tastes, fragmented media consumption, and tighter competition for audience time makes it challenging to keep customers loyal to a title” (Maria Hedengren, CEO of Readly)
The whole challenge for magazines today is to bring their words to life in a way that is far beyond just words, and that’s what we needed to put into actions with our editorial design: To create a polished, vibrant and engaging, extremely pleasing to the eye, digital experience. In other words, we had to find a solution to the following statement: How might we provide an engaging and sustainable digital experience for committed users who love reading paper magazines?
Research and Purpose
We first decided to confirm our approach to the persona by conducting two interviews of potential users who were sharing the same values and goals as our Elaine. That is, being more rational, invest more time in self-care while being good to others, and seeding a more empathic society as a whole.
The insights we got from these interviews were that our users needed engaging and energizing content, as well as feeling a sense of belonging to a community.
Our persona Elaine is a scientific, she reads during her breaks, she needs something punchy and stimulating. She does not have much time for herself and she needs a design that goes straight to the point.
Therefore, in terms of User Interface, we decided to go for a design translating actions into words, presenting serious topics in a vivid, extremely colorful, and very visual way.
Ideation
Our first step towards Ideation was to conduct a competitors’ visual analysis (i.e, used color codes, typography, content categories, icons, responsive design). We decided to analyze more closely three brands that were fitting our persona:
The Cleanest Line (Patagonia’s blog)
Anxy, a Magazine treating of inner worlds and mental health issues.
Broadly, Vice’s magazine dedicated to gender and identity.
Branding
Based on our research, we then defined our brand attributes:
Rise is engaging,
Rise is sustainable,
but Rise is never neutral.
We then created three mood boards and submitted them to a desirability test. We got excited about the artistic orientations we had taken, and conducting a usability test helped us go in the right direction.
Thus, when we submitted the above mood board, we obtained the adjectives we were aiming for:
Energizing, dynamic, positive, modern, fast, versatile, contemporary, activist, authentic, approachable.
With our mood board defined, we could come up with a first style tile and conduct our homepage iterations.
Simultaneously, we worked on our brand and all naturally worked out our name and logo. Rise, a magazine to elevate yourself and reach to others.
Solution
Design Systems
For this challenge, we were introduced to Design Systems, how to create them and how to use them, in order to ensure consistency and scalability to our work. We created our buttons and defined them as symbols in Sketch so that we could use them in our whole project.
Responsive Design
One of the requests of this editorial design project was to adapt the Desktop version to mobile. We took some time to study the behavioral adaptation to mobile of our competitors and defined three mobile screens for Rise Magazine. As the categories were translated by a color code, it was easy to stack them vertically. For a hypothetic development, a translation to code would be equally easy using CSS Grid or Flexbox.
Interaction Design
Last but not least, Rise Magazine was the first project we added micro-interactions and motion to, using Principle. A real challenge at first, I have to say that I deeply enjoyed working with Principle and implementing life and interaction to our design. It gave a sense of completeness to our editorial design and enhanced the user experience.
Takeaways
It was my first time creating a brand and a whole design universe from scratch and I deeply enjoyed it. Working in pairs with Juliette Lu smoothened the whole process, as we immediately shared the same vision and were able to freely discuss our ideas, as well as receiving and giving constructive feedback. Thanks to this project, I learned that being humble and taking the risk to submit a mood board to a usability test is a step that should not be overlooked, as it will validate or invalidate the whole purpose of your design.
This challenge also enlightened me with the Libraries in Sketch and the power of symbols. That was a real eye-opener in terms of efficiency and time-management.
Thank you for reading, I’m happy to get any feedback you might have!
Note: This was a project developed academically. All pictures and illustrations are copyright to their respective owners.
