Editorial Design: Let’s create an online magazine

Mindflow Hi-Fi Mobile Wireframe

In this week’s project at Ironhack, my task was to 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. We worked in pairs.

We had only four days to deliver our finished and polished design (day 5 is always a presentation), without forgetting about the consistent, branded, and engaging experience.

Our main focus this time was on the UI part. However, we did some competitor research and checked if people really need another online magazine.

User Persona

To give you a better explanation of our research and the final product, I’ll start by showing you which user persona we went with.

User Persona Elaine The Eco-Friendly Researcher

Since our User Persona was an eco-friendly person and had very limited time to read the news during the day, we decided to focus on mind and soul. Our magazine had to be very intuitive, easy to navigate, and filter, with calming colors.

We couldn’t find any reliable competitors, because National Geographic and The New Yorker were not even close to what we had in our minds. We simply checked what other magazines looked like and we made a list of features we liked and we didn’t like.

Moodboard

The trickiest part of this project for me and my partner was a mood board. It seems very easy but we had some problems with understanding the concept of it. Luckily, we came up with something very smooth and calming. Exactly, what we expected.

Moodboard

Style Tile and Sitemap

After creating our mood board and sketching lo-fi wireframes we moved to a more detailed design. To start with our mid-fi we needed a stile tile and a sitemap. We kept the same colors as in our mood board because we believed they were representing our vision in the best way.

Stile tile

Secondly, we discussed the sitemap. We focused on Mindset, Food (because it’s always a comforting topic), and soul. In this version, we didn’t create a blog page but in the future, we’d like to create one as well. It will be possible to create your own account and share your story with everyone.

Sitemap

User Flow

Our user flow was very simple. What we wanted to focus on and highlight was the “filter” option. Our user persona had very little time for any reading. The idea was to give her the possibility of filtering only the topics she could be interested in that particular day.

User Flow

Time to prototype!

When our style tile, sitemap, and user flow were ready we started working on our mid- fi prototype. Since we had only 4 days for preparations we knew our mid-fi prototype had to be very detailed. After finishing we conducted a usability test and found out what was difficult to understand for our users. There were some minor mistakes hence why we moved to hi-fi design.

Hi-Fi wireframe

On our presentation day, we were really satisfied with our design. There was one thing that needed improvement but because of the lack of time, we couldn’t have done it. It was the heading! Everything looked perfectly fine until we inserted a background photo. Unfortunately, the color version showed more flaws in our design than the greyish prototype.

Final design

When the week was over and I had some time to reevaluate the design and I started implementing some changes. I updated the headings which made everything more clear and visible. It also made the navbar easier to read.

Hi-Fi wireframe- revised

To show a bit better how the prototype works I decided to record it which can be seen below.

Hi-Fi prototype

Mobile Version

As an additional challenge to our project was a mobile version of our magazine. That was the first time I was creating a mobile version as a designer. I did it before as a web developer. I have to admit I was a bit afraid of starting this part. I find mobile design much more challenging. I created a simple flow where the user had to choose the “food” category from the navbar and check the first available article from this category.

Hi-fi prototype for a mobile version of the magazine

Learnings

This project has been so far my favorite. I loved the idea we came up with my partner, we had a very similar vision. I understood how important is teamwork and exchanging ideas. It’s easier to work in pairs or groups than deciding on your own. Designing has always been my stronger side and I feel that I’m growing better every day of Ironhack Bootcamp. Over the last 5 weeks, I learned so much and I’m only looking for more to come.

--

--

--

A driven and enthusiastic project manager. Working in Tech has been my dream hence why I study WebDev and UX/UI Designing. Polish Girl based in Berlin.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

False Pride, Dreaming + Misdirection in Design

Every designer is an artist! Right?👀

5 prototyping approaches

Image of paper, digital, and native product

How to layer outfits like a true fashionista

Sketch more. Sketch less.

If Your Kuda Card Goes Missing

From a few insights to a key feature

Go-ahead for £40m Manchester spec office scheme

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
Marta Suchowicz

Marta Suchowicz

A driven and enthusiastic project manager. Working in Tech has been my dream hence why I study WebDev and UX/UI Designing. Polish Girl based in Berlin.

More from Medium

#CaseStudy: Digital Clinic — A Clinic Application to Make a Registration More Easier for Rapid Test

REVIEW SERIES: GOOGLE UX DESIGN PROFESSIONAL COURSE (from a beginner’s perspective)

Simple Guide to Classes in WEBFLOW