Cardioscape
Splash Screens

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.

ⓐ

ⓑ

click or drag

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 final designs center around a distinctive cubic 3D heart model which I prototyped in Blender before developing and integrating it into their Unity application. For web browsers, I also coded the heart animation 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:

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

Step 1: 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 the splash screen, I have a visual reference of what I’m trying to accomplish as I go forward.

Based on a vision call with the co-founders, I started with three sketches (ⓐ, ⓑ ,ⓒ), each reflecting different approaches to the splash screen’s design and interaction.

Step 2: Prototyping
Then, I prototyped the idea I like the most. In this case, it was the “Minecraft“ heart. I used Blender to create the 3D model and apply textures (ⓓ), then developed a simple heartbeat animation that mimicked human heartbeat.

To ensure the design performed well across both web and Unity (the platform where their app is developed), I recreated the animation in p5.js (ⓔ). This allowed me to verify that the visuals and interactions remained smooth and engaging across different environments.

After I finished the first concept, I also modeled the other two (ⓕ, ⓖ) in Blender so I had multiple functional prototypes to show the team in our next meeting for comparison. I also ensured I could move the heart design from Blender into Unity (ⓗ ) seemlessly.

Step 3: Iterations
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. For this second iteration, I decided to add the animation to my with C# scripting directly in Unity instead of Blender, which allowed me to create more complex and smooth animations (ⓘ, ⓙ, ⓚ).

Step 4: Implementation
Lastly, I worked with Cardioscape’s software development team to integrate our favorite animations into the application. This required me learn how their application was structured and adapt the code to ensure my designs work well with their code. (ⓛ)

Note
This project was both a challenging and rewarding experience—I had a lot of fun, learned a ton, and really enjoyed working with the Cardioscape team throughout the entire design and development process.

See my design in action, download the Cardioscape app.