The Art of Ollie

1

Universidad Europea de Madrid School of Architecture, Engineering, and Design - Creative Campus Ollie University Final Degree Project Author: Laura Rosa de la Plaza Supervisor: Albert Culleré 2024 Created & designed by Laura Rosa de la Plaza

2

3

Enjoy the content in its most interactive version!

This book includes several pages of content that can be viewed through a mobile phone or smart device, thanks to the incorporation of Augmented Reality.

Augmented Reality enhances the experience, immersing you in the creative process behind Ollie, its worlds, activities, and challenges...

4

1.

Download the EyeJack app from your smart device’s app store.

2.

Scan the QR code on the previous page using the EyeJack app’s camera ( icon).

3.

Not all pages include AR. When you see the following icon, it’s time to point your phone at the page(s).

4.

As you point at the page(s), the magic will begin!. ou will find two

ore

codes on ages

and

. hese

codes

are not for AR but to access the links to the interactive platform prototypes.

5

6

The Art Of

By Laura Rosa de la Plaza

7

Welcome to the world of Ollie! his book is the result of the e citing ourney of llie, a ro ect born fro the desire to o er readolescent boys and girls a unique space where they can explore, learn, and develop their Emotional Intelligence in a fun and engaging way on an interactive platform.

And what better way to capture all the magic of this world than through an art book?

This book is not just a collection of images and designs; it is a window into the creative process behind Ollie’s interactive platform. It’s a journey through the colors, shapes, and stories that bring each corner of this digital universe to life.

This book is an encyclopedia, a compilation of the design process of this project, and a guide to explore the world of llie and disco er all the wonders it has to o er. ere you will find infor ation about the characters, the settings, and the exciting adventures waiting on the interactive platform. Embark on this journey!

8

9

Contenidos

01 ...................... 8-9

02 ................. 18-37 03 .......... 38-49 04 ............. 52-125

INTRODUCTION

CHARACTER DEVELOPMENT

STORY

WORLD BUILDING

Ollie

Reef Voyage

Supporting Character

Enchanted Spark Echo’s Peak Creative Nebula Platform Mechanics

10

05 ........... 126-185

06 .................... 196-289 07 ........ 290-327

08 ....... 328-347

ACTIVITY DEVELOPMENT

UX/UI DEVELOPMENT

OLLIE BETA

PACKAGING & 3Ds

Reef Voyage

User Experience

Design

Enchanted Spark

Basic Manual

GDevelop5

Echo’s Peak

Tutorial

Creative Nebula

Design System

Cover Design

User Flow

Testing

Wireframes Figma

11

12

13

14

15

16

17

18

19

Beginning of the Idea The project initially explored themes related to anxiety, depression, and stress, addressing conditions arising from a lack of emotional intelligence in a young adult audience.

Several characters were considered to guide users through the platform, each representing different aspects of the emotional process.

However, after further research into emotional intelligence, the focus shifted to a younger audience and simplifying the approach to a single character.

The inspiration for the project, including the design of the main character, was based on the author’s admiration for Disney and Pixar films, particularly “Inside Out” and “Soul.” These films significantly influenced the conceptualization and execution of the project, contributing narrative and visual elements that were integrated into the design and experience of the platform.

Images: 1st Column: Illustrative images generated with AI, Adobe Firefly.

2nd Column: Poster from “Inside Out” and images from “Soul,” www.disney.es

20

Possible Characters: Guardian of Calm: A character who guides users through the virtual world/environment, o ering wisdo and techni ues to manage stress and anxiety, hel ing the find o ents of peace.

Shadow of Doubt: A character that represents self-criticism and internal negativity, embodying challenges that symbolize the struggle against negative thoughts, learning strategies to deal with low self-esteem and personal growth.

Resilience Collective: Shares stories of overcoming challenges and managing stress, teaching users how to face di icult situations and strengthen emotional resilience.

Character Development: Emotional motional Progress: Characters evolve as users interact with the , re ecting growth and development over time.

Self-Criticism Character: Gradually transforms from an obstacle into an ally, symbolizing the power of change and personal overcoming.

Emotional Connections: Develop deeper connections with characters to foster empathy and understanding of others’ emotional struggles.

21

The Inspiration Behind Ollie Para dar vida al entrañable personaje de Ollie, se buscaba crear To bring the endearing character of Ollie to life, the goal was to create a being that radiates friendliness, charisma, and warmth, someone with whom all children could relate.

Inspired by the principles of Gestalt and Bauhaus, simple and abstract shapes were chosen, using empty space to highlight Ollie’s essence.

Building on the notion that circles represent human emotions, Ollie was conceived as a circular figure, symbolizing the complexity of feelings. His shape was designed to be irregular and organic, conveying the idea that perfection lies in imperfection and that all emotions are valid in the process of personal growth.

Regarding facial features, there was debate about whether Ollie should have expressions to make it easier for users to relate to him. After consulting with experts in emotional intelligence and child development, the decision was made to keep Ollie as neutral and expressionless as possible.

This choice aims to avoid limiting children by the character’s expressions, allowing them to explore and validate all their emotions without preconceived judgments. In this way, Ollie becomes an emotionally inclusive companion for everyone.

22

23

Initial Approaches nce llie’s sha e was defined, arious design o tions were e lored through the ani ulation of o acities, rotations, outlines, and textures. During this creative process, the idea of giving the character more human-like

24

features, such as limbs or facial traits, was completely discarded. This decision was based on the original premise of keeping Ollie abstract and devoid of distinctive features..

25

Final Ollie fter e loring arious o tions, llie was defined with an aesthetic tailored to a young audience, inspired by illustrated children’s and young adult books. he final ersion of llie was created using Procreate, which allowed for the addition of multiple textures and opacities to give depth and personality. e eral final ersions of llie were de elo ed for di erent ur oses a ector ersion the definiti e version with small details like dots around it; another version without these details, intended for merchandising and future uses; and variations of the final design with ath shadows, s ecifically designed for user experience (UX/UI) design, providing visual support for users to follow Ollie throughout the platform.

Finally, negative versions of Ollie were created, though they are not intended for use.

26

27

28

29

The Motivation Behind Ollie he dri ing force behind llie is its desire to be filled with color, re ected in the character’s ariations as acti ities are co leted, ter ed badges or rewards. his feature, ins ired by the ga ification of video games, is integrated into the interactive platform to allow both Ollie and the user to experience emotional growth visually represented.

Through graphics and the character itself, children can improve their emotional intelligence in 30

Chispa Encantada

Cima del Eco

Travesía Arrecife

Nebulosa Creativa

an incidental way, without ercei ing the latfor as a con entional thera y tool. a ification and badges serve as incentives to motivate users to help Ollie in its quest for color, reinforcing their commitment to emotional development.

In each activity within each world, users will receive a badge illustrated in an organic shape matching the color sche e of that world. nce all acti ities in that world are co leted, llie will be filled with the color of that world. This process continues until all four worlds are completed, with the character remaining in the color of the last completed world.

31

32

Tests 33

