UX/UI Design / Product Design

Patchwork: your Daily Dose of Inspiration

Designing a responsive editorial magazine for young creatives

Screen of the stating page of Patchwork - Desktop

All the creative industries in just one place.


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.

Competitors Visual Analysis

A visual analysis of the competitors

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.

Style tile created for Patchwork

Style tile created for Patchwork

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.

Low fidelity prototypes for Patchwork

The user flow which describes the process a user would go through.

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.

Screens for the desktop version of Patchwork

Low and mid fidelity prototypes of the app

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.

High fidelity prototypes for Patchwork's desktop version

High fidelity prototypes for Patchwork's desktop version

High fidelity prototypes for Patchwork's mobile version

High fidelity prototypes for Patchwork's mobile version

If we had more time than the four days which were assigned, we would have liked to perform more user testing, develop the branding, design for other devices resolution, such as tablet.

Finally, we also would like to design a social community aspect to Patchwork, enabling interaction between users.

Good teamwork is fundamental in each project.

This project reminded me of how great it is to work with someone who is visually oriented and aligned with your aesthetical sense. It’s very rewarding when you can inspire each other and generate ideas together— no matter how daring and out of the box — to design a great experience and interface for the user.