Spirit Bound
- ⌘ Boss Design • Level Design • Aseprite • Sprite Animation • Godot ⌘
- Boss Design • Level Design • Aseprite • Sprite Animation • Godot ⌘
- Boss Design • Level Design • Aseprite • Sprite Animation • Godot ⌘
Spirit Bound
Spirit Bound is a 5-level pixel-art adventure platformer developed as a five-person university project, following Boo, a playful ghost on a quest to regain his humanity. As Lead Animator and designer for the climactic final stage, I designed and implemented the Level 5 boss fight against Mia, a spell-casting cat. My contributions covered the complete feature pipeline, including character sprites and animations created in Aseprite, custom combat interactions, and the boss defeat sequence.
-
Team - 5 people
-
Date - 2024 · Updated in 2026
-
Tools - Godot · Aseprite · Adobe Illustrator · Adobe Photoshop
-
My role - Level Designer, Lead Animator, Character Designer
1st Project
Pet Care Mobile App Design
- Crafting immersive digital experiences ⌘ Let's build your next world ⌘ Reach out to collaborate ⌘
- Crafting immersive digital experiences ⌘ Let's build your next world ⌘ Reach out to collaborate ⌘
- Crafting immersive digital experiences ⌘ Let's build your next world ⌘ Reach out to collaborate ⌘
- UX Thinking ⌘ UI Design ⌘ Responsive Implementation ⌘ CMS/Page Builder ⌘ Third-Party Integration ⌘ Payment Flow ⌘ Production Delivery ⌘
- UX Thinking ⌘ UI Design ⌘ Responsive Implementation ⌘ CMS/Page Builder ⌘ Third-Party Integration ⌘ Payment Flow ⌘ Production Delivery ⌘
- UX Thinking ⌘ UI Design ⌘ Responsive Implementation ⌘ CMS/Page Builder ⌘ Third-Party Integration ⌘ Payment Flow ⌘ Production Delivery ⌘
- ⌘ Mobile UX ⌘ UI Design ⌘ Information Architecture ⌘ Wireframing ⌘ Figma Prototyping
- ⌘ Mobile UX ⌘ UI Design ⌘ Information Architecture ⌘ Wireframing ⌘ Figma Prototyping
- ⌘ Mobile UX ⌘ UI Design ⌘ Information Architecture ⌘ Wireframing ⌘ Figma Prototyping
1st Project
Pet Care Mobile App Design
To address this challenge, our approach involved crafting a distinctive brand identity that effectively communicated Vutura Sioma's values of sustainability, innovation, and authenticity. Our team meticulously devised a comprehensive brand strategy centered around creating a visually.
I redesigned the ITML Institute landing page in Figma to make its programs easier to discover through clearer content hierarchy, readable sections, and more visible certification pathways.
The Circus is a personal 3D project created in Blender to develop my modeling, material design, lighting, and rendering skills. Inspired by the playful atmosphere of a circus, I created a colorful environment featuring stylized characters, decorative props, and animated elements.
The project explores how simple geometric forms, expressive character designs, vibrant materials, and lighting can come together to create a cohesive and visually engaging 3D scene.
Barrett Holistic Services is a coaching and personal development business focused on helping individuals build confidence and personal growth.
In 2022, I designed a landing page concept in Figma for the business, which had no existing website or established visual identity. The project focused on creating a clean, approachable digital experience tailored to an audience that included nurses and healthcare professionals.
I was responsible for the website's wireframing, interface design, content organization, and visual direction, including the supporting brand identity.
PetPal is a mobile app concept that helps young adult pet owners track their pet's health, set care reminders, and find pet-friendly places in their city, with care tips for dogs, cats, reptiles, birds, and rodents. I designed the app's structure and interface in Figma, from the navigation map and wireframes to 32 connected, prototype-ready screens, in collaboration with Claudia Quevedo, who created the brand identity and illustrations.
A self-initiated website concept for Templo, a swimwear brand I was familiar with. The project explored how minimalist web design, refined typography, and a soft color palette could communicate the brand's aesthetic while keeping its products at the center of the experience.
My goal was to develop my web design skills in Figma and explore the transition from visual design to HTML and CSS.
The agency already had an established website, but its podcast booking process needed a dedicated experience that made it easier for prospective guests to understand the opportunity, review available information, select a booking time, and complete the booking process.
I was responsible for designing and implementing a dedicated podcast booking page within the existing WordPress ecosystem, while connecting the necessary scheduling and payment functionality.
Bebés Fuertes is a five-minute animated educational infographic developed as a collaborative university thesis project in 2024. The video explores complementary feeding for healthy infants aged 6 to 24 months, presenting nutritional information through colorful illustrations, animated graphics, and audiovisual storytelling.
As the project's Animation Director and Video Editor, I was responsible for animating more than 30 scenes, managing their visual transitions, and assembling the final video using Adobe After Effects and Premiere Pro. I also contributed to the research, script development, and audio production, working alongside three collaborators responsible for the project's creative direction and visual assets.
Role - UI/UX Designer · Web Designer · WordPress/Elementor Implementation
Date - February 2026
Disciplines - UI/UX · Interaction Design · Web Design · No-Code Implementation
Tools - Figma · Elementor · WordPress · Acuity Scheduling · Stripe
Project Type - Personal Project
Year - 2023
Disciplines - UI/UX Design · Web Design · HTML & CSS
Tools - Figma · Visual Studio Code · HTML · CSS
My role - UI/UX Designer
Date - 2024
Disciplines – UI/UX · Interaction Design · Mobile App Design · Information Architecture · Prototyping
Tools - Figma · Adobe Illustrator
Project Type - Landing Page Redesign
Year - 2025
Disciplines - UI/UX Design · Web Design · Information Architecture
Tool - Figma
Role - 3D Artist · Modeling, Materials, Lighting
Date - 2024
Disciplines - 3D Modeling · Environment Design · Character Modeling · Rendering
Tools - Blender 3.4.1
Project Type - Client Project
Year - 2022
Disciplines - UI/UX Design · Web Design · Wireframing · Visual Design
Tools - Figma
My Role - Animation Director · Motion Designer · Video Editor
Year - 2024
Disciplines - Motion Graphics · 2D Animation · Video Editing · Animation Direction
Tools - Adobe After Effects · Adobe Premiere Pro
Team - 4 Members
Problem
Barrett Holistic Services needed a digital presence to introduce its coaching services, courses, and personal development resources to potential clients. With no existing website to build upon, the challenge was to establish a clear content structure and intuitive browsing experience while creating a visual direction that felt welcoming and trustworthy.
The design needed to communicate the business's offerings without overwhelming visitors, particularly for an audience that included busy healthcare professionals.
Solution
I designed a landing page concept in Figma, organizing the business's offerings into clearly defined sections with straightforward navigation and consistent calls to action.
The layout introduces the business and its founder, followed by dedicated sections for coaching, online courses, downloadable resources, testimonials, and consultation bookings.
I combined minimal layouts, soft colors, approachable typography, and generous whitespace to create a cohesive interface that prioritizes readability and makes the available services easier to explore.
Graphic Concept & Design Criteria
Visual Direction
I established a minimalist visual direction using soft pink and lavender tones, balanced typography, and lifestyle photography to create a warm, calming atmosphere.
Rounded interface elements, subtle background transitions, and generous spacing helped establish a friendly, approachable aesthetic while maintaining a clear visual hierarchy. I also created the logo and selected the color palette and typography, developing a consistent visual identity that supported the overall website design.
Original Landing Page Wireframe
Design Process
01 — Content Structure & User Flow
I organized the landing page around the actions visitors would need to take: learning about the business, exploring coaching services, browsing available courses, and booking a consultation.
The content follows a structured progression from the initial introduction and founder's story to service discovery, testimonials, and a final call to action.
02 — Wireframing in Figma
I created a desktop landing page wireframe in Figma to establish the page structure before developing the final visual design. I defined the layout, content hierarchy, section spacing, and placement of key interface components, including navigation, service cards, course listings, testimonial sections, and calls to action.
03 — UI Design in Figma
I translated the wireframe into the final high-fidelity landing page design, applying the visual identity through typography, colors, imagery, and interface components. I focused on consistent spacing, alignment, readable text, and balanced layouts to maintain a cohesive experience across the different sections.
Outcome
The project resulted in a complete landing page wireframe and high-fidelity UI design in Figma, establishing the visual direction and content structure for Barrett Holistic Services' proposed website.
Key Takeaways
This project strengthened my ability to approach a website design from its earliest stages, from defining the content structure and creating wireframes to developing a complete high-fidelity interface in Figma.
It reinforced the importance of creating intuitive layouts and clear navigation while balancing visual design with the needs of a specific audience. The experience also helped me develop a more structured UI design workflow, translating an initial concept into a visually consistent and organized landing page.
Final Landing Page Design
Problem
I wanted to strengthen my 3D modeling skills by creating a complete themed environment rather than focusing on a single object.
The challenge was to model a variety of characters and props with distinct shapes, materials, and visual details while maintaining a consistent art direction across the entire scene.
I also wanted to explore how lighting, composition, and simple animations could add personality and atmosphere to the final environment.
Solution
I developed a stylized circus environment featuring multiple original 3D assets, including a circus tent, clown, lion, elephant, rabbit in a magician's hat, cannon, decorative props, and environmental elements.
Using Blender, I modeled each asset, applied materials and textures, adjusted lighting, and arranged the elements into a cohesive scene.
I also experimented with keyframe animation, adding movement to selected objects to bring additional energy and personality to the environment.
Visual Direction
The project follows a playful, cartoon-inspired visual style, combining bright colors and pastel tones to create a cheerful, welcoming atmosphere.
I used rounded geometric forms, exaggerated proportions, and simplified character features to establish a consistent visual identity across the different models.
Warm lighting, soft shadows, and contrasting materials helped emphasize the shapes and details of each asset, while the final composition brought the individual elements together into a festive circus setting.
The Cast
02 — Character & Prop Development
I created several distinct characters and objects, including a clown, lion, elephant, rabbit, and cat, alongside circus props such as a tent, cannon, and decorative structures.
Each asset presented different modeling challenges, from defining character proportions and facial features to creating more intricate geometry and decorative details.
This stage allowed me to practice building recognizable, expressive forms while maintaining a consistent art style.
From Primitives to Final Model
01 — 3D Modeling
I modeled the characters, structures, and environmental props in Blender using primitive meshes such as spheres, cylinders, cones, and cubes.
Through mesh editing, scaling, extrusion, and geometry modifiers, I transformed these basic shapes into stylized characters and objects.
I explored different modeling techniques, including Subdivision Surface for smoother forms, Mirror for symmetrical geometry, and mesh-editing tools for more detailed structures.
Materials, Lighting and Scene
03 — Materials & Lighting
I applied materials and textures to establish visual differences between the models, experimenting with color, surface finishes, and reflectivity.
I used contrasting colors, metallic finishes, and textured surfaces to give the assets distinct appearances.
I then adjusted the scene lighting to emphasize forms, create soft shadows, and establish the atmosphere of the final environment.
04 — Scene Composition & Rendering
Once the individual assets were completed, I arranged them into a unified circus environment, combining characters, props, lighting, and decorative elements.
I focused on the placement of objects, visual balance, and the relationship between foreground and background elements to create a cohesive composition.
I rendered both individual assets and the assembled scene to showcase the models, materials, and overall visual direction.
Props
Animation Tests
05 — Keyframe Animation
I also explored basic animation techniques in Blender, creating movement for selected elements.
I animated the 3D lettering through changes in position and rotation, using the Graph Editor to adjust movement.
I also created a short sequence involving the cat and cannon, using keyframes and timing to coordinate their movements.
My Contribution
I created this project on my own, from start to finish in Blender: modeling every character and prop, applying materials and textures, setting up lighting, composing and rendering the scene, and animating selected elements.
Outcome
The project resulted in a stylized 3D circus environment composed of individually modeled characters, structures, and decorative props, along with rendered asset presentations and short animation sequences.
It allowed me to practice multiple stages of the 3D creation process, from mesh modeling and material application to lighting, scene composition, rendering, and basic animation.
What I Learned
This project helped me develop a stronger understanding of Blender's modeling workflow and the technical considerations involved in creating a cohesive 3D environment.
By working with different characters, objects, materials, and animations, I became more comfortable translating visual concepts into three-dimensional forms.
It also reinforced the importance of consistent art direction and scene composition, skills I can apply to future projects involving 3D assets, digital environments, and interactive experiences.
Problem
Complementary feeding is an important stage of early childhood development, yet parents and caregivers may encounter confusing or incomplete information about introducing new foods into an infant's diet. The challenge was to communicate this educational content through a format that would be approachable, visually engaging, and easy to follow.
From an animation perspective, the project required transforming a large collection of illustrations, statistical graphics, and educational information into a cohesive five-minute video while maintaining consistency in movement, pacing, and visual storytelling.
Solution
- Scripted pacing: The script gives every scene a set duration, animation type, and transition, so the video keeps a steady rhythm across all five minutes.
- Animated data: Five chart types (line, bar, scatter, pie, and area) build on screen to support the narration, so statistics are easy to read.
- Clear audio: A voice-over carries the explanation while the background music stays at a lower level, so the information is easy to follow.
- Consistent look: A shared palette, Futura typography, and a flat vector style keep 30+ scenes visually cohesive.
- Universal format: The video is exported as a standard 16:9 MP4 (H.264) that plays on any device.
Visual Direction
The project follows a playful, colorful visual style designed to make educational information feel approachable and engaging. The visual identity combines a palette of turquoise, pink, orange, and yellow with stylized character illustrations, simplified statistical graphics, and bold typography.
From a motion design perspective, I focused on maintaining consistency between the different visual assets through coordinated transitions, animation timing, and scene composition. The video was developed in a 16:9 format at 1920 × 1080 resolution, with a duration of five minutes.
01 — Research & Content Development
I contributed to researching complementary feeding practices and organizing the educational information presented throughout the video. I also developed the script, helping translate the research into a structured narrative that could be communicated through animated visuals and voiceover narration.
02 — Scene Planning & Visual Coordination
Working with the team's storyboard and illustrated assets, I organized the visual material into sequences that could be animated and assembled into the final production. This stage involved considering scene composition, content progression, and how different elements would enter, move, and transition throughout the video.
03 — Motion Graphics & 2D Animation
I animated more than 30 scenes in Adobe After Effects, transforming static illustrations, characters, text, and informational graphics into moving compositions. I focused on animation timing, movement, transitions, and visual continuity, adapting the motion to the content of each scene while maintaining a consistent style across the video.
04 — Audio & Video Editing
I assembled the animated scenes into the final five-minute video using Adobe Premiere Pro. I was also responsible for integrating the audio elements, coordinating the voiceover, background music, and visual sequences to create a cohesive presentation. This stage focused on maintaining narrative flow, consistent pacing, and synchronization between the animation and audio.
%20premeire%20pro%20timeline%20entirely.png)
My Contribution
As Animation Director, I was responsible for the motion design and audiovisual assembly of the project. Most of the illustrations and visual assets were developed by other team members, I created a few basic illustrated elements when extra hands were needed, given my primary responsibility was transforming those assets into the finished animated video.
- 30+ Scenes: Animated more than 30 scenes in Adobe After Effects.
- Motion Graphics: Developed motion graphics for illustrated characters, text, and informational graphics.
- Visual Continuity: Managed scene transitions, animation timing, and visual continuity.
- Video Assembly: Edited and assembled the final five-minute video in Adobe Premiere Pro.
- Audio Integration: Integrated and coordinated the voiceover, background music, and audio elements.
- Story & Research: Contributed to research, script development, and selected supporting illustrations.
Outcome
The project resulted in a completed five-minute animated educational infographic combining motion graphics, 2D character animation, informational visuals, voiceover narration, and music.
The final video brought together the team's research and visual assets through a unified animation and editing workflow, transforming static educational content into a cohesive audiovisual presentation.
Key Takeaways
This project strengthened my technical skills in Adobe After Effects and Premiere Pro, particularly in managing a large number of animated scenes within a single production. It gave me valuable experience directing animation, coordinating visual assets, controlling movement and pacing, and synchronizing audio with motion graphics.
Working on a collaborative thesis also reinforced the importance of organization, clear creative communication, and consistency when bringing together contributions from multiple team members.
Full Animated Infographic Video
Credits
- Isabel PeñaAnimation Direction, 2D Animation, Motion Graphics, Video Editing, Script, and Supporting Research
- Claudia QuevedoCreative Direction, Storyboarding, and Character Illustration
- Ana DíazBackground Illustration
- Claudia RubioPrimary Research
- Simón MoránVoiceover Narration
- Kenny Attow & Carlos PirelaEditing Advisors
- Dra. Maruja Mora de PeñaResearch Advisor
- Music: "Salsa Music"Eternal Sunshine / TechOasis
- Academic Thesis2024
A short gameplay sequence demonstrating the final level's core interaction: using yarn projectiles to damage Mia while avoiding her laser attacks.
Problem
To address this challenge, our approach involved crafting a distinctive brand identity that effectively communicated Vutura Sioma's values of sustainability, innovation, and authenticity. Our team meticulously devised a comprehensive brand strategy centered around creating a visually.
Our goal was to provide a strong visual language and help BizzBuzz to stand out and get the appealing look & feel which resonates with a target audience and gives a feeling of joy and safety during product usage. Also, we needed to introduce the product to potential users.
Solution
To address this challenge, our approach involved crafting a distinctive brand identity that effectively communicated Vutura Sioma's values of sustainability, innovation, and authenticity. Our team meticulously devised a comprehensive brand strategy centered around creating a visually.
Our goal was to provide a strong visual language and help BizzBuzz to stand out and get the appealing look & feel which resonates with a target audience and gives a feeling of joy and safety during product usage. Also, we needed to introduce the product to potential users.
Problem
Caring for a pet means keeping track of many small things: vet visits, vaccines, weight, grooming, symptoms, and care advice that changes by species. The brief was to design a free app for 21 to 28 year-olds that brings all of this into one place and stays easy to use every day, for common pets from dogs and cats to reptiles, birds, and rodents.
Solution
- Onboarding: A short quiz asks one question per screen (name, species, breed, age) using tap-to-select cards and lists, so typing is limited to the pet's name.
- Structure: One home screen with four large entry points (Profile, Pet-friendly places, Health log, Reminders), plus a home button on every screen, puts each main section one tap away.
- Health tracking: Weight and hygiene logs (oral care, bathing, nails) pair a quick "log now" action with past entries and a trend graph, so owners can see changes over time.
- Safety: The symptom checklist tells users to see their vet as soon as possible if they select anything, so the app informs without trying to diagnose.
- Local discovery: Pet-friendly places are grouped into six categories (clinics, groomers, daycares, stores, public areas, restaurants) on photo cards.
Contributions
- Information architecture: Built the navigation map that organizes the app into onboarding, home, health log, pet-friendly places, reminders, and profile.
- Wireframes: Wireframed each flow in low fidelity to settle layout and navigation before visual design.
- UI design: Designed all 32 screens in Figma: layout, spacing, hierarchy, and components such as selection cards, list rows, trend charts, and bottom navigation. I built them with the brand assets Claudia created.
- Prototype: Linked the screens into a clickable Figma prototype covering the full flow from sign-up to every section.
Problem
The original ITML Institute landing page relied on dense text, overlapping imagery, and inconsistent visual hierarchy, making the institute's programs difficult to scan. Important information—including the ITMLS certification—was hard to discover, and visitors had few clear calls to action.
Solution
I redesigned the page in Figma around a clearer content structure, more readable typography, and distinct sections for the institute, its certifications, and professional development opportunities. The redesign gives all three certifications equal visibility, introduces a career progression timeline, and uses consistent calls to action to make program exploration more intuitive.
Landing Page Wireframe
The wireframe established a more focused hero, scannable content cards, and dedicated sections for the three ITML certifications.
Design Process
01 — Website Evaluation
I reviewed the existing landing page to identify issues with content organization, readability, navigation, and visual consistency, including the missing ITMLS certification and unclear next steps.
02 — Content Restructuring
I reorganized the page into distinct sections for the institute's goals, certification programs, professional development opportunities, and credibility indicators. A career progression timeline helps explain how the certifications relate to stages in an IT professional's career.
03 — UI Redesign in Figma
I refined the typography, spacing, alignment, color distribution, and component consistency. The updated interface uses structured cards, clearer content groups, and alternating backgrounds while retaining the institute's navy, blue, orange, and yellow palette and established visual identity.
Outcome
The result is a more organized Figma landing page redesign that presents all three certifications with equal visibility, clearer career progression, and more consistent paths for visitors to explore training opportunities.
Key Takeaways
This project strengthened my ability to evaluate an existing interface, identify usability issues, and translate those findings into practical improvements to information hierarchy, content discovery, and visual consistency.
My Redesign
Original Design
PetPal Navigation Map
How the app is organized, from sign-up to the four main sections.
PetPal Screen Breakdown
The 32 screens I designed, grouped by flow.
Design Process
01 — Information Architecture
I developed the application's navigation map, organizing the user journey from registration and onboarding to the four main sections: pet profiles, health records, reminders, and pet-friendly locations.
This structure established the relationships between screens and helped define how users would navigate the application.
02 — Wireframing
I created the application's wireframes, defining the layout, spacing, content hierarchy, and placement of interface elements before moving into the final visual design.
This stage helped me establish consistent screen structures and organize the different features within the mobile experience.
03 — UI Design
I designed all 32 application screens in Figma, translating the initial wireframes into the final interface.
Using the visual identity, typography, color palette, and illustrations developed by Claudia, I was responsible for the overall UI composition, component placement, spacing, alignment, visual hierarchy, and consistency across screens.
04 — Interactive Prototyping
I connected the completed screens in Figma, creating an interactive prototype that demonstrates the application's navigation and primary user flows.
The prototype brings together the onboarding experience, profile management, health tracking, reminders, and pet-friendly location features.
Outcome
The project resulted in a complete 32-screen mobile app design concept and an interactive Figma prototype.
The final design combines a structured navigation experience with a cohesive visual identity, demonstrating how the application's different pet care features could work together within one mobile interface.
What I Learned
PetPal strengthened my ability to design a multi-screen mobile experience, from organizing complex navigation structures to maintaining visual consistency across an entire application.
Working collaboratively also taught me how to translate an established brand identity into a functional digital interface, balancing creative direction with interface structure, usability considerations, and interactive prototyping.
Credits
Isabel Peña — UI/UX Design, Information Architecture, Wireframing, All 32 Interface Screens & Interactive Prototyping
Claudia Quevedo — Branding, Logo Design, Illustrations, Color Palette & Initial Typography Direction
Problem
I wanted to explore how Templo's visual identity could translate into a cohesive digital experience. The challenge was to create a website concept that conveyed the delicacy and elegance of its swimwear without overwhelming the products with unnecessary visual elements.
The design needed a clear visual hierarchy, complementary typography, and a cohesive color palette to establish a consistent visual direction across the homepage and product sections.
Solution
I developed a minimalist, flat-design website concept featuring a soft pink palette, refined typography, and a clean layout. By keeping decorative elements to a minimum, I aimed to give the swimwear visual prominence while creating an elegant and cohesive browsing experience.
I began by developing the visual concept in Figma, defining the layout, typography, and color palette. I also explored translating the design into HTML and CSS using Visual Studio Code.
Graphic Concept & Design Criteria
Visual Direction
The design follows a minimalist, flat-design approach intended to complement the elegance and delicacy of Templo's swimwear. A restrained use of graphic elements keeps the focus on the products, while the overall layout aims to create a clean and balanced presentation.
Design Process
01 — Visual Exploration
I established the visual direction by selecting a minimalist design approach, defining the color palette, and pairing Garamond with Open Sans. These decisions formed the foundation for a consistent visual language.
02 — UI Design in Figma
I developed the website concept in Figma, exploring the homepage and product sections. I focused on layout, typography, color, and visual hierarchy to create a cohesive presentation aligned with the brand's aesthetic.
03 — HTML & CSS Exploration
Using Visual Studio Code, I explored translating the visual concept into HTML and CSS. This allowed me to connect my design process with front-end fundamentals and better understand how a visual layout can be represented through code.
Outcome
The project resulted in a Figma-based website concept that translates Templo's swimwear aesthetic into a minimalist digital design. It provided an opportunity to strengthen my visual design skills and explore the relationship between interface design and front-end development.
Key Takeaway
This project helped me develop a more structured approach to web design, from establishing a visual direction to applying typography, color, and hierarchy across multiple sections. It also encouraged me to explore how design decisions translate into HTML and CSS.
Problem
The agency needed a dedicated podcast booking page within its existing website. The challenge was to create a clear, professional experience that communicated the podcast's value, organized essential information, and guided prospective guests toward booking a session.
Beyond the visual design, the page needed to support a functional booking and payment process without requiring a redesign of the existing website.
Solution
I designed and built a dedicated podcast booking experience using UI/UX principles and WordPress with Elementor. I organized the page content, prepared the podcast thumbnails and supporting assets, and created a visual flow to guide visitors from discovering the podcast to booking a session.
To bring the experience into production, I embedded Acuity Scheduling and integrated Stripe payments, connecting the page's design with the functionality needed to manage bookings.
Problem
After four levels of running and jumping, the game needed a finale that felt different. The boss level had to teach a new ability quickly, build tension, and make damage easy to read.
Solution
- Onboarding: A text box explains that yarn affects the boss and clicking throws it.
- Pacing: A calm corridor with chill music leads into a dungeon as the metal guitar solos begin.
- Risk and reward: Mia fires lasers when you're close, encouraging you to fight from range.
- Feedback: This is the only level with health bars above both the player and the boss.
- Resolution: At 0%, Mia loops a white-flag surrender; you then reach the last door and the game ends.
Contributions
- Level design: Designed Level 5's layout, the corridor into the boss fight, the arena, and the player's path from introduction to final exit.
- Boss design: Designed Mia as the final boss, including her laser attack, yarn weakness, health system, and defeat state.
- 2D art: Designed Mia and created her sprites, Aseprite animations, and defeat animation, plus game-ready assets adapted from the team's Illustrator artwork.
- Implementation: Built the boss fight in Godot, including the laser, yarn damage, health behavior, and 0% defeat state.
Level 5 Layout & Player Flow
How the level paces the player from a calm corridor into the boss arena.
Mia Boss Encounter Flow
The combat loop, player counter-play, and win/loss logic of the boss fight.
Process
- UI/UX Design: After completing the UI/UX design on Figma, I translated the experience into a production-ready WordPress page using Elementor.
- WordPress / Elementor: Designed and built the page structure, responsive layouts, spacing, typography, components, interactions, and content presentation.
- Acuity Scheduling: Embedded and configured the booking experience so users could select an available date and time without leaving the intended flow.
- Stripe: Integrated the payment workflow required to complete the booking process.
- Content & Assets: Prepared podcast thumbnails, imagery, supporting information, and visual assets used throughout the page.
Integrations
My Contribution
I was responsible for the UX/UI design and production implementation of the podcast booking page within the agency's existing WordPress website. My work included page structure and user flow, visual design, responsive implementation in Elementor, preparation of supporting assets and content, Acuity Scheduling integration, and Stripe payment integration.
Outcome
The final experience provided the agency with a dedicated, production-ready booking destination that combined the podcast information, scheduling, and payment flow into one cohesive experience.
What I Learned
This project strengthened my ability to think beyond the visual layer of a design and consider the complete experience—from information hierarchy and interaction design through implementation, third-party integrations, responsive behavior, and the final production experience.
Reflection
Working on Spirit Bound gave me my first experience designing and implementing a gameplay encounter within a collaborative game development project. My biggest takeaway was the importance of connecting visual design with gameplay. Designing Mia was more than creating a visually recognizable boss, her animations, attack behavior, health feedback and defeat state all needed to communicate information to the player. Revisiting the project later also allowed me to move beyond the original visual concept and focus on making the encounter actually function as a playable experience.
To address this challenge, our approach involved crafting a distinctive brand identity that effectively communicated Vutura Sioma's values of sustainability, innovation, and authenticity. Our team meticulously devised a comprehensive brand strategy centered around creating a visually. Our goal was to provide a strong visual language and help BizzBuzz to stand out and get the appealing look & feel which resonates with a target audience and gives a feeling of joy and safety during product usage. Also, we needed to introduce the product to potential users. BizzBuzz is a travel startup born by the collaboration of professionals from tech and banking industries. The company has a strong dev department but the design language was weak and kit-made so that they had a risk of getting lost in the pool of competitors.
Spirit Bound - Boss Level
Spirit Bound - Full Game
Credits
Spirit Bound was developed by a 5 person team. Each member was responsible for different levels and aspects of the project.
- Ana MoralesBranding / Level 2 / Initial UI / Credits
- Angella CastroLevel 4
- Estefanía MorenoLevel 3 / Frog Character
- María ToroLevel 1
- Isabel PeñaLevel 5 / Boss Design / 2D Animation / Gameplay Implementation
Shared contribution
The team collaborated on the overall concept, visual direction, character development and game assets. The main character was developed collaboratively, while I was responsible for adapting and animating game assets in Aseprite where needed.
- Crafting immersive digital experiences ⌘ Let's build your next world ⌘ Reach out to collaborate ⌘
- Crafting immersive digital experiences ⌘ Let's build your next world ⌘ Reach out to collaborate ⌘
- Crafting immersive digital experiences ⌘ Let's build your next world ⌘ Reach out to collaborate ⌘
