Martijn van de Zuidwind

A designer doing sites, apps & such

Mail
for inquiries

LinkedIn
for that connect

Curriculum Vitae
if you’re into PDFs

Eurico Sá Fernandes and Jori Regter did the code

Work

Go Short
An impression of the visual design of Go Short.

The website for Go Short, an international short film festival, was a total revamp. While I worked at Studio Airport as an interaction designer, we were asked to design and build a modern and refreshing take on their complex festival program.

This new website now provides and easier way for visitors to explore the festival’s yearly extensive line-up and create their own timetable.


In addition to the design of the site, I wrote an article back in 2017 about how to structure such a big amount of data

Every studio or creative team approaches this a little differently and there’s no definitive answer. When it comes to websites like this one, we start out by getting as much information as possible from our client and her stakeholders with a kick–off meeting. In these meetings we discuss everything; from target groups to structuring the website. It’s basically a short but efficient sprint in which we find a basic structure for the website, in direct collaboration with the client and stakeholders.

After that, the team structures all the information more thoroughly by forming a sitemap. A sitemap is an overview of all the pages and possible actions. It forms a base from which we explore and experiment with information architecture and the wireframing of information and interactions. By that the sitemap changes every so often, as we discover better ways to structure information.

a sitemap of the new site.

A start for the sitemap of goshort.nl. Was this the best way? We’ll figure it out later on when running into difficulties.

The same goes for the wireframes. You can see it as a dynamic part of the design process in which many iterations follow each other up to improve past ways of structuring information and interactions.

A wireframe that shows the main way of navigation: a visual list of film blocks.

The main way of navigation could be a visual list of film blocks. Click on a film block to open a side panel that displays the films part of that block.

A time table where a mouse pointer is about to delete an element.

A personalised time table showing recurring patterns like that film block side panel.

An overlay displaying multiple options to buy tickets for the festival.

Could buying tickets could be based on your personal time table?

How would you structure those 264 films?

So yeah, that’s a slightly different story. Since the start of the festival, Go Short structures their films in blocks. A block contains 2-5 films. As a visitor, you can only visit a film block, not a single film. Kinda makes sense, as all films have a short run time. It’s more convenient to view a collection of them categorised per theme then to walk into one and missing a bunch of others. Besides film blocks, Go Short also organises parties, lectures and competitions during the festival.

As a festival visitor, you probably want to find a film block you like, select that block and make sure you’re able to visit that block.

Three cards show three goals: find film blocks, select film blocks, check availability.

Find a film block, select that block, make sure you’re able to visit that block. Easy, right?

Go Short provided a traditional timetable on their previous website in the form of a timetable which showed all the film blocks on all the festival days. Seems like a proper way to visualise an overview, as it feels familiar to the print variant most visitors will use during the festival.

A traditional digital timetable.

Their previous time table. Traditional isn’t bad, but it doesn’t always allow the most of room for a user to achieve their goals.

People figuring out a printed time table.

A printed timetable for a festival: bring a pen and circle every act you want to see. It’s fine. For print.

Show me the money; What did you come up with?

As mentioned before, we wanted the visitor to discover & collect film blocks and be able to buy tickets for their selection. So we came up with a combination of both:

Shopping cart + traditional timetable = create your own timetable.

In a few steps, the visitor is able to:
– Discover what Go Short’s festival line-up looks like;
– Select what kind of blocks they wants to see;
– Work out a personal schedule for the weekend;
– Order tickets for that schedule.


So...

So we combined those two interaction models into one! To compare it with the two conceptual models mentioned earlier: people can add film blocks to their shopping cart and create their own timetable. Both are recognisable in the way they behave. The timetable is still a direct visual implementation of the conceptual model, but it acts in a more personal way. And the shopping cart pattern is still there, but is directly connected to the timetable. In a visual schematic you can summarise the user flow like this:

Three cards show three actions: discover & select, create & edit, get selection.

Pretty cool, right?

the visual design for the personal time table.

Your own personal time table. Nice.

Wrapping up

A big thanks to Go Short for giving us the opportunity to reinvent the presentation of their online festival line-up. We had a lot of fun thinking up, designing and developing it.

Client

Go Short


Designed while at

Studio Airport


Development

Koen Poelhekke


Design

Prototyping

Wireframing

Iconography

Visual design

Interaction design

Information structure

Expansion of digital identity

Smaller bits

Eurofiber – 2021

A collection of components designed for the new Eurofiber.

Eurofiber has been a provider of industry-leading digital infrastructure since 2000. Together with the crew at iO, I redesigned their site.

An animation showing the mobile menu opening up to reveal a multitude of links to solution and product pages. At the end of the animation, the menu is closed with a button on the bottom of the phone screen to form a loop.