Final Ollie Once the user has completed all activities in all the worlds, Ollie’s purpose and the user’s mission on the latfor are fulfilled. t this oint, llie is filled with all the colors, sy boli ing e otional growth and the achievement of full emotional intelligence. It is a moment of celebration and satisfaction for both the user and llie, arking the end of an e citing ad enture filled with learning and ersonal de elo ent.

35

Supporting Character Although initially there were no plans to design additional characters for the platform, as development progressed, the need for an extra character became apparent. This new character would provide support in certain activities that required the visual presence of a being with limbs.

Building on Ollie’s shape, a basic body skeleton with limbs was created, which was then given volume through organic forms.

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

Integrating Emotional Intelligence into the Platform The integration of Emotional Intelligence into the platform is achieved through its worlds and the activities within them. Each world targets one of the four areas into which the project was divided after research: •

Tools of the Present Moment: This first area focuses on managing emotions healthily, as well as handling stress and anxiety. It provides tools and techniques to address these issues. This is represented by the world Reef Voyage.

•

Positive Thinking: This world centers on self-esteem and self-concept, aimed at developing a positive self-image and building solid self-esteem. It also focuses on skills such as self-awareness, self-regulation, motivation, empathy, and social skills. This is represented by the world Enchanted Spark.

•

Mind-Body Connection: This area encompasses empathy, promoting communication and conflict resolution skills. It focuses on emotional diversity—recognizing, understanding, and celebrating that all emotions are valid and normal, both internally and externally. This is represented by the world Echo’s Peak.

•

Creative Performance: This world involves identifying and recognizing one’s own emotions and those of others.

It also strengthens resilience and the ability to face and overcome challenges and adversities. This is represented by the world Creative Nebula.

54

dentification and ecognition of

otions

Stress and Anxiety Management

anage ent

Resilience and Coping

athy and ocial kills

Emotional Intelligence

otional elf stee

and elf once t

Emotional Diversity

55

“Complete your soul, complete your Ollie” Your soul grows and becomes stronger

Initial Ideas efore defining the age range of the end user, arious o tions for integrating e otional intelligence into the ro ect were explored.

After completing the initial and secondary research, two main approaches were established for the conceptual development of the worlds and their activities.

On one hand, the analogy with human anatomy was considered, focusing on the upper torso and its main organs, such as the brain, heart, lungs, and stomach. On the other hand, it was decided that each world would evoke a di erent s ace in the uni erse and on arth, such as outer s ace, nature, land, and the sea.

56

Illustrative images generated with AI, Midjourney.

57

Color Palettes on the Platform The platform is conceived as a playful and stress-free environment.

Therefore, a vibrant and energetic color palette was chosen, consisting of four primary colors and three secondary colors.

These colors stand out against a dark purple background, which was selected over a typical black background due to its psychological impact.

Additionally, to bring the worlds and textures to life, the main and secondary palettes are broken down into various color ranges.

While each world has a defined primary color, its color range will be used across all its elements, along with some contrasts from other color ranges, to add color accents and achieve an overall aesthetic harmony in the design.

Reef Voyage Enchanted Spark Creative Nebula Echo’s Peak 58

59

60

Moodboard and Aesthetic Idea The aesthetic of the interactive platform and the world of Ollie is characterized by a whimsical and playful approach, featuring elements that mimic organic and rounded shapes, evoking a gelatinous material feel. The color palette is bright and vibrant, with hues that stand out and attract attention.

Flat colors with textures and shadows are used to add depth, warmth, and familiarity to the design.

The style is marked by an artistic look reminiscent of childlike strokes and early experimentation with watercolors, temperas, or colored pencils. This translates into illustrations and graphics that appear to have been created by children, with soft lines and simple shapes. The overall idea is to convey a sense of creativity and spontaneity, reinforcing the notion that the platform is a welcoming and stimulating space for children.

Additionally, the style is friendly and engaging, with characters and elements designed to be endearing and approachable. The aim is to create an atmosphere that invites exploration and play, inspired by the aesthetic of illustrated books and other forms of children’s and young adults’ entertainment.

In summary, the platform’s aesthetic is characterized by its imaginative, colorful, and accessible approach, designed to capture the attention and imagination of children.

61

REEF VOYAGE 62

The Reef Voyage world focuses on the importance of living in the present moment, offering tools for managing emotions, stress, and anxiety.

The color palette is based on shades of blue with touches of yellow, creating an atmosphere of relaxation and serenity.

Inspired by the marine world, this setting evokes the tranquility of the ocean and the vastness of the present.

63

Anatomical images of the diaphragm and stomach, www.wikipedia.es

Concept Since the Reef Voyage world focuses on “in-the-moment tools,” breathing and relaxation are central to helping users become self-aware and develop skills to manage future anxiety by fully experiencing the present moment. In this context, Reef Voyage symbolizes the diaphragm and stomach on the platform, represented by three main platforms and two secondary ones. These structures incorporate elements of marine flora, serving as key axes for user exploration and emotional learning.

The elements of this world, such as corals and plants, have been designed with organic, curved forms in mind.

The shapes and textures were inspired by the venous branches of the human body.

Color psychology was explored to define the world’s color palette, selecting shades of blue and purple with subtle touches of yellow. This combination aims to immerse users in an environment that evokes feelings of relaxation, serenity, and calm. Blue, with its association with the sky and sea, conveys a sense of expansiveness and tranquility, while the hint of yellow adds warmth and vitality. This harmonious and balanced environment is designed to help users calm their minds and lower their heart rates.

64

First Sketch of the Reef Voyage World 65

Version 2 of the Sketch 66

Primary Color and eri ati e ues

Color and Texturing Tests 67

Final Sketch 68

Color Tests 69

Final World in Flat Colors 70

Texturing 71

World Components

72

73

Concept Art of the

74

75

ENCHANTED SPARK 76

The Enchanted Spark world focuses on the importance of self-esteem and self-concept, crucial aspects for emotional autonomy.

This setting promotes self-regulation, self-awareness, motivation, and empathy, with a special emphasis on positive thinking towards oneself.

77

Illustrative images, www.unsplash.com

Concept The Enchanted Spark world is presented as a haven for fostering self-concept and self-esteem, providing users with a space to nurture their emotional growth.

The symbolic representation of the heart, through platforms connected in the shape of a “crystal star,” evokes the essence of positive thinking and self-affirmation. These elements, with a luminous and natural aesthetic, embody the vitality and emotional sensitivity associated with the human heart.

The color palette, composed of warm tones of pinks, reds, oranges, and yellows, creates a welcoming and optimistic environment that encourages users to explore and discover their own inner light.

The organic and curved shapes present in the world’s elements, such as trees and sparkles, reinforce the idea of a space that celebrates positivity and personal growth.

78

First Sketch of the Enchanted Spark World 79

A. Climbing to Platform 2-3 B. Climbing to Platform 1-2

Axonometric Test 80

81

Primary Color and eri ati e ues

Color and Texturing Tests 82

Primary Color and eri ati e ues

83

Final Sketch 84

Color Tests 85

Final World in Flat Colors 86

Texturing 87

World Components

88

89

90

Concept Art of the World 91

ECHO’S PEAK 92

