SafeBack App & Campaign

®2025

IN A WORLD SATURATED WITH TRAGIC NEWS, 'DONOR FATIGUE' SETS IN. PEOPLE SCROLL PAST WAR IMAGES BECAUSE THEY FEEL HELPLESS. MY CHALLENGE WAS TO DESIGN A SYSTEM THAT CONVERTS PASSIVE SYMPATHY INTO ACTIVE, INSTANT SUPPORT.

Context

Academic Project (Mockup for UNICEF)

Year

2024

Role

UI/UX DESIGN MOTION GRAPHICS ART DIRECTION

Storyboarding & Narrative Planning

Original hand-drawn sketches mapping out the user journey and emotional arc.

The challenge was to create a character that evokes instant empathy without being overly graphic. I started with loose sketches to capture the raw

emotion of fear. The final vector design uses a simplified, almost childlike art style to contrast with the harsh reality of the war zone background, emphasizing innocence lost.

The challenge was to create a character that evokes instant empathy without being overly graphic. I started with loose sketches to capture the raw emotion of fear. The final vector design uses a simplified, almost childlike art style to contrast with the harsh reality of the war zone background, emphasizing innocence lost.

From Paper to Pixel :

I traced my rough pencil concepts in Illustrator to produce scalable vector assets, ensuring that I preserved the character's original expression.

Visual Development & Shading :

I applied color and texture in Photoshop to add depth. My focus was on fine-tuning the facial micro-expressions—specifically the eyes and eyebrows—to capture genuine fear and vulnerability.

Skeletal Rigging :

I constructed the bone hierarchy to define the character's articulation points. By doing this, I transformed the static 2D asset into a flexible puppet, ensuring natural movement and fluid limb rotation during the animation phase.

Palestine : Campaign Motion Breakdown

Sequence 1 : Bridging Reality & Animation

Concept :

The narrative opens with a mundane moment of safety, a user scrolling at home, suddenly pierced by the jarring reality of a live war broadcast. This sharp contrast between the user's comfort and the father and son's flight for survival instantly hooks the viewer, turning passive scrolling

into active witnessing.

Technique :

To visualize the stark contrast between a safe home and the war zone, I composited the animated 'Gaza Live' stream onto a green-screened mobile. I used Runway to generate the somber night atmosphere, ensuring the mood served the emotional narrative.

Concept :

into active witnessing.

Technique :

Concept :

into active witnessing.

Technique :

Sequence 2 : The Separation

Concept :

The narrative transitions from the phone screen directly into the chaos of the war zone. We follow a father desperately guiding his son through

a landscape of destruction. The scene culminates in a heartbreaking climax: a sudden explosion separates them, symbolizing the arbitrary

and instant loss of protection that children face in conflict zones.

Technique :

To construct a cohesive war-torn environment, I generated stylized background assets using Leonardo AI, ensuring the aesthetic matched the hand-drawn characters. The running animation was composited via green screen in After Effects, where I layered smoke, debris, and camera shake VFX to simulate the visceral impact of the explosion.

Concept :

The narrative transitions from the phone screen directly into the chaos of the war zone. We follow a father desperately guiding his son through

a landscape of destruction. The scene culminates in a heartbreaking climax: a sudden explosion separates them, symbolizing the arbitrary

and instant loss of protection that children face in conflict zones.

Technique :

Concept :

The narrative transitions from the phone screen directly into the chaos of the war zone. We follow a father desperately guiding his son through

a landscape of destruction. The scene culminates in a heartbreaking climax: a sudden explosion separates them, symbolizing the arbitrary

and instant loss of protection that children face in conflict zones.

Technique :

Sequence 3 : The Collapse

Concept :

Disoriented by smoke and debris, the child finds himself isolated in the aftermath. The scene escalates the terror as a nearby structure

collapses, visualizing the overwhelming scale of destruction versus the fragility of a child alone in a war zone.

Technique :

Body mechanics were animated in Cartoon Animator and exported as high-fidelity assets. In After Effects, I focused on the facial

micro-expressions to convey panic. The collapsing wall and explosion effects were composited using particle layers to simulate the sudden shattering of the environment.

Concept :

Disoriented by smoke and debris, the child finds himself isolated in the aftermath. The scene escalates the terror as a nearby structure

collapses, visualizing the overwhelming scale of destruction versus the fragility of a child alone in a war zone.

Technique :

Body mechanics were animated in Cartoon Animator and exported as high-fidelity assets. In After Effects, I focused on the facial

micro-expressions to convey panic. The collapsing wall and explosion effects were composited using particle layers to simulate the sudden shattering of the environment.

Concept :

Disoriented by smoke and debris, the child finds himself isolated in the aftermath. The scene escalates the terror as a nearby structure

collapses, visualizing the overwhelming scale of destruction versus the fragility of a child alone in a war zone.

Technique :

