Back to Landing Page

The Bee

Project Partners

Sonja Brehm, Oliver Reiß

Timeline

March - June 2019

Course

Interactive Communication Systems,
2.Semester

Supervisor

Fabian Schröbel

Used Tools

Adobe Illustrator, Figma, After Effects, Principle

My Role

Concept, Illustrations, Screen Design, Prototyping

Introduction

The task was to design an interactive application which should make this specific topic easy to understand for the viewer.

We tried to focus on a current and very problematic situation - thats why we decided we wanted to focus on the topic of bee mortality.

As a result we hoped the viewer would get a better understanding of how immportant bees really are and that they're actually very harmless (and kind of cute).

_01 General

Choice of Device

We decided to present our application in a tablet format we thought this to be the most common and comfortable screen size when it comes to providing informations.

We also thought of embedding the tablet in a surface for exhibiton situations so the user only has to use one hand and not holding the tablet all the time which later one came handy for some interactions.

_02 Content

There are a lot of facts and informations about bees which you could tell the viewer. We decided to specify on four categories we wanted to inform about to not overload our application and make it easier and faster to get enough informations.

So we picked out four categories of which we tought would be very important.

Dangers

The dangers of the Bee are showcased here.
Unforunately there are so many dangers when you are a bee so we once again had to shrink down the content to show the most important ones.

Saving Bees

Everybody can help saving bees and to actually help in the case of bee mortality we decided to show the viewer what can be done by every single person to help.

Knowledge

In this case we wanted to inform more about the bee itself. We wanted people to understand those animals are not just simple insects - actually they are very special.

Benefits

Here we kind of wanted to shock our audience a little bit.We thought that a lot of people still dont know how important bees really are to us. So here we wanted to show exactly that.

_03 UI-Elements

Pagination

In some pages we had to much content to put it all on one page - that's why we made some things scrollable.

As soon as we did that we knew:
A pagination is a must have!
The user should always know where he is right now.

_04 Design

The Colours

We didn't want to bring to much different colours in our project and even thought we had to use some different colours for our animations we managed to focus on 3 main colours.

With our colours we tried to stay in the same colour scheme that the bee allready gives. And for our contrast colour we picked out a blusih grey.

The Illustrations


Which is why we decided to rather go with a cute style in our illustrations instead of a realistic style.

We didn't want the viewer to feel some kind of fear or disgust when looking at our project.
We were very aware that bees are one of those animals that people often are afraid of but also that the bee is our most important illustration because she would be pretty much everywhere.

The Animations

Bringing animations into this application was propably the biggest part of the project.
We knew from the get-go that we wanted to deliver the message with our animations - text should always be optional.

We wanted the application to feel alive and thats why we had animations on every screen.

_05 Screens

Startscreen

We animated our startscreen so we could bring more life into an otherwise static screen. We also animated the "Start-Button"
to generate a Call-to-Action which is better understandable.

Knowledge

The section "knowledge" is seperated into 3 topics:

Hierarchy
Birth
Dance Language

1. Hierarchy

Here you will find some informations about different types of bees and how their colony is structured.

2. Birth

Here you can scroll through the whole process of the development of a bee. With each stage you will get new and fitting informations about what happens in that stage.

3. The Dancing Language

Here we wanted to show in what kind of fascinating way bees actually communicate - by dancing. So there are two different factors that affect the way they dance and those two factors are angle to the sun and the distance between blossom and beehive.At the bottom you can see how the bee becomes faster and changes direction depending on the factors which are changing above.

Benefits

The section "Benefits" is seperated into 2 topics:

Pollination
Products

1. Pollination

In the section you scroll through the process of pollination.
Those screens come with little animations and some text,
helping you to understand the process better.

2. Products

Here we showing off which products would be non-existent without bees. Instead of just showing them to the viewer,
we decided to let them pop up showing one by one
so maybe you'll be suprised by one product or another.

Other Screens

And then there were 2 seperate screens which didn't quite fit in the
above listet categories so we gave them their own categorie.
Those 2 topics were:

Dangers
Save the Bees

1. Dangers

Here we showed three different types of dangers for the bee.
Once again we went with a more cute and emotional style to empathize.

2. Save the Bees

Last but not least for us it's been important to show how YOU can help saving the bees. And yes a lot of things you can do actually happen in your garden which is why we illustrated exactly that.

As viewer you now get the chance to interact with any item to see what you can do with it and how it's related to saving the bees.

For a better understanding that you can actually interact with that screen we decided to let the interactive items pop up.