Sky Tales

October 2021 – November 2021

Sky Tales is a weather mobile application that not only provides weather information but also features a daily interactive narrative game. The storyline dynamically adjusts to the user's current location's weather forecast. Upon the conclusion of each daily story, the app offers personalized recommendations for activities, events or destinations suited to that day's weather conditions forecast.

Interaction

Academic Project

Interaction Design, Web and Games, Specialization Course

Co-Authors

Guilherme Vila Maior

Design Tools

Figma

Mockup of a smartphone displaying the 'Sky Tales' application. The screen shows a weather forecast for Porto, Portugal, with a blue card indicating the temperature (18°C) and detailed weather information for Monday, November 15th. Data includes rain probability (12%), humidity (10%), wind speed (7 km/h), and sunrise/sunset times. Below the card, there’s an illustrated scene of a house with a red roof on a grassy field under a sunny sky. The navigation bar at the bottom highlights the 'Game' tab, while the 'Weather' tab is active at the top.

Several screens from the Sky Tales app, displaying illustrated weather cards for various cities.

A collection of screenshots showcasing the Sky Tales app's game mode. The screens depict different stages of an interactive story, where users can make choices that affect the narrative's outcome.

Wireflows

The initial concept for the application was to blend meteorological information with a gaming experience. To visually convey these two distinct elements, the interface design incorporates two separate decks of cards: the Weather Deck at the top and the Game Deck at the bottom. Users can easily switch between these sections by clicking on the decks, causing them to expand or collapse and reveal either a set of weather or game cards, respectively.

The wireflows played a crucial role in refining this dynamic interaction, allowing us to define the flow between the two decks. They also served as the foundation for the app’s animation design, illustrating how the interface should transition and respond as users toggle between the weather and game cards.

Hand-drawn wireframes depicting the user interface and interaction flows within the Sky Tales app. The wireframes showcase the app's main screen, game screens, and other key features.

Game Play and Mechanics

Sky Tales features five card deck themes, based on different weather condition: Sunny, Cloudy, Rainy, Snowy, and Thunder. The player's current weather determines the deck theme for the daily game.

Each deck offers a branching storyline with three types of choices:

Detour Choices: Temporary detours that give the player the illusion of choice, but eventually merge back into the main story.
Illusory Choices: Decisions that may seem important, but don’t affect the storyline, guiding the player through the same narrative regardless of their choice.
Branching Choices: Key decisions that split the story into distinct paths, leading to different endings based on the player’s choices.

A visual representation of Sky Tales' interactive narrative game structure, depicting the flow of cards such as Introduction Cards, Detour Choice Cards, Illusory Choice Cards, Branching Choice Cards, and Suggestion Cards (indicating the end of a storyline).