Eurofiber has many products, which I wanted to present elegantly. No hamburger buttons. Through the new mobile menu, users are able to quickly orient around their many offerings.

An animation showing an overly large cursor moving inside the the frame to click on a card.

I see you looking at that cursor, thinking, "it can't be that big, right?". And you're correct about that. It's fake. But the funnel supporting different sized organisations isn't.

Kapitaal — 2020

Thumbnail showing Kapitaal's homepage.

They said Helvetica, black and white. We gave them Helvetica, black and white.

Thumbnail showing the navigation for Kapitaal's website.

Through information architecture, we kept the navigation structure simple as pie. Or hamburger, in this case. Sorry, designer jokes.

Thumbnail showing different button labels.

Scrolling through pages that contain buttons makes labels act funny. Because, why not?

It is always fun to pretend to work with Ramon & Carlien.
Project with Carlien Peijsel & Ramon Goedvree. Development by Rik Frieling.

No Seat at the table — 2020

Thumbnail showing a title card explaining No Seat at the Table.

No Seat at the Table is an online platform to exchange stories of gentrification, the housing crisis and the need for spatial justice.

The original bird illustration is created by Rajab Eryigit.

Thumbnail showing the opening animation for the website.

For this site, we created some fancy shmancy intro animations and different ways to discover stories of gentrification.

Thumbnail showing a mobile map-view.

Do you see that? No hamburger menu! On a mobile screen? No way. Just. Wow!

Thumbnail showing Minem pointing at a monitor that displays the website.

I like to take the time with clients to nail down certain steps in the design process. Minem and I are going through a review here.

Project with Minem Sezgin. Development by Rik Frieling.

Eneco — 2018

Thumbnail showing multiple designs for the Eneco app.

The Eneco app enables consumers to influence their energy bill by offering data on their power usage.

A general menu in the Eneco app

During my time we utilised click data, interviews and surveys to simplify the interface and user flows. We improved the menu through a card sort.

Thumbnail showing a close up of a stepper and a feedback message.

By following the Jobs to be Done model, we focussed most of the redesigned interactions around the goals users have.

Thumbnail showing part of the sprint team during a usability test.

We also realised a bigger shake-up of the app through a design sprint.

Project with Dept & Eneco.

HR Projectadvies — 2018

As an interim project manager Erik Jan helps large corporates go through organizational changes. The renewed site expresses who he is: an expert with an approach that connects people.

Thumbnail showing an illustrated character drawing a checkbox.

We rewrote and restructured Erik Jan's previous website using a priority guide. We also used the guide to build wireframes. Not that that's related to this guy.

Thumbnail showing 4 combined illustrations.

When in doubt, add more illustrations. In this case, we created some abstract ones related to typical HR practices and skills.

Nick, chilling on the a museum floor.

I couldn't find a photo of Nick and me working on this project, so here's a photo of Nick in Voorlinden.
Project with Erik Jan van Dalen. Design & development with Nick Lutgerhorst.

Info

Martijn
Also martijn
Also, also martijn

I'm Martijn, a digital designer from Utrecht (NL) with around ⑧ years of professional experience.

While I focus on tinkering with interfaces and applying UX methods, I appreciate being involved in branding as well.


Currently

Designer at Parta – an app for decision-making processes

Lecturer at Utrecht University of Applied Sciences

Freelance designer – helping out friends and organisations


Previously

Digital designer at iO

Digital product designer at Hike One

Digital product designer through secondment at SchaalX

Designer at Studio Airport


Collaboration is essential to create relevant work. In my freelance practice, I experiment with different approaches of collaboration, be it with clients, specialists in related fields and designers new to the game.

I’ve developed a strong interest in socially driven projects by being involved in ones such as restaurant Syr and Parta. It's also why I started lecturing at Communication & Multimedia Design in Utrecht. Are you working on a socially driven project? I’m always open to learn more. ☻


Some clients I worked for

University of the Arts Utrecht

Dutch Ministry of Culture, Education and Science

Into the Great Wide Open

Amsterdam Art Council

Emergence Magazine

White Ribbon UK

Restaurant Syr

Greenpeace

Kapitaal

Pfizer

eBay


Main skills

Interaction design

Visual design

Prototyping


Also fine at

Concept development

Usability testing

Design Thinking

Design systems

User research

Iconography

Branding

Kanban

Scrum

Agile

GTD


I play around in

Final Cut Pro X

Affinity’s suite

Adobe’s suite

Keynote

Sketch

Things

Notion

Figma

Miro

Jira (with a face like this: 😤)


Typeface

GT Zirkon by Grilli Type