Team:

Erik Soriano

Role:

Designer

Developer

Tools:

Unity Engine

Adobe Illustrator

Timeline:

Spring 2023

Summary

An educational playful experience app to bring awareness about the declining honeybee population, and how it affects our human world. By using several image targets, the user can unlock educational content on the screen to learn about what honeybees and beekeepers are, as well as learn ways to help save them.

Objectives

  • Bring awareness about the honeybee population and their importance to our human world

  • Communicate ways to help them, by using a visual and interactive approach

  • Create engagement by offering a robust user experience and design

Apparatus

  • A cardboard Rhombic triacontahedron (8 different image targets total) being the key to unlock the AR content on the screen

  • Additionally, there is a demo version of the app that uses AR cards as image targets for users who prefer a shorter experience

Creating the Shape

  • A pizza cardboard box was repurposed to create each individual image target

  • The shape needed to be easy to grasp, light but also somewhat durable since children are not always careful

  • Each piece was carefully assembled next to one another, since there would only be two image targets per scene (more details will be discussed below)

  • The result was this geometric shape that is hollow, and also easy to grab and rotate, while light and comfortable for users [it was tested to ensure durability if dropped]

UI Flows

Demo Version Flow

Full Version Flow

Main Version: Desktop App

Desktop Version

The main version of the app that utilizes the geometric shape. Users can rotate the shape to unlock different content on the screen, all are educational material regarding the honeybees, and how humans can help them since their population is declining.

First iteration of the desktop version, testing how user would interact with shape and assessing layout options for the screen content

Latest iteration of the desktop version, with a static UI for elements such as hint button, buttons to switch scenes, and also optional sound button, and logo, with main content in the middle of screen.

Latest iteration of the desktop version, with a static UI for elements such as hint button, buttons to switch scenes, and also optional sound button, and logo, with main content in the middle of screen.

Challenges:

  • Since the shape has so many sides, and each side is an image target, as the player rotates and interact with the shape, other parts of the adjacent sides are still shown on the screen, therefore, there could be several content overlapping accidentally

  • Since holding the shape is a core mechanic of the user experience, the weight of the shape was very important to consider

  • Background music was considered to enhance the experience and create a lively and happy mood, however, not all users would like it throughout, so there needed to be a workaround

Solutions:

  • Create different scenes, with each one having at most 2 image targets, and since there are 8 targets available, there should be a total of four (4) scenes

  • The player can easily access each scene by clicking on the honeycomb buttons located on the screen UI

  • Each shape was placed strategically as to never be seen next to another image target on the same scene, so there would not be any “accidental” content overlapping

  • There is a button that the player can click to play background music, but it is optional and is located in an area where it cannot be accidentally clicked, unless they choose to

Amigo Bee Desktop Version Demo Video:

Alternative Version: Mobile App

Mobile App Version

Originally the app was thought out as being only a mobile experience. But after careful consideration, the app could also work on a desktop. There are tradeoffs and benefits for both platforms, but in the beginning the focus was on mobile.

  • The mobile version could be seen as a ‘demo’ version, using the AR cards for the user to unlock the AR content

  • The intent was to show the user why honeybees depend on trees and plants for their survival, and spark conversation about the topic

  • Currently the mobile version is still in progress, after having completed the desktop version (there will be optimization and resizing of the content and UI to accommodate for the smaller screens on a phone)

  • Could still work with the geometric shape, but as a backup option, AR cards were created that user would lay on a flat surface

  • More details will be added to this project eventually

first iteration featuring several action buttons, that were later changed to simplify the UI and UX of the app.

Second iteration of the app, featuring an info button for hints of what to Do, as well as [optional] background music for the user. Still considering whether to add another action button.

Mobile Version Screen Captures

  • Second iteration of the app, featuring an info button for hints of what to do, a home button. As seen in vertical layout.

  • Home Screen after app loads

  • The honeybee image unlocking the content showing and comparing honeybees with similar insects.

  • The beekeeper image unlocking an educational video

Amigo Bee Mobile Version Demo Video:

Next Steps

Additional user testing can be done to assess usability of the app, and add or remove features based on users’ feedback.