Echo’s Peak is the world of the platform that emphasizes the importance of the mind-body connection, a fundamental relationship for overall well-being.

93

Human body images, www.wikipedia.es

Concept In the universe of Echo’s Peak, the focus is on the deep connection between the body and mind, which is fundamental for developing emotional intelligence on the platform. Body awareness and breath regulation are key aspects for users to learn to manage stress and maintain calm in challenging situations.

Representing this concept, the world embodies the essence of the platform: a constant reminder of the importance of breathing and vitality. The main structures, inspired by tranquil Eastern Zen gardens, invite users to immerse themselves in an experience that highlights internal connection.

These platforms incorporate elements of flora and nature, as well as the presence of water, an essential component of the human body. They serve as fundamental pillars for user exploration and emotional learning, providing a conducive environment for personal development.

The color palette, composed of greens, oranges, and browns, creates an atmosphere of trust, enthusiasm, tranquility, and solidity. This color combination evokes a union with nature, inviting users to delve into a space of harmony and emotional self-exploration.

94

First Sketch of the Echo’s Peak World 95

Version 2 of the Sketch 96

Primary Color and eri ati e ues

Color and Texturing Tests 97

Final World in Flat Colors 98

Texturing 99

World Components

100

101

Concept Art of the World 102

103

CREATIVE NEBULA 104

Creative Nebula is dedicated to creativity and emotional resilience.

It is a space where users can unleash their creative potential, explore new ideas, and find innovative ways to tackle challenges.

105

Nervous system images, www.wikipedia.es

Concept In the Creative Nebula world, tools and activities that promote creativity and art in all its forms are fundamental. The development of creativity is considered a vital component of cognitive development and, ultimately, of strong emotional intelligence.

In this context, this world symbolizes the human brain on the platform, being the epicenter of creativity and innovation. It is represented by a nebula, with its clouds and cumulonimbus transforming into latfor s, re ecting the co le neural connections.

The color palette, blending pinks, purples, and blues, invites users to explore an environment of i agination and agic. ns ired by the cos os, this setting o ers endless o ortunities for ersonal growth and e otional de elo ent, re ecting the di ersity and li itless ossibilities of the uni erse.

106

First Sketch of the Creative Nebula World 107

Version 2 of the Sketch 108

Primary Color and eri ati e ues

Color and Texturing Tests 109

Final World in Flat Colors 110

Texturing 111

World Components

112

113

Concept Art of the World 114

115

Connection Between Worlds To combine the worlds and develop both the map and connections between them, the initial concept of the human body is revisited. Several tests are conducted, mimicking the arrangements of the represented organs, seeking a visual analogy that reinforces the idea of connection and internal functioning.

Ultimately, a composition is chosen that, while not entirely faithful to anatomical arrangement, is more aesthetically and compositionally appealing. This choice allows for a more dynamic and accessible visual representation for users.

For connections between worlds, dashed lines are used, symbolizing the ability to travel from any world to any other. This approach is implemented as an infographic, making it easier to understand the interconnection and accessibility between the different worlds of the platform.

As a result, five main points of interest are established: the central portal at the beginning of the adventure and each of the teleportation portals. This structure ensures that users can explore freely and intuitively, promoting a continuous and unrestricted learning and emotional development experience. (see page 117)

Infographic images of human anatomy, www.freepik.es

116

First Version of World Combination 117

118

Final Combination of Worlds 119

Platform Mechanics The interactive platform will feature a fantastical environment aligned with the project’s aesthetic and research outcomes.

The mechanics are based on video game principles, meaning it will be gamified. It consists of 4 worlds or scenarios: each world is based on one of the 4 aspects of emotional intelligence and visual and graphical concepts created from these aspects.

Additionally, each world will include 3 activities designed to help users gradually build the foundations of emotional intelligence.

120

Progression and Rewards As users advance and complete worlds within the interactive platform, they encounter a series of rewards and progressions designed to keep their interest and motivation high. When users complete activities within a world, the visual indicators for these activities update, changing from an outline to a filled state.

This visual update clearly shows the user’s progress and provides a sense of achievement. Additionally, users receive badges for completing activities. These visual rewards not only celebrate their accomplishments but also fill Ollie with colors, symbolizing the user’s emotional growth and development.

The platform is non-linear, allowing users to return to teleportation portals that enable travel between worlds.

These portals act as connection points, facilitating navigation within the platform. Users are not required to complete all activities in a world before moving to another; they can freely navigate and interact based on their needs or preferences.

Ollie’s appearance changes as users progress, with the character gradually filling with colors.

This visual change in Ollie represents the user’s emotional growth and serves as a tangible representation of their progress and development. Users have access to a progress summary where they can view completed activities and worlds, earned rewards, and remaining challenges. This summary helps them stay organized and focused on their goals within the platform. Additionally, activities can be repeated as many times as desired, although badges are only awarded the first time an activity is completed.

Interactive Platform Mechanics 121

122

Mockup from Freepik, designed by @Freepik, www.freepik.es

The user will begin their adventure in Ollie’s worlds by logging in with their code name if they have played before, or choosing a new one if it’s their first time.

Once inside, they will be directed to the main screen: a global map of the 4 worlds, where they will be situated in the center. From here, the user can select the world they want to go to by clicking on it.

Once in the chosen world, the user can move around the platforms to find the icons (points of interest) corresponding to the activities. By clicking on an icon, they can read a description of the activity before starting.

After completing a level or activity, the user will receive a badge assigned to that level and Ollie, the main character, will be colored a little more. This will continue until Ollie is completely colored upon completing all activities.

At all times, the user will have access to 3 buttons on the screen: the map button, which shows the location of activities in each world; the help button, which provides access to the tutorial and support; and the Ollie button, where they can see which activities they have completed in each world and which ones are still pending.

To switch from one world to another, simply access the map button and click on another world. In this way, the user will appear at the teleport (starting point) of that world.

How to Play or Interact on the Platform 123

124

125

126

Each of the activities and/or tools and/or techniques proposed for development in this project has a scientific basis and is supported by expert guidance.

127

Echo’s Peak Sensory Garden Breeze of Balance Ancestral Roots

Enchanted Spark Unexpected Links Firefly Maze Resonant Reflections

128

Creative Nebula Canvas of Harmony Space Orbit Astral Journey

Reef Voyage Silent Breath Invisible Trace Whispering Breeze

129

130

Guided Breathing Through sound, the user is encouraged to settle in and engage in a brief meditation session.

Silent Breath

Breathing with Hands A hand-based breathing exercise is proposed: with the aid of animated visuals, the user will trace the palm of their hand with a finger from the other hand, practicing a helpful technique that can be repeated at any moment of anxiety.

Invisible Trace

Breathing mimicry and relaxing animal sounds Using sound and animated visuals, the user is encouraged to imitate animal sounds that stimulate relaxation in the brain, such as the hiss of a snake or the buzz of a bee.

Whispering Breeze

131

Guided Breathing Guided meditation is a fundamental tool in emotional intelligence, especially in the practice of mindfulness. Through sound, the user is encouraged to settle in and participate in a brief meditation session.

