Brainfog studio | Illustration & Design Portfolio

Open Sea Lab

This July I worked with my teammates on a project for the Flemish Marine Institute at Open Summer of Code 2018. We made a web application for scientists, students and just anyone who is interested in maritime data.

At first I didn’t really know the benefits of this data. I didn’t know anything about it. But then I started discovering some advantages. For example, if you want to start an oyster farm, you need to know a lot of things about the ocean. For example: how deep is the ocean, what kind of sand is at the floor of the ocean? And a lot of similar questions. This means our app is actually very handy and helpful, and it’s accessible to anyone. On top of that it’s open source, which means that anyone can contribute if they have an idea or a suggestion to make the app even better!

For this project my coaches and I designed the web app and I designed our presentation booth.

We made wireframes for every state in the application so the programmers in my team knew how to set up the code. We made a clickable mockup and tested it on people who have used maritime data.

Brainfog studio | Illustration Portfolio

I wanted the app to be serious and clean, but still modern and up to date. We redesigned their icons to something simple but stylish.

Brainfog studio | Illustration Portfolio

Afterwards we implemented a style guide we made to our wireframes. By the time this was done my teammates already did a lot of backend, so we could start coding the design.

We also thought about the animations and the user experience of the website. This was definitely the fun part. It should be clear what the user has to do on the app, and I think we succeeded well!

Brainfog studio | Illustration Portfolio

Brainfog studio | Illustration Portfolio

When the app was designed I had some time to work on the presentation booth. I worked on an animation that represents a minigame about a fish in the ocean. People could select an area of choice to get data from. Next a small animation of the game was shown so we could select the data on our web application behind the scenes. When the fish arrived at the chest, the data was gathered. Then we could show the results of that area via our web app.

We had a big banner where we projected our minigame on. This is an early render of the animation:

I made postcards and stickers to give to the visitors of our booth.

Brainfog studio | Illustration Portfolio

We also offered people vegetarian sushi when they finished the minigame and gathered data. Of course no fish were harmed!

Brainfog studio | Illustration Portfolio

At the front of our booth we hung a board with a pixelated boat. Me and my coach painted this very carefully ourselves. It was a nice touch to the booth.

Brainfog studio | Illustration Portfolio

This was everything for Open Summer of Code 2018! I hope you enjoyed our project!

Thanks to: Catherine Lesuisse, Ismaila Abdoulahi, Marie Mwinkeu, Miet Claes, Xavier Bertels, Pieter Vander Vennet

Github page:

Go back to the overview

Post a Comment