[Culturn] magazine, my first Editorial Design

Design sprint in 5 days

For this project, my colleague Maria and I had to design a responsive online platform for a magazine, newspaper or blog aiming to meet the needs and goals of the user persona we were given.

She reads National Geographic, The New Yorker, Broadly.

She wants to invest more in self-care and self-love while being good to others, seeding a more empathic society.

She volunteers for the community

She reads during work breaks. She often works at home, when she’s not at university or the library.

Goals: be more rational, Discover new passions, achieve a good work-life balance.

First steps

First of all, we conducted some interviews with people that fit into our persona. Our goal was to understand what kind of content they consume online and when. The main findings were:

  • Users read in digital format because it’s more ecological
  • Users read in digital format because it’s portable
  • Users have an interest in environment-related articles/news
  • Users often read about politics and feminism.
  • Users prefer credibility over speed

For the market research, we first defined our competitors based on the interview outcomes and eventually, we did a visual competitor analysis which is necessary to understand the competitive space our product will be in and to identify visual elements of competitor sites.

Values of our product/brand

With all the research findings in mind, we determined our brand attributes aka core values of our brand. Brand attributes are adjectives that represent the essence of the brand and help to understand how the brand behaves, it’s gender, age, socio-economic class, psychographics and emotional characteristics.

  • Our brand is cultivated
  • Our brand is trustful
  • Our brand is urban
  • Our brand is NEVER gossipy

Why is brand personality important?

Brand personality contributes to a differentiating identity, especially when brands are similar in product attributes. Personality defines not only the brand but the product class, context, and experience. It also guides the communication effort and creates brand equity. Thus, helps in building an emotional bond with the customers.

Once we knew the unique identity of our digital product, we created a mood board to define our color palette and styles that we will apply later on our digital product.

A mood board is a sized canvas used to explore colors, imagery, fonts, and even words in an effort to explore various visual ideas and concepts that will eventually become a design. The intention is to look for inspiration; meaning, visual examples of other designs that communicate a similar message to ours, or at the very least, display visual traits that we might want to incorporate into our own design.

mood board

Next Steps

Once we had a clear visual inspiration mood board for our product we created the Style Tile. This is a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web.

Style Tile

Our Prototype

Last but not least, we did our prototype for desktop and animated it with principle, it was my first contact with this program and although it took me a while to understand the logic behind it I really enjoyed it.

To define the information architecture of our product, we practiced the card sorting technique in order to group things as per users’ expectations and understanding of the topics.

We also did a mobile viewport as we were trying to learn about responsive design and how to arrange the same information on a smaller screen. Which by the way, one has to be very careful when designing responsive because the neverending scroll can be very monotonous.

Hi-Fi wireframes
Animated HI-Fi

Learnings

  • It is very important to name every item on Sketch correctly to better work on principle later, also to group things, always. I had the same name for different things and rearranging the sketch file took me forever.
  • The mood board went through a lot of iterations because we first had a very girly and naive mood board with colors that wouldn’t represent the essence of our digital product, and it is fine to change it if it has a completely different approach that what you are looking to transmit.

(This project was focused on the UI, Principle and Responsive Design, the content of the articles it’s not self-written)

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
June Calderón Ortega

UX/UI Designer. Positive attitude. Vegan for the animals and the 🌍