This activity uses auditory guidance to focus the user’s attention, helping them to stay present and reduce stress. Soft, calming sounds combined with clear instructions promote a state of deep relaxation and self-awareness. This practice not only enhances concentration but also fosters a stronger connection with one’s own emotions and thoughts, facilitating a more balanced and healthy emotional response.

Silent Breathe 132

Concept Art of the activity

133

Breathing with Hands Hand breathing is a highly useful tool in emotional intelligence: during stressful or anxious situations, or when experiencing general discomfort, it helps establish synchronous rhythms that relax the mind and allow for clearer thinking.

This specific activity relies on contact with one’s own hand, encouraging these rhythms through touch, which also aids in calming down more quickly.

1. It starts with one hand. The user traces the outline of the hand from left to right up to the middle finger.

2. At the same time, they inhale and exhale deeply as they “rise and fall” along the fingers.

Upon reaching the tip of the middle finger, they hold their breath for 4 seconds.

3. The air is then slowly released, and the first step is repeated for the remaining two fingers, finishing at the wrist.

Invisible Trace 134

135

136

137

138

139

140

141

Concept Art of the activity

142

Breathing mimicry and relaxing animal sounds he acti ity of i icking ty ical ani al sounds and beha iors is a layful and e ecti e tool in the development of emotional intelligence.

With the aid of sound and visual animations, the user is encouraged to imitate animal sounds that provide a relaxing stimulus for the brain: the hiss of a snake, the buzz of a bee, among others.

This practice is not only enjoyable but also promotes concentration and relaxation. By focusing on imitating these sounds and movements, the user can disconnect from external worries and enter a state of calm. Additionally, this activity reinforces the connection with nature and fosters creativity, allowing the user to e lore di erent for s of e ression and e otional self regulation.

Bee Breath - Cover your ears.

- Let your lips vibrate to imitate the sound of a bee.

Whispering Breeze 143

144

Positive Affirmations About Oneself An action in gamification where the user must complete a task by making a positive affirmation about themselves.

Unexpected Links

Guided Journal Prompt With the help of a therapist, provide phrases related to self-concept and self-esteem for the child to reflect on or complete. These prompts should be carefully framed to avoid triggering any potential traumas or adverse effects.

Firefly Maze

If I were... I would be...

Given a list of objects, concepts, or things (color, number, animal, month, flower, etc.), the user must choose one specific item from the list and justify their choice.

Resonant Reflections

145

Concept Art of the activity

146

Positive Affirmations about Oneself he acti ity of aking ositi e a ir ations about oneself is an essential component for developing emotional intelligence. n this ga ification action, to co lete the task, the user ust ake a ositi e a ir ation about the sel es. his e ercise not only reinforces self estee and self confidence but also ro otes ositi e self talk. y erbali ing ositi e a ir ations, such as a ca able or deser e good things,” the user can reprogram negative thought patterns and cultivate a more optimistic mindset. This daily practice contributes to building a healthy and resilient self-image, helping the user face challenges with a positive attitude and greater emotional strength.

Unexpected Links 147

Guided Journal Prompt The guided journal activity with specific prompts is a valuable resource for fostering self-exploration and the development of emotional intelligence. With the help of a therapist, phrases related to self-concept and self-esteem are provided for the child to fill in or complete. These prompts are carefully designed to be specific and safe, avoiding triggering potential traumas or negative experiences.

For example, prompts like “I feel happy when…” or “I am good at…” help children reflect on their emotions and strengths in a positive and constructive way.

This exercise not only facilitates self-expression and self-awareness but also promotes the building of a strong self-esteem and a reflective attitude towards their own experiences and emotions.

Firefly Maze 148

149

Firefly Maze (Enchanted Spark) While the crystal charges and fills with energy, think about 4 things you’re grateful for this week.

150

151

152

Complete the crystal’s glow while you think about 4 things you’re grateful for this week.

Complete the crystal’s glow while you think about 4 things you’re grateful for this week.

Complete the crystal’s glow while you think about 4 things you’re grateful for this week.

Complete the crystal’s glow while you think about 4 things you’re grateful for this week.

Complete the crystal’s glow while you think about 4 things you’re grateful for this week.

Complete the crystal’s glow while you think about 4 things you’re grateful for this week.

All done!

153

154

155

If I were a/an

Concept Ar tof the activity 156

animal, object, thing, color...

If I were...I would be... his acti ity is a creati e and re ecti e tool designed to encourage self e children.

ression and intros ection in

In this activity, the user is presented with a list of objects, concepts, or things, such as colors, numbers, ani als, onths, or owers. he user ust choose one and ustify their choice. or e a le, if they choose to be a color, they ight e lain why they feel identified with blue and how that color re ects their personality or emotions.

This activity not only stimulates creativity and critical thinking but also allows children to explore di erent as ects of their identity and better understand their own references and feelings. dditionally, it fosters the articulation of their thoughts and emotions, strengthening their communication and ersonal re ection skills.

Resonant Reflections 157

158

Journey through the 5 Senses The user must match an object or concept with a sense (e.g., a muffin with taste or smell).

Sensory Garden

Body Relaxation Adopting a comfortable position, the user will perform a body relaxation exercise to stretch and release tension.

Breeze of Balance

Body Awareness Relaxation Exercise Adopting a comfortable position, the user will conduct a mindful relaxation of each part of their body.

Ancestral Roots

159

Journey through the 5 Senses This activity is an interactive experience designed to stimulate sensory awareness and emotional connection in children. n this acti ity, the user ust atch an ob ect or conce t with one of the fi e senses: sight, hearing, taste, smell, and touch. or e a le, they ight be resented with a u in and need to associate it with taste or s ell, describing how they ercei e its a or or aro a. nother o tion ight be an i age of a forest, which they could associate with sight and describe what they see, or with the sound of wind through the trees and describe what they hear.

This activity not only stimulates the senses but also helps children develop greater awareness of their surroundings and sensory experiences. By connecting objects and concepts with the senses, children learn to identify and verbalize their perceptions and associated emotions, which can enhance their e otional intelligence and ability to anage their feelings e ecti ely.

Sensory Garden 160

Concept Art of the activity

161

Concept Art of the activity

162

Body Relaxation The body relaxation activity is one of the most important activities on the platform.

With the help of sound and visual support from animations, the goal is for the user to become aware of each muscle, joint, and, ultimately, every part of their body as the scanner stops at these areas.

By focusing on each part of their body, the user disconnects from the outside world and relaxes.

Additionally, they start to articulate each part in a correct and deliberate manner, which reinforces the neural connections and the part of the brain responsible for motor skills and mobility.

scanner that highlights the area

Breeze of Balance 163

Exercise for body awareness Understanding and knowing our body is a very useful resource in emotional intelligence.

This activity specifically aims to strengthen the connection between the mind and body by exercising the entire body.

1. The user should get into a comfortable position and begin to breathe deeply, inhaling through the mouth and exhaling through the nose.

2. Stretch the arms strongly in front of them, tensing them. Then raise them to their head and, finally, extend them as far back as possible. Return to the starting position and relax the body.

