Ethan Spetnagel

About
Resume
Portfolio

Cardioscape
Splash Screen



CardioScape, a division of Microscape, is a group of software developers, game developers, and research scientists based out of the Michelson Center for Convergent Biosciences at the University of Southern California. They hired me to design and implement interactive splash screens for their application.

UX Design,
Software Development

Tools:
  • Unity
  • Blender
  • p5.js


Background


CardioScape digitizes heart specimens into 3D models, allowing medical professionals to explore and understand congenital heart defects through desktop and VR interfaces. My role was to design the first thing users encounter when launching their app—an engaging splash screen that functions smoothly across both platforms.

The design centers around a distinctive cubic 3D heart model which I prototyped in Blender before developing and integrating it into their Unity application. For web browsers, the heart was coded in p5.js. The VR version allows users to move around and examine the heart in immersive space. During initialization, the heart rotates, transitions from white to red, and pulses with a heartbeat animation.











Design Objectives


Create a visually engaging and interactive splash screen for CardioScape’s application.

 Enhance user engagement during application loading sequences.

 Ensure compatibility with both Unity game engine and web environments.

Support desktop platforms with mouse interaction and VR compatibility.

 Include a 3D animated heart with spatial interactivity.

 Align with CardioScape’s professional, collaborative, and high-tech aesthetic.

 Design for flexible loading durations ranging from 5 to 30 seconds.













Design  Process


Ideation


Identified and listed the most important requirements for the splash screen design.

 Drew quick sketches to visualize initial ideas

 
















Prototyping


Designed and animated my favorite 3D heart concept in Blender, incorporating the heartbeat motif and dynamic cube transformations.

Designed alternative designs  (included below)

















Integration


Imported the animations and models into p5.js and Unity to explore functionality across platforms.







































Iteration and Refinement


Recreated all the designs in Unity during the second iteration, leveraging C# scripting to enhance interactivity, spatial control, and platform-specific performance.


Alternate Concepts


Throughout the process of designing the splash screen, I explored several alternative designs that ultimately didn’t make the final cut. These concepts allowed me to experiment with different visual motifs, interactive features, and animations. While they weren’t selected for the final implementation, they played a crucial role in refining the overall design.


Exploding Heart (Blender)



Alternating Horizontally (Unity)


ASCII Heart (Unity)

ASCII Heart (Blender)





Next Project:
EcoScan Concept UI/UX


Skip Ahead:
Slug Soap
Slug Radio
Fox & Lion Bread Graphic Design
Casa Nidal
Artwork

Home

                            Next Project  →