Machwerk-responsive-Showcase-gradient.jp

MACHWERK

User Interface

The Client

GoVolunteer, a German NGO based in Berlin, connects volunteering projects and social initiatives with people who want to help.

The Context

GoVolunteer resides in Alte Munze, an old building not far from Alexanderplatz. They have a great space, which they turned into a coworking location, and share it with other NGO's. Since it is going great, they decided to create a website and I was handed the following brief.

The Objective

Design a simple yet unique landing page that would showcase Machwerk's cool, rough new co-working space as well as what it has to offer. 

The Brief

  • 3 Sections showcasing the space's main offers

  • A contact page with a contact form and a map

  • Dual language (English & German)

  • Has to fit Machwerk's new branding

  • Pixel-perfect, grid-based, B&W UI, large colorful pictures, large titles, clear structure

  • Responsive design (no need for tablet view- Google Analytics insight)

  • Infrastructure for future sub-pages and updates

The Team

I designed the website in close collaboration with GoVolunteer's Product Development team, which includes an Art Director (Leif Lobinsky), a Senior Fullstack (Marc Altmann), and another Frontend Developer (Davide Cannerozzi).​

The Process

  • Research of other Berlin-based co-working spaces' websites

  • Wireframes, ideation, and iterations of the designs based on the CEO's and Art Director's feedback

  • Photoshoot of the space

  • Fonts research

  • Hi-Fi prototypes 

  • Hand-off to developers

  • Launch set to end of August, future iterations planned

First digital wireframe

MACHWERK one pager.jpg

Moving to hi-fi

Iterated version, exploring styles

Homepage_options.jpg

The Branding

MAXCHWERK_Logo_final.png

The logo was designed by Leif Lobinsky

MACHWERK_design guidelines.png

I created the style guide based on the brief and in collaboration with the Art Director

Final Version

Screens homepage machwerk casestudy.jpg.