Revamping an art & sustainability website

Client: Kunst-Stoffe
Date: 2017
Services: UX, Web & Illustration

What is Kunst-Stoffe?

Kunst-Stoffe is an organisation in Berlin that collects second hand materials to resell them to artists for a fraction of their original price. The goal is giving those materials a second life and reducing the great amount of waste that our consumerist society creates.

Customers

Their customers are artists, educational institutions, schools and DIYers.

Apart of the material warehouse, Kunst-Stoffe organises workshops, ecological projects, events and art exhibitions.

My role

I was responsible of redesigning their website, improving the overall user experience by organising their information architecture in a clear way, and refreshening their visual image with a new look. I created a simple style guide with illustrations to match the new designs.

01. Information Architecture

After analysing the former website and researching similar projects I started working with diagrams to organize it’s information architecture. I created a Site-Map with new information for this website.

02. Low Fidelity Wireframes

I started shaping the new website structure with low-fi wireframes. I presented them to the Kunst-Stoffe team to discus them and gather feedback, that I would take in consideration to keep refining the designs.

03. Medium Fidelity Wireframes

These better quality wireframes allowed me to present the website structure in more detail to the team. We discuss them in detail before preceding with the refinement of the designs.

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 made simple and easy to understand illustration to convey essential information in different sections of the website, using a style that matches DIY, and using the brand colors.

06.High fidelity Mockups

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

07. Front-end Developement

I installed WordPress in the association’s server and choose a theme to customise it with CSS and make it look like my designs. I also installed and configured several plugins to boost the website’s performance, security and SEO.

08. Results

This are the end designs resulting from this project. Everything that appears in the images was done by me: UI, illustrations, photos, flyers… even the recycled plastic that appear on objects were made by me, since I took part of the “Fantastic Plastic” workshop organised by Kunst-Stoffe and took pictures for the web.