Sky Tales
October 2021 - November2021Academic Project
Interaction Design, Web and Games Specialization Course
Faculty of Fine Arts, University of Porto
Co-Author
Design Tools
- Figma

Context
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.
Design Persona
Smith
WE PRESENT TO YOU OUR LITTLE BUDDY, SMITH
Feel free to reach him when in need of guidance, weather guidance, that is. He’s quite the weather informant, and very instructive. He’ll keep you updated on all the weather information you need to make sure that you’ll never go out without an umbrella again, or maybe even without your favourite pair of sunglasses.
Smith also offers a nice Interactive Narrative mini-game to kill some time on your way to work, waiting for the bus, or even while your partner is cooking breakfast. Smith’s game has no place for boredom and is quite open to new paths, paths that you’ll trace while experiencing a new story each day. Our buddy Smith will guide you all the way, and even suggest activities according to the weather. Just don’t keep him waiting for too long, as he enjoys interacting and talking to people.
Brand Traits
Feel free to reach him when in need of guidance, weather guidance, that is. He’s quite the weather informant, and very instructive. He’ll keep you updated on all the weather information you need to make sure that you’ll never go out without an umbrella again, or maybe even without your favourite pair of sunglasses.
Personality
Smith is a very reliable source, safe to say that he’ll support you on a daily basis and won’t put you in a place of danger. He’ll always be in the front-line willing to help in a timely manner, being patient throughout. Even though he’s quite the catch, you’ll be in charge for most of the time, but keep in mind that you’re his best company..

Surprise and Delight
Themed illustrations according to commemorative holidays or specials events. Story lines in which Smith expresses his personal preferences and references movies and other elements of pop culture that might relate emotionally to the user.
Reward
Smith once a day rewards the user with a nice suggestion, whether it may be a movie to watch, or even a nice place to visit! Of course Smith will keep the weather in mind while doing so.
Game Design Document
Game Concept
Sky Tales is a choice-driven interactive narrative. It offers multiple short stories that relate to the user’s current location weather. Each day the user has a new story available.
Genre
Text Adventure Interactive Storytelling
Target Audience
45-55 year olds
Game Structure
There are 5 different styles of cards (Sunny, Cloudy, Rainy, Snowy and Thunder), each one to be used depending on the player’s current location’s weather. There are multiple short stories for each style of cards, all of those following the same structure, using three types of choice-making:
1. Choices that take you on a quick storyline detour, merging later back onto the main storyline (giving the player a false sense of choice, not realizing that that specific path is already pre-defined);
2. Choices that don’t affect the storyline at all (two options taking the player to the same card);
3. Choices that place the player on a new storyline (splitting the storyline in two independent paths, with two different endings).

Wireflows
The first step in designing the app was to create wireThe 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 Deckat 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.flows, which mapped out the user navigation across various screens through low‑fidelity sketches.
