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.


    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

    My Design Process
    ⚠️ UNDER CONSTRUCTION ⚠️



    Ideation
    I like to start out with pen and paper when I am creating concepts for a new design. By Identifying and and listing out the most important requirements for this splash screen, I have a visual reference of what I’m trying to accomplish as I go forward.

    Typically, I draw quick thumbnail sketches of the key components to help me visualize initial ideas.



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

    Then, I created the alternative designs (included below).




    Integration
    After that, I imported the animations and models into p5.js and Unity to explore functionality across platforms.


    Iteration and Refinement After the first iteration, I revised the design based on feedback from my team. I used Unity and leveraged C# scripting to enhance interactivity, spatial control, and platform performance.

    Creating the second iteration in Unity allowed me to seamlessly integrate the design into the application during the loading sequence.


    ⚠️ UNDER CONSTRUCTION ⚠️



    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)


    ASCII Heart (Blender)

    Alternating Horizontally (Unity)


    ASCII Heart (Unity)

    Next Project:
    EcoScan Concept UI/UX

    Skip Ahead:
    Lucinda Rose Gold Tattoo Visualizer
    Slug Soap
    Slug Radio
    SF Weather Tracker
    Fox & Lion Bread
    Casa Nidal
    Artwork




    Home
    Next Project