5 days Design Sprint for Natürlich Magazine

“Design a responsive online platform for a magazine, newspaper or blog directed to meet the needs and goals of the presented User Persona.”

Week 5 of Ironhack is all about diving deeper into UI and Motion Design. Working in a team of two together with Oscar we got the task to create an editorial design for a contemporary lifestyle magazine.

User Persona

Our primary user persona we designed for is Elaine, an educated young digital magazine reader who wants to invest more in self-care and self-love while being good to others. She represents the generation of conscious, self-aware and empathetic, open-minded millenials who seed a more compassionate and humane society. You can find her reading National Geographic, The New Yorker, Broadly during work breaks. She often works at home, when she’s not at university or the library. Elaine’s personal goals is to keep exploring new passions and achieve a good work-life balance.

Therefore, she is interested in topics like sustainability, politics, mindfulness and lifestyle. Her major pain point is that there is not a

Visual Competitive Analysis

Based on her favorite digital magazines we did a Visual Competitive Analysis to identify the individual brand identities of each editorial, but also to evaluate if there are any cross-overs between them.

3 completely different visual styles at first glance. With classic minimalist design in Black & White tending to less color and newspaper-like typography, stripped of superfluous element, The New Yorker makes the content stand out and be the focal point. Minimal designs like this one are calming to the mind and focus the user’s attention to the essential — in this case the content.

National Geographic uses a custom serif font NatGeo SemiBold for its cover text along with the yellow box is instantly recognizable, and creates a strong brand image aimed to inspire and educate.

Broadly stands out with a very trendy design with a lot of illustrations and pastel colors. From a visual standpoint their design is meant to be inspiring and wake up the senses of the user.

Moodboard Iterations

To create the overall look and feel of the design we arranged pieces of illustrations, fonts and images intended to evoke a particular style. Here we faced our first blocker in the early stage of our conceptualization. We found out that our initial design style doesn’t isn’t the best solution for our user persona. For this reason, we conducted additional 10 interviews to get the whole team on the same page for the visual design direction.

(all image rights belong to the respected owners)

Moodboard

We wanted that our brand has a fresh, natural, energetic, clean, spirited and elegant style.

Combining nature elements, movement, simplicity, we were consciously trying to recreate the word Growth.

In life everything is in constant movement, reshaping itself and adapting towards a new reality.

During a brainstorming session we also came up with the name of our brand : Natürlich (which means Naturally in German).

Style Tile of Natürlich

To give a more elegant and contemporary look and design feel of our platform we opted for 3 main colors and font called Phase with a generative type concept. It is systematically designed with modular components, which form the base for an infinite number of shapes.

Brand Positioning

During the Visual Competitive Analysis we realized that the 3 editorials have completely different brand identity. The only similarity between them is the content. From a visual standpoint we want to position ourselves as a trendy, elegant and contemporary magazine which keeps our User Persona well-informed on topics like Politics, Sustainability and Lifestyle.

Ideation, Prototype & Test

We did the Crazy 8s Design Sprint to generate a wide variety of solutions to our challenge. In the end agreed to go for a very trendy, minimalist and clean design to focus the user’s attention on the content through a sophisticated but easy to browse layout. We came up with several ideas and put them on paper. We explored different layouts and ways to distribute the content for desktop to make smart real estate decision.

Mid-fi Wireframes by Oscar Martínez

Sitemap

Card sorting turned out to be efficient technique to organize the information architecture of our magazine into logical groups. In the card sorting sessions, the participants organized topics like Movement, Ecology, Activism, Mindfulness, etc. into 4 main categories that make sense to them. They may also helped us label them as Mind, Lifestyle, Sustainability and Politics.

Prototype

Mobile mockups

Learnings

• This week taught me a lot about persistence, sticking to a healthy routine and not losing focus on my final goal. After 5 weeks I can say that the workload for each project gets more and more challenging and as we already covered both the UX and UI modules.
• Another important lesson learned is that you should always stay curious and open for the points of view of the other members in the team. Sometimes the best ideas seem to be the least innovative, the goal is to push beyond your first idea!
• You don’t really want to push a very challenging design to the user, because it turns out that there is a big fear among users not to be able to complete a task and not to perceive accurately your approach. For this reason, one of the main learnings after this week is to test, test, test with real users and after having it tested with everyone who is working on the same project like us.
• I am in love with Animation and Motion Design and am looking forward to becoming more proficient at both Principle and Figma.
• Also, using Figma for the first time as a collaborative tool was incredible, because we were both able to work on all artboards on the same time and apart from fun, it was very productive and beneficial for us as a team.

Thanks to Oscar for being a great teammate!