
![Side view of Landshapes](/images/projects/landshapes/landshapes-topdown.jpg)

<Block>
    # About the project
    <div>
        For my self-initiated graduation project *“AI for Experience: Designing with Generative Adversarial Networks to evoke climate fascination“* at Delft University of Technology, I had the ambition to bring the notions of design, climate and AI together. I wanted to work on a project that tackles the global challenge of climate change and simultaneously explore how to use Machine Learning in my work.

        Parts of this project was done in collaboration with [Google AI in Berlin](https://research.google/locations/berlin/). The pitch presentation that I sent to Google AI was met with an encouraging excitement, and in the following months a small team of Googlers and I supported each other in research and concept iteration before diverging into different directions.
    </div>

</Block>

<Spacer />

## Landshapes Showcase
<YouTube youTubeId="3WJbkTkYraE" title="Landshapes Graduation Showcase"/>

<Spacer />

# Approach 
Being the sole initiator of this project gave me all the freedom to explore a domain of my own interest. Yet, it also meant that I had to set the design brief and project constrains for myself. 

My main two goals for the project were:
1. Explore the use of Machine Learning as a practical design tool (something I was curious about for quite some time already)
2. Create an experience that utilizes climate data and Machine Learning to foster climate engagement

<Spacer />


<Block>
    # Prototype, test, reflect, adapt, iterate
    <div>
    Based on literature review, interviews with climate scientists and my own experiments with Machine Learning, I developed a first design direction.

    From there onwards, each week was filled with immense prototyping, testings those with participants, reflecting on the new findings and adapting based on those findings for the next iterations.

    Through this process, I narrowed down my scope and revise the design towards its final form.
    </div>
</Block>

![Various cubes with generated landscapes floating in space](/images/projects/landshapes/landshapes-prototyping-flying.png "Quick, interactive prototypes like this fly-through of fictional cubic planets were tested with users")

<Block>
    ![Height map of a landscape](/images/projects/landshapes/landshapes-prototyping-3D.gif)
    ![NVIDIA Interface to draw landscapes](/images/projects/landshapes/landshapes-prototyping-drawing.png)
</Block>


<Spacer />

# Landshapes: using AI to foster climate engagement

Early on in my research I discovered the need for experiences that allow people to connect to the topic of climate change freely without immediately facing a set agenda.

I wanted to create a concept that utilizes **fascination** and **curiosity** rather than fear and anger to motivate people to engage with their surrounding climate again.


![Landshapes from above](/images/projects/landshapes/landshapes-cover-image.jpg "A top-down view on the interactive installation with the surrounding banister")

<Spacer />

The tangible outcome of the thesis is **Landshapes**, an interactive installation piece featuring the circular projection of morphing, aerial landscapes generated by Artificial Intelligence – images that look real, yet have never been seen by anyone before. 

The installation evokes a new perspective on the world, as the moving landscapes show it not as static, but as an ever-changing entity, open to be shaped by anyone. 

<Spacer />

![Close-up of the wooden handle](/images/projects/landshapes/landshapes-control-handle.jpg "Pushing this handle around the banister, visitors can interact with the visuals in a playful, explorative way")

<Spacer />

<Block>
    ![Side-view of the installation](/images/projects/landshapes/landshapes-mirror.png)

    ![Side-view of the installation from close](/images/projects/landshapes/landshapes-ground-closeup.jpg "The fictional landscapes can be range from arctic ice sheets over farm fields and deserts to lush jungles")

</Block>

<Spacer />

The public installation allows visitors to develop a new fascination for our climate system in a free and open-ended manner.  


Visitors can become active participants in the installation, move along with the changing artwork, stop its changing, and experience their potential impact on our surroundings in a playful, open-ended manner.

<Spacer />


## Using Machine Learning for social change
I trained a [GAN](https://github.com/NVlabs/stylegan2-ada) (a form of Machine Learning) for ~100 hours on satellite images I collected from all around our world. The AI functions as a neutral mediator of the experience. With the potential to depict any possible landscape, it is not one person imposing a vision of a speculative future, but the visual creation being the result of a collaboration between the machine and the guiding visitor.

![Explaning the flow from dataset to final AI model](/images/projects/landshapes/landshapes-ai-workings.jpg "The dataset is used to train a Machine Learning model to then generate novel landscapes")

<Block align="center">
    The GAN can generate infinite, gorgeous transitions between different landscapes.
    <video width="512" height="512" autoPlay playsInline style={{pointerEvents: "none"}}>
    <source src="/images/projects/landshapes/landshapes-morph.mp4" type="video/mp4" />
    <source src="/images/projects/landshapes/landshapes-morph.ogv" type="video/ogv" />
        Your browser does not support the video tag.
    </video>

</Block>


<Spacer />

## Landshapes at Dutch Design Week
<YouTube youTubeId="8M8vglHzGuY" title="Landshapes at Dutch Design Week" />

<Spacer />


<Block>
    # Project outcome
    <div>
        My graduation project produced an installation concept that reframes our approach of public climate engagement as well as valuable knowledge on how designers can utilize hands-on Machine Learning in their workflow.

        The project was awarded with the highest possible final grade and led to a new [Google-funded research group](https://landshapes.earth/ai-and-experience-research.html) at TU Delft to research the use of AI for aesthetic experiences.

        Landshapes was since selected to be exhibited at [Dutch Design Week 2021](https://2021.design-united.nl/day-3-changing-things/landshapes/), [Highlight Delft 2021](https://www.highlightdelft.nl/program/in2021/landshapes/), TU Delft’s Academic Year opening 2021, and [Hebei Industrial Design Week](http://hidw-en.aty.cn).
    </div>
</Block>

<Spacer />


# More about Landshapes
[Visit the official project website](https://landshapes.earth)

[LandShapes: made to feel real (Article)](https://www.tudelft.nl/en/ide/delft-design-stories/landshapes-made-to-feel-real)

[Creating a dataset of satellite images for StyleGAN training (Article)](https://ueberf.medium.com/creating-a-dataset-of-satellite-images-for-stylegan-training-8eff8fd56e68)

[Read the full thesis](http://resolver.tudelft.nl/uuid:731b92cc-ec9e-4543-a608-c0edbdb14aaf)

[Watch the graduation presentation](https://www.youtube.com/watch?v=AOj2XHoANwA)

For my graduation project at TU Delft, I explored the use of Artificial Intelligence as a design tool for societal change. The outcome Landshapes is an art installation of AI-generated landscapes – images that look real, yet have never been seen by anyone before. 

As the center piece of a climate exhibition, it enables us to become absorbed in the morphing landscapes and experience a changing climate in an open-ended manner. Instead of utilising fear or offering an immediate product solution, it sparks fascination, offer a place of wonder, and allow the viewer to dream of a positive future again.


Landshapes



![Lambus logo and device](/images/projects/lambus/title-image.jpg)

<Spacer />



<Block>
    # About the project
    <div>
        [Lambus](https://www.lambus.com) is a German startup working on the future of collaborative traveling – from the initial planning experience to the last booking.

        In 2018, I got asked by Lambus to join the project as a freelancer and help with the design of their online presence. Initially the project was meant to only cover the web design, but after a very successful first collaboration we decided to continue working together. 
        
        Since then I helped Lambus with their visual identity, UX and UI design of the Lambus app, additional promotional material, a web redesign, and more.
    </div>
</Block>
<Spacer />

# My role in the project

I joined the Lambus team on a flexible basis on-and-of from 2018 to 2021. 
In that time, I closely collaborated with the team to:

1. Create the Lambus visual identity, including logo and color scheme
2. Design wireframes and the visual design for their first web presence
3. Work on the structure, wireframes, interaction paradigms and visual design of the Lambus app
4. Create additional visuals for numerous events, like the Apple App of the Day award
5. Three years later design a new Lambus website for a fresh relaunch

<Spacer />


![Lambus Logo](/images/projects/lambus/final-logo.jpg)
<Block>
    # Designing the Lambus identity
    <div>
        The creation of their visuals identity was done in close communication with the team at Lambus. It had to be an identity that looks fresh, distinguishable from other startups, and of course represent Lambus and their mission. I wanted to design an identity that the whole team could get behind and identify with.
    </div>
</Block>

<Block>
    ![Grayscale logo iterations](/images/projects/lambus/first-logos.jpg "Finding a first direction with quick grayscale iterations")
    ![Color experimentations of the Lambus logo](/images/projects/lambus/logo-color-experiments.jpg "Various details and color experimentation to find the a fitting brand mood")
</Block>

<Block layout="col-1-2">
    ![Moodboard of beach and travel](/images/projects/lambus/logo-moodboard.jpg "Inspiration for the logo gradient")
    ![Three logo variations next to each other](/images/projects/lambus/final-logo-variations.jpg "The Lambus Logo was designed to work in color, grayscale and darkmode" )
</Block>




<Spacer />

<Block>
    # Lambus Webdesign
    In nearly all of my work I strongly advocate for going from pencil drawing to wireframes and then the final visualisation. We used the same process to create the web design of Lambus and it worked very well to align design and content creation from the first stage onwards.
</Block>


![Lambus website wireframes](/images/projects/lambus/website-wireframes.jpg "A rough wireframe with content descriptions and interface elements helps me structure my thoughts, and communicate with the team alike")
![Lambus website mockup](/images/projects/lambus/webdesign-all.jpg "Translated into a visual design, the wireframes come to life and show the adaptation for different screen sizes")
![Lambus website mockup](/images/projects/lambus/webdesign-landing.jpg "We decided to use the Lambus gradient and pin cutout as a reoccuring brand element for the web design")
![Lambus website mockup](/images/projects/lambus/webdesign-contact.jpg)
![Lambus website mockup](/images/projects/lambus/webdesign-multiple.jpg)
![Lambus website mockup](/images/projects/lambus/webdesign-contact-page.jpg)

<Spacer />

# Designing the mobile application
 
 
**How do you create a tool that does not feel like it?**

We encountered two big challenges when designing the Lambus iOS app: 
1. The first challenge was a tight time frame to get the product up and running. 
2. The second challenge was how to align functionality with emotional response. 

<Spacer/>
The app is supposed to be a tool for users to **explore, plan and organise** their communal travel, yet should not feel like a business tool but spark **✨joy and inspiration✨** alike. For this part I collaborated with the wonderful [Niklas Thyen](https://www.linkedin.com/in/niklas-thyen-3b0a14145/?originalSubdomain=de) as an extra brainstorm and design partner. 

Together with the Lambus team we mapped out the entire app structure, made sure that each user flow would make sense and come to a satisfying outcome without any gaps, and create the visual identify of the interface.

![Lambus app wireframes](/images/projects/lambus/app-wireframes.jpg "We used wireframes and flows to communicate with the Lambus team")

<Spacer />
The logo and colors of Lambus were set, yet the visual style of the app still completely open. We took some time to explore in some different “vibe” directions and in the end landed somewhere in the middle of of modern app, with custom illustrations as image placeholders for user trips.

![Lambus visual mockups](/images/projects/lambus/app-visual-exploration.jpg "Using one example screen, we explored different visual directions")
![Lambus final screen designs](/images/projects/lambus/app-final-design.jpg "The final design with custom illustrations")

<Spacer />


# Generating additional material: App Store banners
While we created additional material for Lambus, we noticed that a lot of time was spend on maintaining promotional material like App Store and PlayStore banners – especially if the app is published in many countries and supports multiple languages 🇩🇪 🇬🇧 🇪🇸. 

Our solution was to build a gigantic Figma file that helps us automate some of that process. In the end, this file and some nifty Figma community plugins allowed us to fill a Google Sheet with Headlines, Paragraphs and screenshots in multiple languages and populate all App Store screens with *nearly* one button click.

![Lambus App Store all screens](/images/projects/lambus/app-store-screens-all.jpg "The necessary promotional screens for multiple devices and stores get populated from a Google Sheet")
![Lambus App Store iPhone only](/images/projects/lambus/app-store-screens-iphone.jpg "Screens for the english App Store showcase main features of the iOS app")
![Lambus App Store iPad only](/images/projects/lambus/app-store-screens-ipad.jpg "The iPad OS screens allowed for a playful layout and showing the app in landscape and portrait")

<Spacer />

<Block>
    # Web design relaunch 2021
    <div>
        In 2021 Lambus decided that it was time for a redesign of the Lambus website. Many features enriched the service since the first launch of the website, including a web version of the travel planner, and the style and brand of Lambus also naturally evolved since our first web design in 2018. It was time for some restructuring and a new coat of paint.

        One challenge was again a tight deadline, as the Lambus team wanted to have the new website ready for a big appearance on [German television](https://www.die-hoehle-der-loewen.de/lambus/).  
    </div>


</Block>

![Lambus website exploration](/images/projects/lambus/web-2-visual-exploration.jpg  "Exploring different moods and styles for the redesign")

Like with the initial app design, we explored different visual styles by using the landing page as an example before deciding on a direction that resonated with both me and the team.


![Lambus website final style](/images/projects/lambus/web-2-final-style.jpg "The final design uses warm and friendly colors with clear typography")
![Lambus website landing page](/images/projects/lambus/web-2-webdesign-landing.jpg)
![Lambus website icons](/images/projects/lambus/web-2-icons.jpg "The Lambus gradient reappears in details of the site")
![Lambus website sub-sections](/images/projects/lambus/web-2-discover-all-sizes.jpg "Since the first launch, Lambus now also offers a travel blog with wonderful places to visit")
![Lambus website sub page](/images/projects/lambus/web-2-sub-sections.jpg "Designing with reusable blocks allows the team of add more content after the website launch")

<Spacer />


## Creating a developer styleguide
While the Lambus developers started to transfer the design into the actual webpage, I continued to design all details of the needed sub-screens and turned them into a styleguide to guide the development.

![Lambus typography styleguide](/images/projects/lambus/web-2-typo.jpg)

![Lambus color styleguide](/images/projects/lambus/web-2-colors.jpg)

![Lambus grid styleguide](/images/projects/lambus/web-2-grids.jpg)

![Lambus image styleguide](/images/projects/lambus/web-2-images.jpg)


<Spacer />


<Block>
    # Project outcome
    <div>
        The basic design of the Lambus app from 2018 still stands today, but the team did a fantastic job in adapting the design further and allow for more functionality. 
        
        Since our first collaboration, Lambus has moved from a first experiment to a thriving startup, being mentioned in multiple noteworthy magazines and recognised with **Apple’s App of the Day** and **Google Playstore’s Editors Choice** award.    
    </div>


</Block>

Lambus is a startup with a mission to build the all-in-one travel platform. I had the chance to collaborate with the team as a freelance design lead right from the start, helping Lambus with their visual identity, designing the web appearance and conceptualizing, wireframe and designing the Lambus app experience.


Lambus


<Spacer />
![Kit as seen from the outside](/images/projects/connected-interaction-kit/kit-outside.jpg)


<Block>
    # About the project
    <div>
        Throughout their studies, many of the over 300 bachelor students at [TU Delft’s faculty of Industrial Design Engineering](https://www.tudelft.nl/en/ide/education/bsc-industrial-design-engineering) will work and prototype with electronics in some kind of form.

        Starting out and learning how to work with electronics can be a scary endeavour: There are components and words you have never heard before, new logic concepts to understand, and suddenly are expected to build something with it.

        It is therefore important to carefully design the first touchpoint the students will have with the topic of prototyping with electronics. In 2021 with my employment in [StudioLab](https://studiolab.ide.tudelft.nl/studiolab/activities/), I had the pleasure to take over the organisation and design of this first touchpoint: our redesigned Connected Interaction Kit!
    </div>
</Block>
<Spacer />

## Connected Interaction Kit Unboxing
<YouTube youTubeId="YXV90rg7riA" title="Connected Interaction Kit Unboxing Video"/>
<Spacer />

# Project goals
The goals of the project were to develop a new starter kit that makes use of standard electronic components (from [Grove](https://www.seeedstudio.com/category/Grove-c-1003.html) and [Adafruit](https://www.adafruit.com)) as well as custom components designed at StudioLab. We needed to produce 390 of these kits and have them ready to be used in education by Q2 of 2022.

Some additional goals we set for the project were to:

✨  Spark excitement in students for prototyping with electronics


🙏  Guide beginners and remove any feeling of intimidation


💶  Keep the kit low-cost and affordable for students


🌱  Reduce the environmental footprint of the kit


🔧  Make it producible in-house

<Spacer />

<Block>
    # My role
    <div>
        I joined the project when some initial planning was already set in motion. However, *how* the kit would be designed and manufactured was still completely open.

        Immediately I saw the opportunity to do produce something of great value for students and happily took over the design of the Connected Interaction Kit and the organisation of its production to push for this vision inside the project.
    </div>
</Block>
Over the course of six months, I dedicated two days a week to the project.
In this time, I:

        1. Planned and wrote the complementary starter handbook and its initial tutorials together with [Aadjan van der Helm](https://www.tudelft.nl/io/over-io/personen/helm-ajc-van-der)
        2. Designed the handbooks layout and created custom illustrations for the included parts
        3. Designed and prototyped the complete packaging 
        4. Planned and designed the necessary manufacturing steps for the kit to be produced in-house at the faculty
        5. Organised the production logistics and ordered necessary parts and material
        6. Onboard and guide supporting staff involved in the production

<Spacer />


# Designing the packaging

Packaging a product can be as easy as these three steps:

1. Get a box
2. Throw everything in the box
3. Put a price tag on it and call it a day

<Spacer />

Yet, my ambitions when taking over the project’s design were a bit more ambitious than that. I believe in the power of a first impression, and I knew that if we design this packaging right, it can go a long way in how students perceive and interact with it.

<Block align="center">
    <div>
        I remembered how confusing electronics can be when you first get started. Everything looks the same, has bamboozling names and you have no idea where to start. This is why for this redesign, I wanted to present the included components in an orderly fashion that increases the perceived value of the kit, and makes it easy to get started.

        However, the kit was not supposed to feel “too sleek and polished”. Students should not be  too scared to actually build something with it. We also assumed that not every box would be manufactured perfectly, and especially won’t stay that way when sliding around in backpacks for some years, so ruggedness or the “maker look” became part of the kit’s design.
    </div>
    <div>
        ![Kit as seen from the outside](/images/projects/connected-interaction-kit/kit-outside-closeup.jpg "Brown cardboard and the stamped branding make the kit approachable")

        ![Inlay kit print](/images/projects/connected-interaction-kit/inlay-closeup.jpg "This is all the code you need to get started")
    </div>

</Block>

<Spacer />

## Discovering the kit layer by layer

<Block layout="col-1-2" align="center">
    The kit is organised in layers. When opening the box, students are greeted with a handbook. It allows them to get started right away without having to hunt for tutorials online first.

    ![First layer showing the handbook](/images/projects/connected-interaction-kit/layer-1.jpeg)
</Block>
<Block layout="col-1-2" align="center">
    On the second layer, the main components of the kit are presented neatly next to each other in a removable cardboard inlay. 

    ![Second layer showing the electronic components](/images/projects/connected-interaction-kit/layer-2.jpeg)
</Block>
<Block layout="col-1-2" align="center">
    Below the inlay, between some cardboard dividers, are some additional components and parts that they will need to make full use of the kit.

    ![Third layer showing the supporting components](/images/projects/connected-interaction-kit/layer-3.jpeg)
</Block>

<Spacer />

## Lasercut all the things
One of the main tools we had at our disposal to manufacture at scale was the faculty’s lasercutter. It was used to prototype the packaging, as well as cut the final inlays and cardboard dividers.

![Lasercut assembly](/images/projects/connected-interaction-kit/lasercut-assembly.jpg)

<Block align="center">
    I planned and designed all cutting templates in Figma and then exported them to Adobe Illustrator to translate them into the final cutting files.

    ![Lasercut template](/images/projects/connected-interaction-kit/lasercut-template.png)
</Block>

<Block align="center">
    ![A lasercut stamp used for the branding](/images/projects/connected-interaction-kit/stamp.jpeg)

    We also used the lasercutter to engrave a custom stamp which we would then use to apply the branding to the packaging outside.
</Block>

<Spacer />

## Manufacturing the kit
The kit was manufactured 390 times with the help of some amazing student assistants and the faculty’s Model Making and Machine Lab. 

<YouTube youTubeId="df8IelFGlQM" title="Connected Interaction Kit Manufacturing Video"/>

<Block align="center">
    <div>
        ![Production line](/images/projects/connected-interaction-kit/production-line-boxes.jpg)
        ![Production line](/images/projects/connected-interaction-kit/production-line.jpg)
    </div>
    ![Lasercutter in action](/images/projects/connected-interaction-kit/lasercutter.jpg)
    
</Block>

<Spacer />
<Block>
    # Writing the handbook
    Another big part of the kit redesign was guiding students in their first prototyping steps. We included a “Getting Started” booklet with the kit that gives them an overview of all components, three tutorials on how to start building, and an overview of where they can use the kit in their studies.
</Block>

![Cover of the booklet](/images/projects/connected-interaction-kit/booklet-cover.jpg)
![Components](/images/projects/connected-interaction-kit/booklet-components.jpg "All components got a custom Figma illustrations and give students a first understanding of their function")
![Tutorials](/images/projects/connected-interaction-kit/booklet-tutorial.jpg "The booklet includes three tutorials to get them started")
![Tutorials](/images/projects/connected-interaction-kit/booklet-backside.jpg)
<Spacer />

## Creating a digital kit repository
Not everything that can be done with the kit fit in the physical booklet. We used the third tutorial of the booklet to guide them to the [digital companion](https://id-studiolab.github.io/Connected-Interaction-Kit/) of the kit. 

Here students can find the tutorials of the handbook (and copy needed code), additional tutorials that did not fit the printed version, and very detailed documentation to every component included in the box.

<Block>
   ![Component documentation](/images/projects/connected-interaction-kit/online-repository-LED-pack.png "Each component gets a detailed documentation with code examples")
   ![Tutorial three](/images/projects/connected-interaction-kit/online-repository-tutorial.png "Tutorials help students to get started with specific functionality of their kit")
</Block>





Each year over 300 students begin their bachelor studies at the faculty of Industrial Design Engineering at Delft University of Technology. With the relaunch of the bachelor education in 2021, we also revamped the electronic kit they will use for prototyping.

The resulting Connected Interaction Kit is a completely redesigned starter pack. It presents included electronic components in a beautiful, tidy manner and includes a starter handbook that guide students through their first steps. The kit was produced in-house with a first batch of 390 boxes and received extremely positive feedback from staff and students alike.


Connected Interaction Kit


<Spacer />
![The installation at Den Haag Centraal station](/images/projects/minor-to-major/minor-to-major-context.jpg "Four interactive pillows enable travellers to make music in their waiting time")
<Spacer />
<Block>
# About the project
<div>
    Minor to Major is one of my projects as a master student at Delft University of Technology. The project brief was to analyse and identify a small, reoccurring interaction and change it through design – ideally to the better.

    I was motivated to work on the topic of greenhouse gas reduction and help people act more sustainable. For this I chose [The Hague's central station](https://goo.gl/maps/PYCre6HUBSJRP1aq5) as my context. Over the span of 5 months designed and tested multiple interventions for **making the overlay at the station more enjoyable** with the goal to promote the use of public transport.
</div>
</Block>
<Spacer />
## Minor to Major project video
<YouTube youTubeId="FaGAlJr2ETI" title="Minor to Major Video"/>
<Spacer />
# Approach

Throughout the project I made heavy use of active context exploration (meaning I went to the station to observe interactions, and talk with people), and channel insights through rapid prototyping into quick interventions to gather more knowledge and inform the final design. 

## Key insights from my first exploration:

1. Travellers gather mostly in the main bright hall, even though no seating elements are available
2. The station actually *wants* people to go to the (unfortunately dim and cold) platforms as soon as possible to not block the main hall, hence removing seating in the main hall
3. Annoying overlays are a main reason for travellers to choose the car over public transport
4. People usually keep their distance and to their smartphones, but happily gather close to the public piano – do I sense some ✨**design inspiration**✨ here?

![Graphic of the context exploration](/images/projects/minor-to-major/minor-to-major-context-exploration.jpg "Exploring the context reveals reoccuring interaction patterns")

<Spacer />

## Transitioning into prototyping

After my first exploration, I knew that I wanted to **make the waiting time more enjoyable for overlaying travellers**. But how?

I used a series of quick design prototypes, each driven by an observation and a specific research question, to gather more knowledge into how I could achieve my goal.

<Block layout="col-1-2" align="center">
    <div>
        ![Scrolls with stories laying on a table](/images/projects/minor-to-major/minor-to-major-stories.jpg)
        ![Prototype of a design on the wall](/images/projects/minor-to-major/minor-to-major-pillow-wall.jpg)
    </div>
    ![A map of The Netherlands](/images/projects/minor-to-major/minor-to-major-map.jpg "One of many prototypes to explore what might make the waiting time more enjoyable")
</Block>
<Block layout="col-2-1" align="top">
    ![Screenshot of a music game](/images/projects/minor-to-major/minor-to-major-music-together.jpg "Perhaps making music together is promising?")
    ![Abstract screen experience of making music](/images/projects/minor-to-major/minor-to-major-music.jpg)
</Block>

<Spacer />
## Converging towards the final design

After multiple intermediate prototypes and testing cycles with participants, I had a pretty good idea of what the final design should be.

I wanted to create an interactive installation for Den Haag Centraal, that...

... utilises music 🎶

... sparks delight 😍

... allows for active and passive exploration 🗺️

... connects travellers with each other 👬

<Block align="center">
    ![Sketches of the final design](/images/projects/minor-to-major/minor-to-major-sketch-1.jpg)
    ![Sketches of the final design](/images/projects/minor-to-major/minor-to-major-sketch-2.jpg)
</Block>

<Spacer />

<Block>
    # The final design

    <div>
        The final design consists of four connected seating cushions placed on a platform bench at Den Haag Centraal. Each cushion has its own leitmotif and starts playing its individual, calming melody on a connected speaker when a waiting traveler sits down on it and stops again when he leaves. 
        
        **The more cushions are occupied, the richer the emerging sound harmony.**
    </div>

</Block>

![Image of four wired pillows on the ground](/images/projects/minor-to-major/minor-to-major-cover-image.jpg "Four interactive pillows enable travellers to make music in their waiting time")


<Block align="center">
![Four interactive pillows on a bench](/images/projects/minor-to-major/minor-to-major-bench-closeup.jpg)


Each cushion is equipped with a colourful label that showcases a certain difference to its neighbours and invites the traveler to try them out in turn. The interaction can be active and explorative, or passive and mediative. By simply sitting down, it enables everyone to participate in making music.
</Block>


![Two women interacting the installation](/images/projects/minor-to-major/minor-to-major-users.jpg)

<Spacer />
## Used technology

Inside each pillow lives a force sensitive resistor that can detect if a person sits on the pillow or not. The resistor value gets read by an Arduino Uno, which functions as a simple gateway to pass the signal on to a connected computer with a Processing sketch running.

<Block layout="col-1-2">
    ![Arduino and pressure resistors](/images/projects/minor-to-major/minor-to-major-arduino.jpg "These low-cost resistors can detect human presence through applied pressure")

    ![Wires and sensor in a wooden construction](/images/projects/minor-to-major/minor-to-major-product-technical.jpg "The tape-driven construction helps concentrate weight onto the small resistor")

</Block>


<Block align='center'>
    ![Processing sketch](/images/projects/minor-to-major/minor-to-major-PlaySoundProcessing.png)

    The Processing sketch fades in and out the leitmotiv of each pillow based on the sensor readings (if it is high or low), and outputs the music on a connected Bluetooth speaker.



</Block>
![Arduino and breadboard inside an enclosure](/images/projects/minor-to-major/minor-to-major-box.jpg)


<Spacer />
## Generative music through interaction

In my prototypes I experimented with different soundscapes and musical pieces  and would have loved to compose the different musical pieces myself, but due to time constrains decided to utilise already available music. 

[In Bb](http://inbflat.net) to the rescues! It is an amazing project compiling videos of musicians playing different melodies and instruments in the key of B flat. The unified key means that the sounds can start and stop at any time, and still create a harmony together.

<Spacer />
## Evaluation with travellers

When testing the installation at Den Haag Centraal, the testing travellers loved the experience and were excited to try out the various tunes. 

It was wonderful for me to see different kind of reactions and types of (unintended) interactions that the installation sparked. They varied from an active exploration of multiple sounds, over cautious trying, all the way to a closed-eye meditative enjoyment of one single pillow.

To quote some participant:

<Block layout="col-1-2">
    > We walked around all day. It was so nice to just sit down and relax. It had something peaceful and I was able to blind out all other noises and just focus on the music, amazing!
    > 
    <div>
        > I liked that I could listen to the music without being having to play an instrument.
        > 

        > The different cushions sound so nice together. I feel like a composer now.
        > 
    </div>
</Block>


<Block align="center">
    And let’s be honest, who wouldn’t like to feel like Mozart once in a while?

    ![Woman enjoying a meditation on the pillows](/images/projects/minor-to-major/minor-to-major-meditative.jpg)
</Block>


![Group of people interacting with the installation](/images/projects/minor-to-major/minor-to-major-all-users.jpg)

One thing holding people back from taking public transport is long overlays or missing your connection. 

Minor to Major is an installation that makes the waiting time at the train station more interesting and enjoyable. Interactive seating elements give everyone the ability to make music and nurture social interaction with fellow travellers.