Body mechanics were animated in Cartoon Animator and exported as high-fidelity assets. In After Effects, I focused on the facial

micro-expressions to convey panic. The collapsing wall and explosion effects were composited using particle layers to simulate the sudden shattering of the environment.

Sequence 4 : The Sacrifice

Concept :

The narrative reaches its tragic peak. In a split-second instinct, the father rushes to shield his son from the collapsing debris.

This act represents the ultimate loss of protection, the parent is gone, leaving the child physically and emotionally isolated in the chaos.

Technique :

To convey the urgency of this moment, I manipulated the animation timing curves to create a sudden burst of speed for the father's entry.

I emphasized the physical impact of the 'push' by adding camera shake and utilizing a sharp cut to black, simulating the child's perspective

of shock and blackout.

Concept :

The narrative reaches its tragic peak. In a split-second instinct, the father rushes to shield his son from the collapsing debris.

This act represents the ultimate loss of protection, the parent is gone, leaving the child physically and emotionally isolated in the chaos.

Technique :

To convey the urgency of this moment, I manipulated the animation timing curves to create a sudden burst of speed for the father's entry.

I emphasized the physical impact of the 'push' by adding camera shake and utilizing a sharp cut to black, simulating the child's perspective

of shock and blackout.

Concept :

The narrative reaches its tragic peak. In a split-second instinct, the father rushes to shield his son from the collapsing debris.

This act represents the ultimate loss of protection, the parent is gone, leaving the child physically and emotionally isolated in the chaos.

Technique :

To convey the urgency of this moment, I manipulated the animation timing curves to create a sudden burst of speed for the father's entry.

I emphasized the physical impact of the 'push' by adding camera shake and utilizing a sharp cut to black, simulating the child's perspective

of shock and blackout.

Sequence 5 : The Intervention (Solution)

Concept :

The user attempts to scroll away from the tragedy, but the interface resists. This 'friction' transforms the passive act of scrolling into a deliberate choice. The child's expression shifts, and the 'SafeBack' interface emerges, offering an immediate pathway to turn empathy into tangible action through a seamless donation.

Technique :

To achieve a realistic device interaction given the tight timeframe, I utilized a practical green screen workflow. I filmed the hand gestures on a mobile displaying a solid green background. In post-production, I used Chroma Keying to remove the green, then applied planar tracking

(Mocha AE) to ensure the animated app interface insert followed the natural handheld shakes and perspective shifts precisely.

Concept :

Technique :

(Mocha AE) to ensure the animated app interface insert followed the natural handheld shakes and perspective shifts precisely.

Concept :

Technique :

(Mocha AE) to ensure the animated app interface insert followed the natural handheld shakes and perspective shifts precisely.

Sequence 6 : The Arrival of Hope

Concept :

The donation made in the app manifests in the narrative world. The heart-shaped balloon, bearing the colors of the Palestinian flag, descends slowly a metaphor for global solidarity reaching the isolated child. It symbolizes that while we cannot erase the tragedy, we can send tangible support and let them know they are not alone.

Technique :

I animated the balloon's descent using Bezier curves in After Effects to simulate a gentle, weightless float. To ground the object in the scene,

I applied subtle shadow casting as it neared the rubble. The child's transition from a huddled, despairing pose to standing was keyframed

in Cartoon Animator, focusing on body language that conveys curiosity and a spark of hope.

Concept :

Technique :

I animated the balloon's descent using Bezier curves in After Effects to simulate a gentle, weightless float. To ground the object in the scene,

I applied subtle shadow casting as it neared the rubble. The child's transition from a huddled, despairing pose to standing was keyframed

in Cartoon Animator, focusing on body language that conveys curiosity and a spark of hope.

Concept :

Technique :

I animated the balloon's descent using Bezier curves in After Effects to simulate a gentle, weightless float. To ground the object in the scene,

I applied subtle shadow casting as it neared the rubble. The child's transition from a huddled, despairing pose to standing was keyframed

in Cartoon Animator, focusing on body language that conveys curiosity and a spark of hope.

Sequence 7 : The Uplift

Concept :

The narrative concludes with a surreal moment of liberation. The balloon symbolizing accumulated support physically lifts the child above the destruction. This departure from realism emphasizes that while we cannot change the ground reality instantly, our support can provide a lifeline, elevating the victim above their immediate suffering.

Technique :

To create the sensation of rapid ascent, I utilized vertical parallax scrolling. I animated the background layers moving downwards at varying speeds relative to the camera. The child's suspension was animated using physics constraints on the rope bone structure, allowing his legs

to dangle and sway naturally with the momentum of the flight.

Concept :

Technique :

to dangle and sway naturally with the momentum of the flight.

Concept :

Technique :

to dangle and sway naturally with the momentum of the flight.

Sequence 8 : The Collective Impact

Concept :

