Editorial Project — Magazine

Designing a responsive online platform for a magazine for a specific persona

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.

Learning goals

• Identify the foundation of visual design and best practices through observation, analysis and methodology
• Describe why it’s important to document your work and processes
• Compile an advanced project in pairs
• Present a hi-fi interactive prototype

Persona

For this project we choose Candice for our persona, she is a trend seeker and we wanted to offer a fashion magazine with more tech information, but not just tech, tech for girls.

Candice (28) — The Trendy Marketeer

• She reads Vogue, People, Cosmopolitan, Elle.
• She sees herself as a trend-seeker and uses publications as a source of inspiration for work.
• She reads whenever she has a free slot — especially in public transportation, long journeys during work trips or waiting areas.
• Goals: be on top of the latest trends, dress and appear fashionable, get more tech-savvy.

User Stories

Desk Research

So we started our desk research to understand the market. We search the magazines our persona already read but also other fashion magazines with a different vibe. Most of the fashion magazines have the same structure, colors and layout. Vogue is the more traditional and Cosmopolitan was more colorful. We decided to go in the middle and for that, we started to interview users with the same profile as our persona.

Interviews

For the interviews we talked with women, between the ages of 25 and 40. We wanted to know especially their relationship with fashion magazines. We had 4 questions in the beginning, that according to their answers we added more during the talk.

• What is your favorite fashion magazine?
• Can you tell me about your experience with fashion magazines?
• What do fashion magazines have that attracts you?
• What would you like to find in fashion magazines that you don’t find it right now?

Most of our users read fashion magazines in digital format. Some of them have subscription. What they like the most is trends and information about fashion, but would like to see more about culture, entrepreneurship, etc.

With this, we created our survey to understand better this relationship.

Survey

We did a survey with 18 users, 94% female and 56% between the ages of 30–39.

Insights

• 61% don’t buy fashion magazines
• Vogue was the magazine they prefer to follow, followed by Elle and Cosmopolitan
• They look for in these magazines mostly for style, latest information in trends, fashion tech, and career tips.
• 89% also search for fashion information on social media
• 83% would consider the editor’s opinion about some topic, but at the same time would try by themselves
• 76% consider fashion magazines informational and entertainment and 23% consider it only entertainment
• 69% would you be influenced to purchase a certain product, solely because it was advertised in a fashion magazine, but only if it catches their attention

Visual Competitive Analysis

At the same time we were doing our user research we did our visual competitive analysis. We analyzed Vogue and Elle, two magazines our Persona already read and Dazed and Bazar, that have a different approach to editorials.

We found that all of them have the same visual pattern, black footer, black logotypes, black colors for buttons, and text. Also the fonts were all similar. The colours were basically in images, that way the layout doesn't compete with the fashion images.

Brand positioning

After we talked with our users and study the market it was time for our brand positioning. We decided to keep it simple, following the pattern of the market, with a traditional layout but a friendly editorial.

Mood Board

Our moodboard was focused on a modern trend seeker, looking for good insights in fashion and in culture. Our brand will be simple but bold.

Brand Personality Slider

To position our brand in the market we did the Brand personality slider, with our brand attributes.

Site map

We had a hard time organizing the site map. We wished it to be simple and organized. Our user would wish to have fashion and cultural information, so we did a simple site map. First we did the complete site map with other pages but for this prototyping phase we follow the site map bellow.

User Flow

The user flow in our prototype would have 2 tasks. Find a podcast and a trend. This would be inside our 2 main groups: Fashion and Culture.

Style Tile

Now was the time to define our brand style. To better understand our visual communication we did the Style Tile, a page with the color palette, iconography, logo, button and typography.

Also, it was at this stage that we defined our brand name. We searched for synonimus of fashion, trend, etc and couldn’t find anything interesting. Then as we were doing our research we matched with Dressed.

User test

Ok now was the time to test our magazine. We started with a simple lo-fi to check if it was this path we should follow. For all our our user test we had 2 tasks:

task 1: Look for the fashion category to check the new trends and suggestions
task 2: read and listen to the latest GIRL BOSS´s podcast

Lo-fi prototype

Our lo-fi was really simple because the magic of our magazines would be in the images. We tested our lo-fi and found some good insights like the spacing between images and to add more text to the homepage.

Mid-fi prototype

On our mid-fi prototype we had a looooot of insights!

Some things should be more clear for the user like spacing in the homepage and bigger font text. Also, we needed to have a better division between the areas in the culture page.

Iterations

Between our mid-fi and hi-fi prototypes we did some iterations in the menu. We added in the end a CTA button with a color to give more emphasis to the subscription.

Desktop iterations

Hi-fi prototype desktop

Hi-Fi prototype mobile

Next steps

Iterate, iterate, iterate. Our prototype was good, but online magazines are not that easy to build how it looks. It’s simple details that make a difference like a simple color added to our palette.

Learnings

• There is no “wasting time” when ideating.
• When working in a team plan your work and divide the task to be faster and more efficient.
• Research and insights will keep you away from assumptions and will help you deliver a good product.