Project 4: editorial design

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.

For this project of the Ironhack UX/IU bootcamp, which was heavily focused on UI, I was paired with Hajrah and Lucie.

Persona

With this project the persona was already provided. Our persona was Candice, but who is Candice?

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.

Research

Starting with an already provided persona, we wanted to start researching some of the magazines she is interested in. As so our research started with looking at our User Persona. As Candice reads most of the popular fashion magazines we started with analysing Vogue, People, Cosmopolitan and Elle. What do these other pages have?

Next to this we wanted to validate our findings by checking this by interviewing users. Some of the feedback we received from users about magazine is:

“ I look for trends from different part of the worlds”

“ City guides with hotspots, stores and shops when travelling”

User Journey

Based on our research we combined everything we collected from our persona and User Persona in the User Journey to see were there are problems, and what to solve for in our online magazine.

After analysing the User Journey and focusing on the things our magazine should have. We collected all this feedback in the Moscow Method.

We learned that:

  • There is a lot of information on what to wear and this should be easy accessed based on interest

This let us to the following problem statement:

Candice needs to know the latest fashion advice to pack up her summer vacation suit case because she is overwhelmed by all the choices around her and in her closet

The Concept

Based on our research we found a solution that might help our user Candice. The idea is to have the option to collect your own interest in articles in one space to read it later or read it again. Our online magazine Grace was born.

The Design

How should our magazine look like? We started brainstorming on our colours and typography. The look and feel we were going for was modern and contemporary. We wanted to keep our design simple with a pop of color to highlight some parts of the page. For this accents color we picked the color yellow as its stand for confidence and optimism, which we wanted to show in our magazine.

The overall primary color we picked is dark grey as it represents classy and high-end.

For the fonts, we went for Avenir as it has a modern feel to it which we were going for in our magazine.

Style Tile

We put together a moodboard for the inspiration prior to designing our magazine:

User Flow

Now that we know how we want our magazine to look like and which concept it should have. We created the Userflow for Grace.

Low fidelity

We started sketching out our first ideas of the concepts with pen and paper. We tested our concept on our users and incorporated this feedback in the mid fidelity. The iterations of the design from the sketch to the High-fi are displayed below.

Responsive design:

The project was about designing a responsive magazine. This is how our design will look like on desktop, app and tablet.

Learnings

One of the main things we learned during this project is designing for a responsive for multiple devices. Next to this we really focused on the visuals which made us more interest in learning about UI.

We also learned that working with an already provided persona is different than starting with creating one.