3. Tense all the abdominal muscles for a few seconds. Return to the starting position and relax the body.

4. Try to lift the shoulders up, attempting to touch the ears with them. Return to the starting position and relax the body.

5. Strengthen the legs by tensing them. Return to the starting position and relax the body.

Ancestral Roots 164

165

166

167

Inhale slowly through the nose and exhale through the mouth.

en

168

ou

sts.

Raise them up to your (the arms).

Try to touch your ears wi shoulders.

head

Tense the muscles in your stomach.

ith your

Apply force to your legs and tense them.

169

170

171

172

Musical Composition Given a melodic base, the user will add sounds and compose their own relaxing music.

For example: picking fruits from a tree, and to receive them, an affirmation must be made first.

Canvas of Harmony

Ring of Emotions The user will be able to draw their emotions in any form they prefer (abstract, concise, etc.) within an emotion ring.

Space Orbit

Coloring Mandalas The user will color a mandala-style drawing by connecting the dots.

Astral Journey

173

Concept Art of the activity

174

Musical Composition This activity focuses on helping preadolescents express and explore their emotions through music, an art form that can be both therapeutic and educational. n this acti ity, users are gi en a sta and three ob ects ins ired by the sea, each re resenting a di erent usical instru ent or sound. hese ob ects can be laced at arious oints on the sta to create a uni ue elody. he e ibility of this acti ity allows users to e eri ent with sounds and co ose their own musical pieces, encouraging creativity and self-expression.

Users can experiment with placing the ob ects to roduce di erent elodies, moving and adjusting them according to their preferences.

This creative freedom helps them explore and express their feelings in a non-verbal way, providing a playful and enriching experience.

Canvas of Harmony 175

Rings of Emotions It is often difficult to express what we feel, and even to understand it. Identifying emotions can be challenging for adults, and even more so for preadolescents.

The “Órbita Espacial” activity helps children identify and express their feelings through a graphic game that functions as a visual journal. Even if emotions are not named, being able to express them through this medium can be very beneficial.

In this activity, the child fills the interior of a circle with the provided colors. There are no limits or rules, and nothing is right or wrong: the user simply needs to draw whatever they wish, whether it’s shapes, doodles, or identifiable objects.

Additionally, they have the option to erase if needed.

Space Orbit 176

177

Creative Nebula - Space Orbit Let’s create an emotion ring!

- Draw inside the circle everything that represents how you feel.

- There are no wrong answers: they can be shapes, doodles, faces, animals...

178

Ring: it is drawn inside Colors

179

180

Draw inside the circle whatever you like, anything that represents how you feel.

Draw inside the circle whatever you like, anything that represents how you feel.

Remember, there are no incorrect answers: it can be shapes, faces, doodles, animals...

Remember, there are no incorrect answers: it can be shapes, faces, doodles, animals...

Draw inside the circle whatever you like, anything that represents how you feel.

Draw inside the circle whatever you like, anything that represents how you feel.

Remember, there are no incorrect answers: it can be shapes, faces, doodles, animals...

Remember, there are no incorrect answers: it can be shapes, faces, doodles, animals...

Draw inside the circle whatever you like, anything that represents how you feel.

Remember, there are no incorrect answers: it can be shapes, faces, doodles, animals...

Draw inside the circle whatever you like, anything that represents how you feel.

Remember, there are no incorrect answers: it can be shapes, faces, doodles, animals...

181

Draw inside the circle whatever you like, anything that represents how you feel.

Remember, there are no incorrect answers: it can be shapes, faces, doodles, animals...

182

183

Concept Art of the activity

184

Coloring Mandalas The activity encourages creativity and emotional intelligence through the decoration of mandalas. oloring andalas o ers ulti le thera eutic benefits, es ecially for readolescents.

Engaging in this activity brings tranquility and relaxation, reduces stress, and prevents anxiety and distress. dditionally, it fosters creati ity and i ro es fine otor skills. o leting andalas also boosts self-esteem, increases patience and attention, and helps enhance concentration.

Users have various tools and colors available to decorate their mandala according to their preferences, allowing for ersonal and thera eutic creati e e ression. his acti ity ro ides an e ecti e way to esca e fro roble s and negati e e otions, o ering a rela ing and constructi e e erience.

Astral Journey 185

186

187

188

First attempt at the cover composition

189

Cover Sketch It is decided to compose the cover starting from Ollie as the central element and focal point.

Composition rules to consider: • Maintain a balanced composition • Play with symmetry • Consider perspective lines towards the main subject • Create depth with overlapping planes (like depth of field)

190

191

192

193

194

195

196

197

Image fromFreepik, designed by @Freepik, www.freepik.es

198

The User Experience (for children aged 10 to 13) Children aged 10 to 13 will be greeted by Ollie, a friendly character who will guide them through the platform. From the very beginning, the engaging and playful interface, filled with vibrant colors and captivating animations, will capture their attention, making navigation intuitive and fun. Everything has been designed to be intuitive, simple, and visually appealing, perfectly tailored for the target age group. The vivid color palette, menus, iconography, and other graphics are intuitive and visible, ensuring a pleasant and accessible experience for young users.

The platform’s design is inspired by the gamification typical of video games, a key factor in capturing the attention of such young users. By moving away from traditional media, which are now outdated and less appealing to them, the platform ensures higher engagement. The experience is designed so that users enjoy it and escape, without feeling like they are learning or undergoing therapy. Research conducted prior to the project showed that young people tend to reject “doing homework or therapy” during their free time. Therefore, each activity combines entertainment with learning, providing an environment where children can explore different thematic worlds representing aspects of the human body and emotional intelligence, such as Travesía Arrecife for relaxation, Nebulosa Creativa for fostering creativity, and Chispa Encantada for boosting self-esteem.

The platform’s graphic environment is designed in an illustrated book style aimed at a young audience, providing an attractive and familiar aesthetic that resonates with users in this age group. The controls and eye-catching, intuitive iconography facilitate navigation and use of the platform, ensuring that children can interact with the activities effectively and without frustration. Each world offers a variety of interactive activities designed to keep users engaged and motivated. These activities incorporate elements of gamification, such as challenges, badges, and rewards, allowing children to earn points and unlock new content as they progress. In addition to being entertaining, these activities are carefully designed to help children develop essential emotional skills, such as guided breathing, positive affirmations, body relaxation, and meditation, providing an enriching and educational experience that will enable them to better manage their emotions and improve their overall Emotional Intelligence.

199

Experience for the Target Audience (Parents, Guardians, Experts, and Psychologists) For parents, guardians, and professionals such as experts and psychologists, the platform offers a valuable and reliable tool to support children’s emotional development. The platform’s structure and activities are backed by research in child development and psychology, ensuring that the content is appropriate and beneficial for young users. Adults will find reassurance in the safety and quality of the content, knowing that each activity is designed to promote healthy emotional growth.

Additionally, the platform provides progress reports and detailed feedback on the activities completed by the children, allowing parents and guardians to closely monitor their child’s emotional development.

