Editorial Design: Let’s create an online magazine
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.
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.
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.
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.
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.
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.
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.
To show a bit better how the prototype works I decided to record it which can be seen below.
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.
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.