The final visual metaphor: Individual actions coalesce into a movement. As more users engage with the app, the sky fills with balloons, lifting not just one child, but an entire generation above the destruction. The journey concludes with a panoramic view of Jerusalem, symbolizing the ultimate goal of the campaign: delivering safety, peace, and dignity to every child.

Technique :

To visualize scalability, I created a particle-like system by duplicating the child-and-balloon pre-composition in After Effects, offsetting their timing to create organic, non-uniform motion. The background features a multi-layered parallax scroll of the cityscape. Finally, I composited the motion typography and logo using Track Matte transitions to seamlessly dissolve from the narrative world back to the brand identity.

Concept :

Technique :

Concept :

Technique :

App Case Study

Brand Identity & Iconography :

The logo design process began by deconstructing the Palestinian

flag's geometry and merging it with the universal symbol

of empathy - the heart.

The Solution :

After exploring multiple iterations, the final mark evolves into a dual meaning: it depicts hands offering care that simultaneously form a heart shape. This core geometry was then expanded into a functional iconography system (Clothes, Blood, Money, Food) to ensure a cohesive visual language throughout the app.

Donation with Clothes

Donation with Blood

Donation with Money

Donation with Food

Kinetic Identity & Brand Behavior

I designed this kinetic identity to act as the bridge between the static brand and the user experience. Serving as the app's splash screen,

I visualized the core concept of 'Assembly' : where I animated the disparate geometric forms to seamlessly converge and construct the heart.

This movement symbolizes how individual donations unite to form protection. Technically, I utilized custom easing curves to give the motion

a distinct, organic weight, establishing a polished institutional tone before transitioning into the UNICEF partnership lockup.

Wireframing

From Sketch to Screen : User Flow Evolution

I initiated the UX phase with low-fidelity paper prototypes to rapidly test the donation flow and layout hierarchy without getting distracted by aesthetics. These sketches focused on solving the core user journey: minimizing friction between the emotional hook and the donation action. Once the structure was validated, I transitioned to high-fidelity designs in Figma, refining the UI with the established color palette and iconography to ensure clarity and accessibility.

Product Demo : The Complete Ecosystem

App Description :

"The 'SafeBack' app is designed to bridge the gap between donors and the on-ground reality in Palestine.

As demonstrated in the video, the user journey covers four core pillars :

Trusted Information : Direct news feed from UNICEF to combat misinformation.
Flexible Donation : Users can donate funds, goods (clothes / food), or blood, with options for monthly or one-time contributions.
Radical Transparency : The ability to track specific cases and view the profiles of UNICEF field workers ensures trust.
Community Action : Beyond donations, the app offers volunteering opportunities, turning users into active agents of change.

App Description :

"The 'SafeBack' app is designed to bridge the gap between donors and the on-ground reality in Palestine.

As demonstrated in the video, the user journey covers four core pillars :

Trusted Information : Direct news feed from UNICEF to combat misinformation.
Flexible Donation : Users can donate funds, goods (clothes / food), or blood, with options for monthly or one-time contributions.
Radical Transparency : The ability to track specific cases and view the profiles of UNICEF field workers ensures trust.
Community Action : Beyond donations, the app offers volunteering opportunities, turning users into active agents of change.

App Description :

"The 'SafeBack' app is designed to bridge the gap between donors and the on-ground reality in Palestine.

As demonstrated in the video, the user journey covers four core pillars :

Trusted Information : Direct news feed from UNICEF to combat misinformation.
Flexible Donation : Users can donate funds, goods (clothes / food), or blood, with options for monthly or one-time contributions.
Radical Transparency : The ability to track specific cases and view the profiles of UNICEF field workers ensures trust.
Community Action : Beyond donations, the app offers volunteering opportunities, turning users into active agents of change.

Technique :

To ensure high-fidelity animation, I recorded the interactive user flows directly from Figma's advanced prototyping mode. These captures were then imported into After Effects, where I applied masking techniques to isolate the device interface. This workflow allowed me to layer the live app interactions seamlessly over the dynamic background, perfectly synchronizing the UI events with the kinetic typography.

Technique :

Campaign Activation : Urban Intervention

Concept :

To bridge the digital and physical worlds, I designed an Out-of-Home (OOH) campaign focused on immediate visual impact. The poster series utilizes a 'Before & After' slider metaphor, inviting passersby to physically see their potential impact. The Arabic slogan 'You Can Make the Difference' is paired with a dynamic QR code, acting as an instant portal that transforms a moment of passive empathy on the street into active donation within the app.

Technique :

I created realistic street mockups using Adobe Photoshop. To ensure the posters felt integrated into the urban texture, I utilized perspective warping and displacement maps to match the paper grain and lighting of the environment. The social media carousel was designed with a continuous narrative flow, ensuring the storytelling remained cohesive across print and digital touchpoints.

Finally, thank you for your interest in this journey.

SafeBack is more than an app, it’s a visual intervention in the urban space to remind us of our shared humanity.