Work

About

Play

Resume

Overview

What if a fictional supervillain's gadget could help save our planet? I redesigned Gru's iconic Freeze Ray from Despicable Me, transforming it from a comedic prop into a conceptual climate change solution with intuitive, user-centered interfaces.

Team

Personal conceptual design project

Role

Solo UX/UI Designer | UX Researcher

Duration

Jan 2024 - Apr 2024

Tools

Figma | Adobe After Effects

Key Impact Preview

Developed comprehensive user research methodology for fictional character analysis

Created three prototype iterations with 100% improvement in icon clarity

Produced animated narrative demonstrating real-world climate applications

Bridged entertainment design with environmental problem-solving

How might we reimagine fictional technology to address real-world problems while maintaining the essence of what makes it compelling?

Gru's Freeze Ray lacks thoughtful interface design and practical application beyond comedy. Climate change requires innovative thinking even if inspired by fiction. This project explores how imaginative technology can inspire practical solutions through user-centered design principles.

Empathize

I conducted thorough user analysis focusing on Gru as the main operator. Gathered key facts about Gru, including his demographics, background, and motivations. Explored Gru's interactions with the Freeze Ray, identifying his capabilities and proficiency with technology.

Empathy Map

I focused on two main tasks - using the Freeze Ray for mischief and defending against threats. I captured what Gru thinks, feels, and does in each scenario, which helped me understand his experiences better. Peer feedback added new insights and reinforced the importance of empathy in design.

Task 1 - Manipulating the Freeze Ray for Mischief and Humor

Task 2 - Defending Against Threats

Extordinarie Card

I crafted a visual representation of Gru's adventures, showcasing his multifaceted character and experiences with the Freeze Ray. The card depicted various scenes highlighting moments of triumph, danger, humor, and sentimentality, like Gru freezing Vector's head and returning home with cotton candy on his face alongside his daughters.

Define

Hierarchical Task Analysis

I performed detailed task analysis outlining the steps Gru takes when operating the Freeze Ray, while environmental analysis considered the contexts in which he uses it. I broke down two primary tasks - manipulating the Freeze Ray for mischief and humor, and defending against threats. This helped me get into Gru's head and understand his experiences in different scenarios.

Task 1 - Manipulating the Freeze Ray for Mischief and Humor

Task 2 - Defending Against Threats

Hierarchical Task Analysis

Task 1 - Manipulating the Freeze Ray for Mischief and Humor

Task 2 - Defending Against Threats

Ideate

Screen Form Factor Selection: Exploring, Brainstorming, and Finalizing Screen Placement

I explored different brainstorming methods including rolestorming, group brainstorming, and individual brainstorming. Rolestorming got creative thinking flowing, while group brainstorming helped gather diverse ideas. In the end, I decided on a medium-sized screen positioned on top of the device, facing the user, offering the best visibility, accessibility, and comfort.

Prototype

Low Fidelity Paper Prototype

I created wireframes using paper, pens, and sticky notes to sketch out the basic layout and user flow. To model the Freeze Ray, I used paper, pens, and household items to create a tangible representation, focusing on key components like the trigger mechanism, energy source, and freezing beam. Low Fidelity Paper Prototype

Medium Fidelity Prototype

Using Figma, I created a design focused on user flow and functionality. After getting feedback, I refined the prototype to fix issues like unclear icons and layout inconsistencies. This evaluation helped me see how effective the design was at guiding users and making everything clear. Medium Fidelity Prototype

High Fidelity Prototype

I developed the final prototype building on learnings from the medium-fidelity version, adding advanced visual elements and interactive features for a more realistic user experience. Fortunately, no major changes were needed since the medium fidelity was solid - just minor tweaks to transitions and color system. High Fidelity Prototype

Test

I conducted systematic peer evaluation sessions with feedback documented in "UI Design Tools Prototype Evaluation" report. Incorporated learnings into second versions of both wireframe types, refining designs to address identified issues.

The key improvements included a complete enhancement in icon clarity, progressing from medium to high fidelity, which eliminated any confusion during the final testing phase. User satisfaction increased notably due to a more consistent visual design language, and task completion times were reduced as a result of streamlined navigation.

Solution

The interface features intuitive targeting system with visual feedback, power management controls with safety protocols, mode switching between "mischief" and "defense" operations, and environmental impact indicators for climate application.

Story Design & Visualization

I developed a compelling narrative arc spanning the device's journey, creating relatable characters and establishing a consistent visual language. By mapping out the user's journey, I ensured the story aligned with their expectations and needs.

Storyboarding

I created storyboards depicting key scenes and interactions to identify potential pacing issues and areas for improvement. I began with rough sketches and refined them through multiple iterations, incorporating feedback while maintaining consistent visual style.

Interactive Design and Animation

Using Adobe After Effects, I created dynamic animations that brought the freeze ray narrative to life, blending visuals and storytelling for an engaging experience. Illustrator and Photoshop helped design and enhance visual elements. Through feedback and refinement, I improved pacing and clarity.

Reflection

Throughout production, I gathered and integrated feedback at each stage to refine the narrative, visuals, and engagement. This iterative approach ensured the final result resonated with viewers, highlighting key aspects of the freeze ray's role and impact. I developed the prototype from initial drafts to a polished cinematic experience, using Adobe After Effects to add detailed animations and effects. Each iteration enhanced visual depth and storytelling, aligning with a more immersive, animated-movie feel. This project deepened my skills in storytelling, visual design, and iterative feedback. Working across Adobe After Effects, Illustrator, and Photoshop taught me to combine tools effectively to create engaging content. Each phase reinforced the importance of flexibility and collaboration in the creative process.