Editorial Design Project

This article has been written for the assignment of Ironhack — full time UX bootcamp in March 2022 and its aim is to design a responsive online platform for a magazine.

Challenge

Our challenge was to design a responsive online platform for a magazine newspaper, or blog in order to meet the needs and goals of the User Persona assigned to our group. The final product here should be a consistent, branded and engaging experience and all the documentation that would allow the project to continue after our intervention as UI Designers.

Solution

Based on the task we decided to create an online fashion magazine Mona with minimalistic approach where users can read the news about latest trends, beauty advices and obtain knowledge about a variety of industry-related experiences.

Design Process

Following the design process doesn’t just give users an intuitive experience — it also gives designers the opportunity to iterate and improve their design.

User Research

We stared the research by choosing our persona from the list. That’s Clarie:

To be able explore more User persona and identify her needs, expectations and problems we decided to create a short survey for “trend and fashion seekers”. With the question “how often do you read fashion magazines” we could select the target group we wanted focus on.

The Survey

We asked 8 different questions and got 19 answers. Our research goal was to find out more about the target group’s online reading behaviour and discover their frustrations related to their experience.

Age:

18 -29

Main Goals:

Inspirations, finding fashion trends, shop the look

Magazines they read:

Vogue, Elle, GQ, Cosmopolitan, Hypebeast, Harpers Bazaar

Frustrations:

Difficult navigation process, not finding the right content

Insights:

• Importance of images: catchy images catch users interest and make them click on an article
• Considering the category “Trends” (most of the users would like to find a clear content related to this section)
• Narrowed categories could help the users to decide which article they want to read
• Implementing clean, organised look to improve the visual experience

We organized the answers by implementing Affinity map so we could see the repeated patterns and visualize the possible opportunities.

Empathy Map

Another tool that helped us understand our user’s needs was Empathy. Using design thinking methodology we broke down our notes into four main character categories: think, say, feel & feel, see, hear, see and do. As we worked through the questions to understand the problem, we brainstormed possible pains and gains.

User Journey

After better understanding the user persona we continued the research with user jorney. It helped us discovering users pain points, emotions and the overall feeling about the experience. It was an important step to better understand customer expectations. As we can see below, the biggest pain points were not being able to find article about “the latest trends” and complicated navigation process. The user persona didn’t like the small photos and lack of minimalistic design. The pain points brought us ideas for possible opportunities — simple, minimalistic design, engaging and relevant home page sections and simple navigation.

Problem Statement

Based on our User Persona and the User Journey Map we formulated a concise Problem, How Might We and Hypothesis statement before entering the the next stage.

User Flow

Once we knew the goal and expectations of the user persona we continue with defining the user flow. The path starts with organic google search and finishes with user reading the article, with an option to share, add to favourite or pin the image.

Visual Competitive Analysis

Second important part of our research was choosing our potencial competitors and performing a competitive analysis. We tried to understand the trendy magazines and the industry they belong to. Since competitors could emerge at any time or could increase (or improve) their offerings, our research was iterative and continued til the end of the project. We started by identifying and categorizing out top competitors and conducting SWOT analysis for each other them.

Main competitors:

• VOGUE
• GQ
• ELLE

The next helpful tool in the process of market research was creating competitors mood boards in order to identify their Brand Atributes. Moodboard is a guide that allows reflect what a customer’s experience is like when interacting with a brand or product. This process brought us many good ideas about how we wanted to develop our design and also showed us what we wanted to avoid. By comparing brand atributes from our competitors, we could gather inspiration and tips for our future Design.

“People do not buy goods & services. They buy relations, stories & magic.” — Seth Godin

We can break this relationship down into a simple equation:

CRAP Principles

Contrast, Repetition, Alignment, and Proximity. Using all four of these elements helped us to design our magazine with a polished appearance and catch readers attention. To practice these principles and know on which aspects we should pay more attention when designing an editorial we decided to analyse our competitor website and detect each of the four elements.

Mood board

Next, we decided to plan our brand visual identity. Each of us created the mood board and then we merged our favourite ideas into one final mood board. Defining our style tile made us sure that each person of our team was on the same page in terms of the look and feel before we started to build the design system. It also helped us set our design standards and maintain continuity. At the same time,it was a good basis for our for potential customers.

Style guide

Typography

Since our final product was a fashion magazine with minimalistic approach we wanted to make sure the typography we choose is easy to read and mantain the clean, minimalistic look. To achieve this, we chose the Google Font Cinzel as our typography. It let us creating the hierarchy and overall graphic balance.

Color

We chose a pure yellow as our main brand color to give creative and fresh look to the design. Using a white background helped us to creat clean design and minimalistic look. For the texts, we established three colors: a reduced black, grey and white.

Sketch and Low-Fi Prototype

Before starting to sketch we brainstorem ideas about the first prototype. The comparition between our sketches helped us to adjust before moving on to our mid-fidelity prototype.

Mid-Fi Prototype

Our mid-fidelity prototype was a way more comprehensive and at this point we were able to visualize the whole happy path of our user. We created 3 different mid-fi prototypes: mobile, desktop and tablet version.

Hi-Fi Prototype

On each of 3 devices we can see Clarie opening the website and scrolling through the first page. Then she is looking for an article about the latest fashion trends. Very quickly she is finding the category “trends” and then article that she wants to read. As you can se below, to maintain the consictency and “clean look” we decided to change menu in the mobile version for hamburguer menu.

Next Steps

The next important thing we would like to reach is testing our prototype to obtain users feedback and iterate. We would also like to implement micro-interactions in order to create more intuitive and dynamic experience.

Key Learning

And through this project we learned:

• The importance of using the components while designing the Prototye
• The use of Atomic Design system

We hope you have enjoyed reading about our project of creating unique. and we would love to hear your opinion/comments!