Patchwork

User Interface • MVP • Branding • Mobile • Desktop

At Ironhack Berlin, our team has been challenged with an exciting project: designing a digital magazine and its branding. That’s how Patchwork was born, a webzine that could provide a daily dose of inspiration for young creative’s minds.

my role
UX/UI Designer
client
Ironhack Bootcamp Project
Timeframe
November 2021 - 1 Week

Let’s first empathize with our User Persona we got for the challenge, Paula — the laid-back creative.
She’s 19 and all she wants is to be cool and achieve her dreams. She usually reads webzines everywhere and influential authors to show off on Instagram.

We analysed her and understood thatshe is passionate about art in every form and, in order to achieve her goal of being an artist, she needs to get inspiration daily and keep up with trends.

Patchwork

User Interface • MVP • Branding • Mobile • Desktop

At Ironhack Berlin, our team has been challenged with an exciting project: designing a digital magazine and its branding. That’s how Patchwork was born, a webzine that could provide a daily dose of inspiration for young creative’s minds.

my role
UX/UI Designer
client
Ironhack Bootcamp Project
Timeframe
November 2021 - 1 Week

User Persona

Let’s first empathize with our User Persona we got for the challenge, Paula — the laid-back creative.
She’s 19 and all she wants is to be cool and achieve her dreams. She usually reads webzines everywhere and influential authors to show off on Instagram.

We analysed her and understood thatshe is passionate about art in every form and, in order to achieve her goal of being an artist, she needs to get inspiration daily and keep up with trends.

Competitive analysis

The next step in our design process was to analyse the main competitors — Vice, Rolling Stone-, both for the type of content they offer and their brand.

We could then define the following pain points, very important for us to define the problem and the hypothesis:

  • lack of hierarchy
  • overload of information
  • non-relevant content
  • too many categories


We wanted to design a creativity hub, where Paula can draw inspiration from selected stories. Paula’s daily dose of inspiration, Patchwork!

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.

UI REFINEMENT

ESTABLISHING THE BRAND

We had to build an entire brand from scratch. After we established the Brand Values, we created a Mood board and the Style Tile. All of these elements were fundamental for us to work on the final Prototype in a consistent and clear way.

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.


User Flow

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.

IDEATION

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. Below you can find examples of the screens, both for Desktop and Mobile devices.

Final Designs

Here you can see the final design of the Homepage.

Click here to see the complete Prototype.

Next Steps

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.