School of Architecture, Engineering, and Design - Creative Campus
Ollie
University Final Degree Project
Author: Laura Rosa de la Plaza
Supervisor: Albert Culleré
&
Created
designed by Laura Rosa de la Plaza
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...
1. 2. 4. 3.
Download the EyeJack app from your smart device’s app store.
Scan the QR code on the previous page using the EyeJack app’s camera ( icon).
Not all pages include AR. When you see the following icon, it’s time to point your phone at the page(s).
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.
The Art Of
By Laura Rosa de la Plaza
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!
Reef Voyage
Enchanted Spark
Echo’s Peak
Creative Nebula
Cover Design
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
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 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.
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.
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
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..
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.
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
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.
Chispa Encantada
Cima del Eco
Travesía Arrecife
Nebulosa Creativa
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.
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.
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.
dentification and ecognition of otions
otional anage ent
athy and ocial kills elf stee and elf once t
Stress and Anxiety Management
Resilience and Coping
Emotional Intelligence
Emotional Diversity
“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.
Illustrative images generated with AI, Midjourney.
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
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.
REEF VOYAGE
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.
Concept
Anatomical images of the diaphragm and stomach, www.wikipedia.es
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.
First Sketch of the Reef Voyage World
Version 2 of the Sketch
Color and Texturing Tests Primary Color and eri ati e ues
Final Sketch
Color Tests
Final World in Flat Colors
World Components
Concept Art of the
ENCHANTED SPARK
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.
Concept
Illustrative images, www.unsplash.com
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.
First Sketch of the Enchanted Spark World
Axonometric Test
A. Climbing to Platform 2-3
B. Climbing to Platform 1-2
Primary Color and eri ati e ues
Color and Texturing Tests
Final Sketch
Color Tests
Final World in Flat Colors
World Components
Concept Art of the World
ECHO’S PEAK
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.
Concept
Human body images, www.wikipedia.es
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.
First Sketch of the Echo’s Peak World
Version 2 of the Sketch
Primary Color and eri ati e ues
Color and Texturing Tests
Final World in Flat Colors
World Components
Concept Art of the World
CREATIVE NEBULA
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.
Concept
Nervous system images, www.wikipedia.es
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.
First Sketch of the Creative Nebula World
Version 2 of the Sketch
Primary Color and eri ati e ues
Color and Texturing Tests
Final World in Flat Colors
World Components
Concept Art of the World
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
First Version of World Combination
Final Combination of Worlds
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.
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
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
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.
Echo’s Peak
Sensory Garden
Breeze of Balance Ancestral Roots
Enchanted Spark
Unexpected Links
Firefly Maze Resonant Reflections
Creative Nebula
Canvas of Harmony
Space Orbit
Astral Journey
Reef Voyage
Silent Breath
Invisible Trace
Whispering Breeze
Guided Breathing
Through sound, the user is encouraged to settle in and engage in a brief meditation session.
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.
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
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.
Concept Art of the activity
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.
Concept Art of the activity
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
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.
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.
Firefly Maze
Resonant Reflections
Concept Art of the activity
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
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.
While the crystal charges and fills with energy, think about 4 things you’re grateful for this week.
Firefly Maze (Enchanted Spark)
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!
Concept Ar tof the activity
If I were a/an 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 ression and intros ection in children.
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
Journey through the 5 Senses
The user must match an object or concept with a sense (e.g., a muffin with taste or smell).
Body Relaxation
Adopting a comfortable position, the user will perform a body relaxation exercise to stretch and release tension.
Body Awareness Relaxation Exercise
Adopting a comfortable position, the user will conduct a mindful relaxation of each part of their body.
Sensory Garden
Breeze of Balance
Ancestral Roots
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.
Sensory Garden
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 e
ssociate ell, ecti ely.
Concept Art of the activity
Concept Art of the activity
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
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.
Inhale slowly through the nose and exhale through the mouth.
Raise them up to your (the arms).
Try to touch your ears with shoulders.
head with your
Tense the muscles in your stomach.
Apply force to your legs and tense them.
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.
Ring of Emotions
The user will be able to draw their emotions in any form they prefer (abstract, concise, etc.) within an emotion ring.
Coloring Mandalas
The user will color a mandala-style drawing by connecting the dots.
Canvas of Harmony
Concept Art of the activity
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.
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.
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...
Ring: it is drawn inside Colors
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...
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...
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...
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...
Concept Art of the activity
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.
First attempt at the cover composition
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)
Image fromFreepik, designed by @Freepik, www.freepik.es
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.
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.
Image from Freepik, designed by @Freepik, www.freepik.es
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.
Badges
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 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
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.
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.
• 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.
• Theme: Relaxation and Connection with the Body
• Structures: Two main platforms inspired by Zen gardens, featuring elements of flora and water.
• Structures: Platforms inspired by mountainous landscapes, with trails and viewpoints.
• Activities: Breathing exercises, body relaxation, yoga.
• Color Palette: Blue and green tones.
Enchanted Spark
Echo’s Peak
Reef Voyage
Creative Nebula
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.
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,
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.
Open world with peripheral boundaries joystick
Wireframes Screens
Iconography: badges or similar
Para esta actividad necesitarás todo el aire posible.
Infla tus mofletes...
Aliento Silencioso
¡Empezar!
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
Start point or teleport
points of interest for incomplete activities
points of interest for complete activities
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
Iconos Mundos
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
Tipographies
Aa Bb
H1 Freude 67pt
Body 55pt
Buttons 45pt
Iconography
for Activities and Buttons
Iconography for Activities
Icons for badges (incomplete and completed) Icons for badges (incomplete and completed) in progress menus
World Icons
Iconography for Activities and Buttons
Circular buttons
Buttons accompanied by text
Extended buttons
User Flow
First sketches for wireframes (1)
First sketches for wireframes (2)
Author photos, wireframe selection process.
Welcome
I’m Ollie, Would you like to join me on this adventure?
Start new adventure
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
User registration screen 1s
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
Map between worlds screen
Worlds
Enchanted Spark World Map (Info)s
Echo’s Peak World Screen (Info)s
Worlds
Creative Nebula World Screen (Info)s
Worlds
Reef Voyage World Screen (Info)s
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 :)
Feedback Screens
Feedback Screen · Echo’s Peak
Feedback Screen · Reef Voyage
Did this activity help you?
Feedback Screen · Crative Nebula
Did this activity help you?
Feedback Screen · Enchanted Spark
Did this activity help you?
better now It was
Not Completed Activities Screens
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.
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.
Figma Prototype
Imagen tomada de Freepik, diseñado por @Freepik, www.freepik.es
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
Echo’s Peak > Ancestral Roots (relaxation to become aware of each part of the body)
Creative Nebula > Space Orbit (ring of emotions)
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.
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
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
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
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
Invisible walls: world boundaries
point of interest: start of the activity
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.
Tipography
Aa Bb
Primary Colors
Iconography Secondary Colors Start
H1 Freude 67pt
Body 55pt Buttons 45pt
Punto Interés
Punto Interés
Pantalla Mundos
Punto Interés
Punto Interés
Explanation Screen 1
Activity Screen
Explanation Screen 2
Reef Voyage
Interest Point/ Section of the main screen
Explanation Screen
Activity Screen
Enchanted Spark
Interest Point/ Section of the main screen
Echo’s Peak
Explanation Screen
Activity Screen
Interest Point/ Section of the main screen
Explanation Screen
Activity Screen
Interest Point/ Section of the main screen
Imagen tomada de Freepik, diseñado por @Freepik, www.freepik.es
Fotografías de autora. Primer día de testeo, Hospital Fundación de Alcorcón,329Madrid
After 3 days of using Ollie, preadolescents reported...
of users said they liked or loved the interactive platform.
Decreased feelings of loneliness, stress and anxiety
They were able to cope with difficult feelings or situations more easily, without constant help from adults.
>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.
Aumentó la habilidad de concentración
Increased concentration ability.
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..
Packaging’s front
Card’s front
Packaging’s back
Card’s back
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:
