Author: Camila Matos Spolador
Objective: Submit to Apple's WWDC 2023 Schoolarship Student Challenge. The objective of the project was to create. an interactive scene in an app playground that can be experienced within three minutes.
App Statement: Forest Future tells a futuristic story in which you need to help Alex reconstruct the forests in the year of 3023 from seeds and through five interactions about the life cycle of a tree.
Platforms: iOS, iPadOS, Figma, Inkscape, Playgrounds.
Programming languages: Swift (technologies: SpriteKit, AVFoundation, SwiftUI).
Developing period: from April 3, 2023 to April 19, 2023 (2 weeks)
● The goal of Forest Future is to teach the user, in a fun and relaxed way, through mini interactions, about the life cycle of trees and their importance. To do this, the user aims to help Alex reforest the planet Earth in the year 3023, which is a multiverse where the forests have been extinguished by humans.
● Each mini interaction consists of a different activity, but all are based on click and drag and touch. In one of the interactions the microphone was used to capture the sound of blowing to simulate wind, and in the last one a slider was used to compose an image.
● Each mini interaction consists of a different activity, but all are based on click and drag and touch. In one of the interactions the microphone was used to capture the sound of blowing to simulate wind, and in the last one a slider was used to compose an image.
Design Development Process
Resources used
● Inkscape, Figma, Behance and Pinterest.
References
● All references for the assets were organized in a moodboard in Figma. The idea was that the scenes would be illustrated in an isometric 2.5D way.
● A desk research was conducted to understand exactly what content could be addressed, following scientific concepts of the tree species Araucaria angustifolia.
Wireframe/Prototypes
● Before the prototypes began, I organized the ideas in a chronological order to understand how many screens would be needed and what scenarios I needed to illustrate.
● I used the vector software Inkscape to draw all my illustrations. After that, I imported the .svg files into Figma to start the prototypes.
● The creation of the prototypes involved two phases. In the first, they were sketched freely and without much organization, to understand how they would look within the project. Next, the prototypes were organized and arranged in a chronological and organized way. Then all the assets were exported.
UX/UI
● Menu Screen: A single button has been placed with a lot of emphasis, to make sure that the user understands that they need to press it to start the game.
● Swipe buttons: on all screens that have the swipe button (with the arrow to the side ">"), they were left pulsing on the screen (zooming in and out), to make it easier for the user to understand that by pressing it, he swipes dialog or screens or closes text boxes.
● Swipe buttons: on all screens that have the swipe button (with the arrow to the side ">"), they were left pulsing on the screen (zooming in and out), to make it easier for the user to understand that by pressing it, he swipes dialog or screens or closes text boxes.
● Text Cards: in every screen a card was inserted with instructions and explaining what the screen is for. In all texts, the main words of the texts were left in medium bold and the instruction in hard bold (all instructions were repeated after closing the card). The background of the screen of all texts has been darkened to make sure that the user understands that he needs to read the card before paying attention to what is behind it.
● Help button: on the pollination screen a help accessibility button was inserted, for users who cannot make sound for some reason.
● Arrows: on the tree parts, dispersion and germination screen, arrows were inserted on the screen, indicating where the user needs to look, to help him understand more clearly what needs to be done, in addition to the explanatory text.
● Dots and shadows: in the first click and drag interaction, the places to be filled in are dotted, so that the user understands that something is missing. When dragging the images from the left frame to the correct place, there is a shadow on the frame, which indirectly certifies the user that he is doing the activity correctly. When he gets the insertion location right, a sound representing correctness is emitted and even if he doesn't place it exactly in the correct location, a "magnet" was programmed on the dotted frame, which drags the image exactly in the correct location when the user places it inside a nearby buffer.
● Fly button: on the dispersal screen, the fly button changes color and text, indicating when it should be pressed by the user and when he needs to wait.
● Instructions: in all screens, the instruction was given on the initial card and after closing it again, to ensure that the user perfectly understands what he needs to do.
● Instructions: In all screens, the instructions and main information are only shown when the user closes the initial card. On the slider screen, for example, the text and slider are hidden and only displayed when the user closes the card "The forest."
● Sounds: When the user hits the task for each activity, a hit sound is emitted to ensure that the user understands that they have completed all the activities on the screen correctly.
● Help button: on the pollination screen a help accessibility button was inserted, for users who cannot make sound for some reason.
● Arrows: on the tree parts, dispersion and germination screen, arrows were inserted on the screen, indicating where the user needs to look, to help him understand more clearly what needs to be done, in addition to the explanatory text.
● Dots and shadows: in the first click and drag interaction, the places to be filled in are dotted, so that the user understands that something is missing. When dragging the images from the left frame to the correct place, there is a shadow on the frame, which indirectly certifies the user that he is doing the activity correctly. When he gets the insertion location right, a sound representing correctness is emitted and even if he doesn't place it exactly in the correct location, a "magnet" was programmed on the dotted frame, which drags the image exactly in the correct location when the user places it inside a nearby buffer.
● Fly button: on the dispersal screen, the fly button changes color and text, indicating when it should be pressed by the user and when he needs to wait.
● Instructions: in all screens, the instruction was given on the initial card and after closing it again, to ensure that the user perfectly understands what he needs to do.
● Instructions: In all screens, the instructions and main information are only shown when the user closes the initial card. On the slider screen, for example, the text and slider are hidden and only displayed when the user closes the card "The forest."
● Sounds: When the user hits the task for each activity, a hit sound is emitted to ensure that the user understands that they have completed all the activities on the screen correctly.
Design System
● A design system was created in Figma, to standardize the color palette, gradients, shadow types, fonts, font sizes and default buttons, this made it easier to apply in the prototypes, because patterns were created. The components created were used in all parts of the app.
● The text font is Roboto Mono, which is a mono-spaced font and was chosen for having good character separation, clarity and a technological and futuristic tone.
● For the card, Mango Grotesque font was chosen. I wanted the letters to be close together, but easy to read. Therefore, I chose an extended font.
● The text font is Roboto Mono, which is a mono-spaced font and was chosen for having good character separation, clarity and a technological and futuristic tone.
● For the card, Mango Grotesque font was chosen. I wanted the letters to be close together, but easy to read. Therefore, I chose an extended font.
App Icon
● The icon for my app was the last thing I developed, after I had already understood very clearly what Forest Future means. I decided to keep Alex, who is the main character, and the game logo. I inserted forests in the background and the default gradient of green and yellow.
Assets
● There were 137 assets developed by me in my playground, which totaled 10.7 MB.
● I used the .png and .heic extensions (for the 59 slider images, because the size is optimized).
● I used the .png and .heic extensions (for the 59 slider images, because the size is optimized).
Problems faced
● I had problem with the size of my assets (they were exceeding 25 MB, which was the maximum size allowed for submission), I solved it by using the .heic extension for some images and exporting some with a smaller size (1x instead of 2 or 3x).
● I had a problem with Playgrounds with the images, my app was not running because of some compilation error. I didn't know which assets were causing this error, because there were many and the app seemed to crash randomly. To fix this I exported all the assets again.
● I had a problem with Playgrounds with the images, my app was not running because of some compilation error. I didn't know which assets were causing this error, because there were many and the app seemed to crash randomly. To fix this I exported all the assets again.