Professionals can use the platform as a complement in their sessions, recommending specific activities that align with each child’s individual needs. The inclusion of educational and therapeutic elements ensures that the platform is not only an entertainment tool but also a comprehensive resource for emotional support, contributing to a more complete and effective emotional education. The visual aesthetic, with its illustrated book style and vivid colors, not only attracts children but also reassures adults that the platform is a safe and enriching environment.

200

Image from Freepik, designed by @Freepik, www.freepik.es

201

The game structure is designed to provide an immersive and educational experience for users, combining elements of gamification and emotional learning in a visually appealing and easy-to-navigate environment. The platform is divided into several thematic worlds, each focused on a specific aspect of emotional development and Emotional Intelligence, all guided by the same main mission: to fill Ollie, the character, with color.

Central Portal and Adventure Start • Central Portal: The starting point where users begin their adventure. From here, users can access the various thematic worlds.

• Quick Guide: Carousel of screens to welcome users and provide a brief introduction to the platform and its functions.

Badges Badges are awarded for reaching specific milestones (completing activities), encouraging ongoing engagement and effort.

Connections Between Worlds Teleporters: Points on the map where users can jump directly from one world to another.

Basic Manual · Structure of the Interactive Platform 202

Feedback and Reports Reports are generated that parents, guardians, and professionals can review to track the user’s emotional development.

Feedback on real time The feedback screens after completing an activity provide a clearer idea of the usefulness, opinion, and whether the content has been helpful to the user.

Aesthetics and Design • Graphic Style: Inspired by illustrated books for young audiences, with a focus on organic shapes and curves.

• Color Palette: Bright and attractive colors corresponding to the emotional themes of each world.

• Intuitive Interface: Simple controls and eye-catching icons to facilitate navigation and use.

203

The Worlds Each thematic world represents one or several aspects of Emotional Intelligence and is designed to teach and practice specific emotional skills.

• Theme: Self-Esteem and Self-Concept • Structures: One main platform and two secondary ones, featuring elements of light and nature.

• Activities: Positive affirmations, sound mimicry, and games reflecting positive thoughts.

• Color Palette: Pink, red, orange, and yellow tones.

Enchanted Spark • Theme: Creativity and Emotional Resilience • Structures: A nebula with spiral-shaped platforms representing neural connections.

• Activities: Guided imagination, art and creation, association games.

• Color Palette: Pink, purple, and blue tones.

Creative Nebula

• Theme: Relaxation and Connection with the Body • Structures: Two main platforms inspired by Zen gardens, featuring elements of flora and water.

• Activities: Guided breathing, mindfulness, meditation.

• Color Palette: Green, orange, and brown tones.

Echo’s Peak

• Theme: Body-Mind Connection and Body Regulation • Structures: Platforms inspired by mountainous landscapes, with trails and viewpoints.

• Activities: Breathing exercises, body relaxation, yoga.

• Color Palette: Blue and green tones.

Reef Voyage 204

Activities and Games Each world contains various activities and games designed to teach and practice emotional skills.

1. Mindfulness and Guided Meditation: Activity based on calming sounds and visuals to promote meditation.

2. Positive Affirmations :Games where users must make positive statements about themselves.

3. Guided Journaling: Self-concept and self-esteem prompts that users need to complete.

4. Guided Imagination: Users choose objects or concepts and explain their choices.

5. Sensory Journey: Associating objects or concepts with the five senses.

6. Body Relaxation: Stretching and relaxation exercises.

7. Progression and Rewards System: Points and Rewards: Users earn points by completing activities and can unlock new content and worlds.

Basic Manual · Structure of the Interactive Platform 205

Regarding navigation within the platform, Ollie will be guided in two ways: When the user is interacting on a touch screen or smart device, their finger and touch pressure will direct the movement using an on-screen joystick, which will also indicate the direction being followed.

If the user is interacting on the platform from a PC, they can navigate similarly by dragging with the mouse or,

Basic Manual · Controls 206

Movement within the platform is basic, with the character moving up, down, left, right, and diagonally following the keyboard controls or joystick.

It is an open world with closed boundaries: the user can move freely around the map of the world but cannot fall off the platforms or leave them.

Basic Manual · Movement 207

208

Limits

209

Game Screen

Progress manu

Progress Map of the World

Help or Support Menu Open world with peripheral boundaries

Basic Manual · Screen Visualization 210

joystick

Wireframes Screens Iconography: badges or similar static menus

Aliento Silencioso Para esta actividad necesitarás todo el aire posible.

close window

Infla tus mofletes... ¡Empezar!

help or support

Button

word’s icon

button

211

The worlds of the platform are filled with strategic points of interest that add dynamism to the user experience. These specific points trigger activities or events that enrich the interaction. There are two main categories of points of interest: those that indicate activities and those that function as portals between worlds.

Points of interest that signal activities are designed to guide the user to specific tasks within the world.

They are represented with outlines when the activity has not yet been completed and with a fill when it has been done, providing clear visual feedback on progress.

On the other hand, points of interest such as portals or starting points act as connections between different worlds of the platform. These portals allow users to travel easily between different thematic areas, giving them greater freedom to explore and discover new activities and challenges.

Basic Manual · Points of Interest 212

Start point or teleport

points of interest for incomplete activities

points of interest for complete activities

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

Iconos Mundos 228

Reef Voyage

Silent Breath Invisible Trace Whispering Breeze

Echo’s Peak

Sensory Garden Breeze of Balance Ancestral Roots

Creative Nebula

Canvas of Harmony Space Orbit Astral Journey

Enchanted Spark

Unexpected Links Firefly Maze Resonant Reflections

For each world, an icon is designed to cohesively represent its essence, continuing with the organic and sinuous shapes and the central point (Ollie), maintaining a connection and cohesion among all of them. These icons not only serve as visual identifiers but also reinforce the narrative and aesthetics of each world, offering a symbolic representation that is easily recognizable and meaningful for the users.

Additionally, brainstorming sessions are conducted to generate names for the worlds and activities. These names are carefully developed to reflect the color, theme, and shape of each world and activity, while also suggesting the meaning and purpose of the activities without revealing it explicitly. This approach ensures that the names are intriguing and evocative, inviting users to explore and discover the content of each world and activity, while maintaining a consistent thematic and aesthetic connection throughout the platform.

Iconography of Worlds and Naming 229

Tipographies

Freude

Asap Regularr

Aa Bb Primary Colors

Secondary Colors

Iconography for Activities and Buttons 230

H1 Freude 67pt Body 55pt Buttons 45pt

Iconography for Activities

Not Completed

Completed

Iconography for Buttons

Exit Remember login Remember login

Start 231

Icons for badges (incomplete and completed)

Icons for badges (incomplete and completed) in progress menus

310 px

74 px

74 px 344 px

World Icons

250 px 93px

93 px

137 px

137 px

Iconography for Activities and Buttons 232

250 px

Circular buttons

254 px 134 px

129 px

Static

Statics (for menus)

for wireframes

Buttons accompanied by text

Active

65 px

335 px Extended buttons

Start 314 px

120 px

Start

Start

o er

Press

233

Progress Bars

HUDs 234

Feedback

a little bit

I think so

Yes, I feel better now

Yeah!

It was awesome

235

