Editorial Design Case Study

Elena Sanjuan
Nov 3 · 6 min read

Unique. Magazine

Intro.

The audience for digital contents in different formats has increased consistently over the past years as the traditional printed press has been reduced to a minimum.

The shift started off in the 2000s when traditional magazines and newspapers launched digital editions. Nowadays, access to digital magazines is more common through social media (Instagram, Facebook, etc.) than from a browser or dedicated app.

The purpose of this case study is to give you an overview of the creation process of unique.

Challenge.

In this context, our team was given the challenge of creating a responsive online platform for a magazine targeted to young, professional women. We were given a user persona, Maria, who would become a critical tool to kick off our design process.

Our User Persona, María

Understanding Maria, we defined user stories that helped us define the functionalities our products required:

  1. As an impatient youngster, I want to pre-visualize the time it will take me to read an article so I can organize myself
  2. As a trendy marketeer, I want a personalized feed based upon my preferences so I can be up to date with the latest trends
  3. As a marketer, I want to receive alerts of new contents, so I can get inspiration for my job
  4. As a fashion lover, I want to be able to save looks I love to keep up with the latest trends
  5. As a busy worker, I want to be able to save content I find interesting to check it whenever I find the time

Research.

In order to understand the context of digital editions, we started off analyzing existing products with a similar focus. To do this, we carried out a benchmark which enabled us to identify patterns and best practices. Main trends we identified were:

  • Minimalistic design
  • White background/black or charcoal text
  • Blank space
  • Cards without CTAs
  • Tailored content according to interests
  • Animated photography and videos
  • Hierarchy — highlighted articles
  • Recommendations interests
  • Hamburger Menu to organize all the information that would normally be in the footer combined with infinite scroll so the content feed never ends

We also developed a competition analysis to define how we wanted to position ourselves in the market.

Competition Analysis

Finally, a moodboard helped us start defining how we wanted to develop our design.

Moodboard

Solution.

Functionality.

Once we had developed this research, we were ready to define a strategy for our product based upon these key functionalities that would become the value proposition our MVP (minimum viable product):

  • Create a web responsive product which we would develop mobile-first since most of the traffic would come from mobile devices
  • Different formats of content (video, image lookbook, etc.) to engage a younger audience more eager to consume audiovisual than written options
  • A personal profile where users can save content and organize it according to their preferences or availability
  • Interactive situations that would engage the user and make him participate

In order to validate these key functionalities we first made paper prototypes to get ideas in a fast and cost-efficient way. Once we tested the strategy through the paper prototypes we transformed them to digital low-fidelity wireframes that were then developed into high-fidelity wireframes.

Visual.

At this point we focused on the user interface (UI), defining how would the product actually look like. We used the collaborative interface design tool Figma to create the visual design of the product.

In order to establish a coherent design for our platform and have the project continue consistently, we built a design style guide for our UI. A style guide is the documentation of all the visual design elements (colors, typography, icons, buttons, cards, etc.) and the measures (proportionality, spacing, margins, etc.) used in the UI that provides us with rules and context on how to achieve brand consistency.

Visual design style guide

Typography.
As our product is 100% digital, we wanted to have typography that is easy to read on any sized screen and is as accessible as possible. To achieve this, we chose the Google Font Montserrat as our typography for three main reasons:

  1. It offers a variety (normal, italic, bold, fine..) which enables us to create an overall graphic balance and hierarchy
  2. By being Sans-Serif it is very accessible and readable on a digital screen
  3. By being a Google Font it helps us to have better performance and a general loading speed on the page

Color.
We chose a bright yellow as our main brand color to give freshness, joy, and energy to the design. We also added a bright orange as the complementary brand color to highlight texts.

We used a white background in order to have a clean design where we can take advantage of the blank spaces and use them as design elements.

For the texts, we established three colors: a reduced black, grey and white. We used a reduced black instead of a pure black in order to reduce the contrast against the white background and this way decreasing the possibility of eye fatigue.


Components.
We used the Atomic Design system to standardize the visual elements in our design starting from the smallest elements moving into bigger, more complex ones. We selected the Google Material Design iconography to go well with the chosen typography and created different cards and navigation bars to be used as the main components of our interface.


Grids and Spacing.
We based our spacing in the 8-point grid to adapt the design to different screen sizes and orientation. We established the margin in mobile to 16px to ensure that all of the content would be within the clickable area of any device. We doubled the spacing to scale the design to desktop maintaining always the grid of 8px.

Prototype.

The result that you will see in the prototypes below is an overview of the established key functionalities added to user flow, having the focus on our value proposition.

High-fidelity prototype showing all the different sections of the platform

High-fidelity prototype of the #Lookbook. Pattern inspired by the mass use app Pinterest

Next Steps. & Learnings.

After presenting the MVP and having tested it with users, we came up with a list of features that could be added to the product further on to bring more value for the users:

  • Be able to filter articles by format (video, text, reading time, etc.)
  • Change the focus of the article according to the answers to the interactive questions
  • Be able to upload your own photos to the #Lookbook
  • Be able to follow and recommend content to other users within the platform

And through this project we learned:

  • The importance of leaving enough white space between elements (our design in this first prototype was lacking it)
  • Use of Components in Figma (we love them btw)
  • The use of Atomic Design system

Thanks for reading!

If you liked this case study, please give it a 👏.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade