Introduction

This is a case study for one of the projects I’ve completed during my UX/UI Design Bootcamp at Ironhack Berlin.

Our 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.” The final result had to be a consistent, branded and engaging experience for readers. This project, more than any during the course, was very focused on the visual component of the interface.

In a design thinking approach, users are in the centre of the whole process. As such, I suggest we first take a look at our User Persona, which was randomly assigned to us. Let me introduce you to Paula.

Our first step was to analyse the User Persona and try to reflect on it to design an appropriate experience and interface.

Paula is a Laid-Back Creative. She is a 19 year old student. She reads Vice, Rolling Stone, Le Catch and other webzines. She wants to be an artist and connect with people. Paula read anywhere and everywhere.

Her goals are to be cool and achieve her dreams. Read the most influential authors from her time to show off on Instagram. Have her first expo soon to start being “someone” in the art scene.

Analysing the User Persona, we were able to deduce Paula is passionate about art in every form and needs to get inspirations daily and keep up with trends.

The next step in our design process was to analyse the competitors above listed — Vice, Rolling Stone-, both in content and visual terms.

We deduced that such competitors overloaded users like our persona with too much content which is not relevant. We could also find a lot of promotional content, focused on converting the user.

From that, we concluded that young creatives need an efficient way to find their “daily dose of inspiration” because the existing webzines display content which is not relevant.

With Patchwork, we then wanted to design a creativity hub, a platform where people like Paula can draw inspiration from selected stories from the creativity industries. Paula’s daily dose of inspiration to inspire her in her artistic work.

The name “patchwork” came to us because our goal to incorporate many distinctive and seemingly disconnected visual elements. Patchwork also serves as a representation of the diversity and broad range of the creative industries.

We started thinking about what we wanted to create with Patchwork. We pictured Patchwork as an inspiring, unconventional, contemporary and quirky magazine.

With that in mind, we set to create a mood board which represented those values and tone of voice.

For Patchwork’s image, we handpicked pastel colors, which we associated to different categories of the creative industries. The colours are both soothing and accessible but also make the whole design more playful and lively.

In terms of typography , we chose a very functional and readable sans-serif font, Karl. For the headlines, we chose Lora.

Our next step was to create a user flow to represent the journey of the user on Patchwork. This helped us visualise the screens we had to design for the project. We also produced a sitemap to represent all the categories within the Patchwork.

Once that step was done, we grabbed the paper and the pen and started sketching the screens we had in mind: the main page, the category page and the article page.

We followed the usual methodology in a design thinking approach: low-fi to mid-fi to high-fi prototypes.

You can take a look at some of the high fidelity screens of the final product down below, on both desktop and mobile versions.