No Travesía Reef Voyage Arrecife Sí Yes

Start

Log in?

No

Sí Yes

Mundo Reef Voyage Travesía World Arrecife

Primera createvez (registro) profile

Punto Start depoint inicio

main Pantalla screen Principal

Activity Actividad 1

Activity Actividad 2

Activity Actividad 3

Sí Yes

Sí Yes

Sí Yes

Activity Actividad 11

Activity Actividad 22

Activity Actividad 33

Sí Yes

Sí Yes

Sí Yes

No

No

Start Comenzar adventure aventura

Sí Yes

Completed Completada

Completed Completada

No

No Insignia Badge

User Flow 236

No

Completed Completada

No Insignia Badge

Insignia Badge

No

No Cima Echo’s Peak del Eco

Nebulosa Creative Creativa Nebula

Sí Yes

Sí Yes

Sí Yes

Mundo Enchanted Chispa Spark World Encantada

Mundo Echo’s Peak Cima World del Eco

No

Activity Actividad 1

Activity Actividad 2

Activity Actividad 3

Sí Yes

No

Activity Actividad 1

Activity Actividad 2

Activity Actividad 3

Sí Yes

Sí Yes

Sí Yes

Sí Yes

Activity Actividad 3

Sí Yes

Sí Yes

Sí Yes

Sí Yes

Activity Actividad 2

Activity Actividad 3

No Actividad Activity 11

Activity Actividad 2

Activity Actividad 33

Sí Yes

Sí Yes

Sí Yes

Sí Yes

Sí Yes

Completed Completada

Completed Completada

Completed Completada

No

No

Activity Actividad 2

Activity Actividad 33

Sí Yes

Sí Yes

Sí Yes

Sí Yes

Completed Completada

Completed Completada

Completed Completada

No

No

Completed Completada

No

No

No Insignia Badge

Insignia Badge

Insignia Badge

No

Activity Actividad 2

No Actividad Activity 1

Completed Completada

Creative Mundo Nebula Nebulosa World Creativa

Activity Actividad 1

No Actividad Activity 1

Insignia Badge

No

Chispa Enchanted Encantada Spark

No Insignia Badge

Insignia Badge

Insignia Badge

Completed Completada

No Insignia Badge

Insignia Badge

237

Wireframes 238

Map screen

Help and Support screen

Ollie Screen: progress screen

Enchanted Spark World

Echo’s Peak World

Register screen Start Screen

Explanation screen + Activity

world selection map

Log in?

Screen Log in Screen

Completed Activity Screen + Badge

Feedback Screen

Creative Nebulosa World

Reef Voyage World

239

First sketches for wireframes (1) 240

241

First sketches for wireframes (2) 242

243

Tests 244

245

Author photos, wireframe selection process.

246

247

248

249

250

251

252

253

254

255

256

Start screen

Start

257

Log in? Screen

Welcome I’m Ollie, Would you like to join me on this adventure?

Start new adventure

258

Continue an adventure

Log in Screen

Write your code name

Don’t forget to save it or write it down on a paper for later. You will need your code name next time you want to visit Ollie.

Remember me

Next

259

User registration screen 1s

Choose your code name:

Name As

260

Name Bs

User registration screen 2

Your code name is: Name As

Don’t forget to save it or write it down on a paper for later. You will need your code name next time you want to visit Ollie.

Remember me

Next

261

Map between worlds screen

262

Enchanted Spark World Map (Info)s

Worlds

263

Echo’s Peak World Screen (Info)s

Worlds

264

Creative Nebula World Screen (Info)s

Worlds

265

Reef Voyage World Screen (Info)s

Worlds

266

Help & Support/Tutorial Screen

Do you need help?

Tutorial

Support

267

Support Screen

Support: To help you in a better way, please write us a e-mail to info@ollie-ei.es telling us your code name and your problem.

We will answer you as soon as possible :)

268

Feedback Screens

Did this activity help you?

a little bit

I think so

Yes, I feel better now

Yeah!

It was awesome

Exit

269

Feedback Screen · Echo’s Peak

Did this activity help you?

a little bit

I think so

Did this activity help you?

Yes, I feel better now

Yeah!

It was awesome

a little bit

I think so

Yes, I feel better now

Exit

Exit

Did this activity help you?

a little bit

I think so

Did this activity help you?

Yes, I feel better now

Yeah!

It was awesome

Exit

270

Yeah!

It was awesome

a little bit

I think so

Yes, I feel better now

Yeah!

It was awesome

Exit

Did this activity help you?

a little bit

I think so

Yes, I feel better now

Yeah!

It was awesome

Exit

271

Feedback Screen · Reef Voyage

Did this activity help you?

a little bit

I think so

Did this activity help you?

Yes, I feel better now

Yeah!

It was awesome

a little bit

I think so

Yes, I feel better now

Exit

Exit

Did this activity help you?

a little bit

I think so

Did this activity help you?

Yes, I feel better now

Yeah!

It was awesome

Exit

272

Yeah!

It was awesome

a little bit

I think so

Yes, I feel better now

Yeah!

It was awesome

Exit

Did this activity help you?

a little bit

I think so

Yes, I feel better now

Yeah!

It was awesome

Exit

273

Feedback Screen · Crative Nebula

Did this activity help you?

a little bit

I think so

Did this activity help you?

Yes, I feel better now

Yeah!

It was awesome

a little bit

I think so

Yes, I feel better now

Exit

Exit

Did this activity help you?

a little bit

I think so

Did this activity help you?

Yes, I feel better now

Yeah!

It was awesome

Exit

274

Yeah!

It was awesome

a little bit

I think so

Yes, I feel better now

Yeah!

It was awesome

Exit

Did this activity help you?

a little bit

I think so

Yes, I feel better now

Yeah!

It was awesome

Exit

275

Feedback Screen · Enchanted Spark

Did this activity help you?

a little bit

I think so

Did this activity help you?

Yes, I feel better now

Yeah!

It was awesome

a little bit

I think so

Yes, I feel better now

Exit

Exit

Did this activity help you?

a little bit

I think so

Did this activity help you?

Yes, I feel better now

Yeah!

It was awesome

Exit

276

Yeah!

It was awesome

a little bit

I think so

Yes, I feel better now

Yeah!

It was awesome

Exit

Did this activity help you?

a little bit

I think so

Yes, I feel better now

Yeah!

It was awesome

Exit

277

Not Completed Activities Screens

278

279

Completed Activities Screens

280

281

Progress Screens

282

283

284

285

286

Figma Prototype o assess the e iciency and e ecti eness of e erything proposed for the interactive platform, the prototyping software Figma is used to create a prototype.

This will allow adjustments to be made, visualize the project as a whole, and analyze it before the development phase.

On one hand, this prototype allows for faithful testing of the design and functionality of each of the screens or wireframes.

Additionally, it is a crucial phase for verifying usability, user e erience, and design aws.

Although this prototype will not be tested with the end user in this initial phase of the Ollie project, it will be useful in future phases to build a better product, service, and user experience.

287

