Kunst-Stoffe e.V.

Client: Kunst-Stoffe
Date: 2017
Services: UI & UX Design, Information Architecture, Web Design, WordPress

Kunst-Stoffe is a non-profit organization from Berlin. Their goal is to collect and store valuable “trash” to resell it for a fraction of it’s original price. Their customers are artists, educational institutions and DIYers. 
The objective is to give a second life to materials and reduce the great amount of waste that our consumerist society creates.

Kunst-Stoffe has expanded throughout the years and apart of the material warehouse it also organizes workshops, runs ecological projects, takes part in DIY events and participates in art exhibitions. I got the task of thinking and designing the interface of their new responsive website. I wanted to improve the overall user experience by organizing their projects and information with more clarity. I wanted to create a sleeker interface that would freshen their online image.

01. Information Architecture

After analizing the former website and researching similar projects in the field, I started working with diagrams to organize the information from the old web site and the new information that they wanted to include in the  in this new web site. I created a Site-Map afterwards.

02. Low Fidelity Wireframes

I started shaping the web site with that information in low-fi wireframes. I presented them to the Kunst-Stoffe team and discuse them one by one. I revised them afterwards accordingly.

03. Medium Fidelity Wireframes

These better quality wireframes gave me the chance to present the website structure with more detail to the team. We discuss them detail before creating the high fidelity wireframes.

04. Style Guide

Following association’s logo and brand identity, I created a Style Guide that would establish the guidelines of the web site, and be useful for coming online and offline materials.

05. Illustrations

I had so much fun crafting this illustrations for different sections of the web site. I followed the colors of the style guide to do them so that everything would follow the same aesthetic line.

06.High fidelity Mockups

Created with Sketch, I applied the style guide to the medium / black and white fidelity wireframes

07. Front-end Developement

We installed WordPress in the association’s server and choose a theme to adapt it to look like our designs. I implemented it with HTML5 and CSS3. I also installed and configured the SEO plugin “Yoast”, and some other WordPress plugins to boost the site’s performance.

08. The outcome

This are the final results of my designs

09. Responsive Website

This is how the designs adapt to desktop computers, tablets and mobile phones.