Overview

I designed a prototype app for a client that promotes financial responsibility through an engaging and social experience. The app includes:

• A journey map to visualize financial progress

• Short, reel-like videos for quick and engaging content

• A blog section for financial education and discussions

Tools Used

• ProtoPie for prototyping and interactive design

• Blender for creating 3D assets

Challenges & Solutions

1. Creating an Interactive 3D Journey Map

Challenge: ProtoPie does not natively support 3D functionality, making it difficult to integrate an interactive journey map.

Solution:

• Designed and rendered a 3D journey map in Blender, animating a camera movement from 0% to 100% of the journey.

• Exported the animation as a video.

• Implemented a hidden slider in ProtoPie, syncing the video’s playback to the user’s scroll behavior, making it feel as though they were moving through the 3D map interactively.

This creative solution successfully simulated a smooth, interactive 3D journey experience using a 2D prototyping tool.

2. Building a Seamless Prototype That Feels Like a Real App

Challenge: Ensuring that the prototype felt as smooth and polished as a real application, without noticeable delays or choppy interactions.

Solution:

• Optimized animations and interactions by carefully timing transitions and reducing unnecessary motion.

• Used conditional logic and dynamic inputs in ProtoPie to create a realistic user flow.

• Applied gesture-based interactions, such as swipes and taps, to make the experience intuitive and fluid.

3. Simulating Different Scenarios (Notifications, Achievements, etc.)

Challenge: ProtoPie does not have built-in support for live push notifications or event-driven triggers.

Solution:

• Used timed triggers and conditional responses to simulate notifications and pop-ups appearing naturally during the user journey.

• Created custom animations for achievement unlocks, ensuring they felt rewarding and engaging.

• Implemented variable-driven interactions, where user actions influenced different outcomes, enhancing realism and interactivity.

Conclusion

This project challenged me to think creatively and push the boundaries of ProtoPie’s capabilities. By combining 3D elements with interactive prototyping techniques, I was able to deliver a highly engaging and realistic app experience. The solutions implemented not only enhanced the user journey but also demonstrated how innovative design approaches can bridge the gap between prototyping limitations and real-world applications. Through this case study, I honed my skills in interaction design, motion design, and problem-solving, reinforcing my ability to create immersive digital experiences.