Figma Prototype For the creation of this prototype in Figma, the final resources designed for the actual interactive platform have been used: wireframes, videos, animations, etc. owe er, ani ations or ideos ha e been ada ted to the a i u er itted by the software , so their s eed is faster than it would be in the final ersion.

A version as faithful as possible to what is currently considered the ost definiti e has been designed fra es ha e been used for the di erent screens, the sa e wirefra e ow has been used, and buttons have been designed with multiple component assets and three variants for their default position (default), hover (shows that it is a button if the user hovers over it, indicating that it is an interactive point or button), and active (when it is clicked).

For the worlds, concept arts have been used as screens and three points of interest for the activities in each one, two of which are already completed and one with full interactivity to complete the activity.

288

289

290

291

Imagen tomada de Freepik, diseñado por @Freepik, www.freepik.es

292

The Testing Version For the first phase of the interactive platform Ollie, a test is conducted with a diverse group of preadolescent children aged between 10 and 13 years, i.e., the MVP (Minimum Viable Product) of the project is tested.

To achieve this, the goal is to adapt the project design development to an environment that is as interactive as possible while remaining simplified. Therefore, although initially using Figma was considered, it is found more convenient to switch to another software that provides “more real” interactivity.

The easy-to-code developer GDevelop5 is used, known for its ability to create worlds or even complete platform-type video games more easily. Notably, this software has numerous tutorials and a free version that allows you to share the project both for PC and mobile on Google Play or the Android app store.En este desarrollo y adaptación de Ollie, se simplifican y amoldan los mundos Reef Voyage > Invisible Footprint (hand relaxation) Enchanted Spark > Firefly Maze (guided journal prompt) Echo’s Peak > Ancestral Roots (relaxation to become aware of each part of the body) Creative Nebula > Space Orbit (ring of emotions)

293

294

At first, it is believed possible to maintain the overall aesthetic. Later, a version of the worlds is created in a somewhat simplified axonometric view with points of interest (the activities themselves).

After several attempts, it is found more appropriate to reduce the design to 3 simple platforms containing the four worlds and some of their representative elements.

The wireframes are also simplified, although their mechanics and user flow are maintained.

Additionally, for this testing or “soft release,” one of the three activities from each world is integrated, resulting in a total of four activities instead of the twelve originally planned.

295

296

Reef Voyage

point of interest: start of the activity

point of interest: starting point and teleport to another world

Simple axonometric version with points of interest 297

298

Enchanted Spark

point of interest: start of the activity

point of interest: starting point and teleport to another world

Simple axonometric version with points of interest 299

300

Echo’s Peak

point of interest: start of the activity

point of interest: starting point and teleport to another world

Simple axonometric version with points of interest 301

302

Creative Nebula

point of interest: start of the activity

point of interest: starting point and teleport to another world

Simple axonometric version with points of interest 303

Final Version

stairs

Invisible walls: world boundaries

304

point of interest: start of the activity

305

Visual Design and UX/UI Design For this test version, both the visual design and UX/UI have been simplified: the focus is on testing the effectiveness and user experience of the activities.

For the visual design, three platforms are created in a style cohesive with the final platform.

Components from the final worlds are also used to decorate and delimit the game screen.

Regarding the UI design, the number of buttons and interactive elements is reduced: • One point of interest per world, meaning one activity will be tested from each.

• Ladders that allow users to move up and down from elevated platforms.

• Basic navigation buttons (up, down, left, and right arrows for the mobile version; keyboard movement controls for the PC version).

• Start and close buttons.

306

Tipography Freude

Asap Regularr

Aa Bb Primary Colors

H1 Freude 67pt Body 55pt Buttons 45pt

Secondary Colors

Iconography

Start

307

Interest Punto Point Interés

Enchanted Spark

Interest Punto Point Interés Echo’s Peak Worlds Pantalla Mundos Screen

Explanation Interest Punto Interés Point

Creative Nebula

Interest Punto Point Interés Reef Voyage

Wireframes GDevelop5 308

Activity Screen

Main Screen 309

Reef Voyage

Explanation Screen 1

Activity Screen

Explanation Screen 2

310

Interest Point/ Section of the main screen 311

Enchanted Spark

Explanation Screen

Activity Screen

312

Interest Point/ Section of the main screen 313

Echo’s Peak

Explanation Screen

Activity Screen

314

Interest Point/ Section of the main screen 315

Creative Nebula

Explanation Screen

Activity Screen

316

Interest Point/ Section of the main screen 317

318

319

320

321

322

323

324

325

326

Imagen tomada de Freepik, diseñado por @Freepik, www.freepik.es 327

328

Fotografías de autora. Primer día de testeo, Hospital Fundación de Alcorcón, Madrid 329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

Testing Results 344

345

After 3 days of using Ollie, preadolescents reported...

96% Decreased feelings of loneliness, stress and anxiety

They were able to cope with difficult feelings or situations more easily, without constant help from adults.

346

of users said they liked or loved the interactive platform.

>72% of users reported to their parents or guardians an improvement in their sense of calm throughout the day, especially at school.

Increased sleep time and quality, allowing for better rest.

Decreased feelings of tiredness during the day.

Increased concentration Aumentó la habilidad ability. de concentración

347

348

349

Packaging Design For physical sales, as it will always be available for digital purchase through the website www.ollie-ei.es, a prepaid or gift card system has been designed.

These cards will have four options for personal use: • 1-year subscription • 1-month subscription • 3-month subscription • 6-month subscription The mechanism for using these cards involves purchasing them at typical physical stores that sell this type of card for games or subscriptions, such as FNAC, Game, technology stores, etc.

Anyone can buy them, whether for their own use or as a gift for someone else.

The card’s back contains a code that is redeemed on the aforementioned website via a dedicated payment gateway. Along with the code, it is necessary to specify the type of device(s) and the purchase ticket number.

This simple packaging format was chosen for ease of use, the consumer’s familiarity with this type of card, and practicality, as the platform is not a physical product..

350

351

352

Packaging’s front

Packaging’s back

Card’s front

Card’s back

353

Vynil Collectible Figure As part of the merchandising, the key objects designed are the vinyl figures for each of the worlds.

They consist of two parts: • The figure of Ollie with an opening.

• The badges or color strokes of the chosen world.

Additionally, each Ollie figure has a different color reflection depending on the light: • Pink for the Chispa Encantada world.

• Blue for the Travesía Arrecife world.

• Yellow for the Cima del Eco world.

• Purple for the Nebulosa Creativa world.

354

355

Unfolding of the packaging box 356

357

Constructed and rendered in Blender 358

359

360

361

Creative Nebula

Reef Voyage 362

Echo’s Peak

Enchanted Spark

363

364

Construido y renderizado en Blender 365

366

3D printing tests

367

Visual Art (pp. 6-7) Graphic Narrative Comic of the Story (pp. 34-43) Appendix (pp. 342-351)

Seren

Visual Design UX/UI Design Conceptualization Storytelling Project Development Development of Worlds, Activities, and Characters Storyboards and Concept Arts Web Programming and Development 3D Design and Packaging

Laura Rosa de la Plaza

Credits 368

Sara Sánchez Canto

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

www.ollie-ei.es

387

388