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).
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.
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.
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.
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.
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.
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.
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.
As allready seen above we created an Icon for each categorie we informed about.
We wanted the Icon to be seen everytime so the user always knows in which categorie he is interacting right now.
To switch to other categories we created a dropdown menu, revealing all the other icons and therefore the categories. You can alawys go back by pressing anywhere on the screen or by pressign the same Icon again.
To procceed just press the categorie you want to go to.
We also created a navigation bar to let the viewer switch to specific topics of an area.
Because this is a pretty relevant thing for the user to navigate we also put this in our header.
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.
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.
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.
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.
The section "knowledge" is seperated into 3 topics: Hierarchy Birth Dance Language
Here you will find some informations about different types of bees and how their colony is structured.
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.
The section "Benefits" is seperated into 2 topics: Pollination Products
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.
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.
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
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.