Circuits

Circuits is an innovative musical puzzle game developed by my talented friends at Digital Tentacle and built on the Unity engine. After its initial launch, I joined as Lead UI/UX Designer to develop Circuits Composer — an intuitive and streamlined digital audio workstation (DAW) / song composer.

It empowers players to create original songs using a curated library of samples and loops. Additionally, users can save and share their compositions along with their own loops through the Steam Workshop, allowing others to incorporate these loops in their own creations, nurturing a vibrant community of music creators.

Years later, we initiated pre-production for Circuits 2, aiming to further blur the boundaries between video gaming and a digital audio tool.

Jump to Circuits 2 content.

Key responsibilities

Art Direction: Established and led the art direction from the ground up, ensuring a cohesive visual identity for the project.
User Experience Design: Crafted the entire UX framework, developing comprehensive user flows following universal design principles.
Cross-Disciplinary Collaboration: Worked closely with audio and engineering leaders to ensure the tool was not only enjoyable to use but also aligned with audience expectations and implementation feasibility.
Wireframing: Created wireframes to facilitate rapid alignment with the team on essential features during the pre-production phase.
Motion Mockups: Developed motion mockups in Adobe After Effects, ensuring a smooth handoff to the implementation engineer (a necessity before the advent of Figma!).
Asset Workflow Setup: Established a streamlined workflow in Adobe Illustrator utilizing a strict layer naming strategy for optimized export of final assets, ready for direct import into Unity.
UI Tweaking: Fine-tuned the final appearance of the user interface directly within Unity, ensuring a polished and user-friendly experience.

Process examples

The creation process for Circuits Composer was pretty straightforward, since the vision behind it was very clear. Here are some examples from that process.

» ...to a polished motion mockup created in After Effects for the handoff to the engineering team.

» Evolution of the UI design.

» Meticulously named components helped assets stay organized for the implementation.

» Circuits composer is so simple to use that a single screen tutorial is enough to explain how it works.

Circuits 2

The team at Digital Tentacle confided in me again to lead the UI/UX in Circuits 2, the awaited followup to the original game. Currently, we've only completed the pre-production phase due to the team members' other commitments.

This time, the game seamlessly integrates and expands the unique features of Circuits Composer into the gameplay experience. Levels will embrace a more open design, moving away from rigid "win" conditions to invite creativity and exploration. By enhancing customization while keeping the user-friendliness, we aim to empower players to express themselves more fully through music creation.

Key responsibilities for the pre-production phase

Art Direction: Established and led the art direction from the ground up, ensuring a cohesive visual identity for the project.
User Experience Design: Crafted the early UX approach following universal design principles and exploring ways to make sure the game is approachable to both beginner and advanced players.
Cross-Disciplinary Collaboration: Worked closely with audio and engineering leaders to ensure the tool features are aligned with audience expectations and implementation feasibility.
Mockups: Created mid-fidelity mockups to facilitate rapid alignment with the team on essential features and art style.

Process examples

The pre-production phase for Circuits 2 was constrained by time and budget, so it consisted in directly creating mid-fidelity mockups to propose the art direction, evaluate technical feasability and start exploring user workflows. Consequently, I didn't focus on creating low-fidelity wireframes.

Circuits 2 timeline — » Circuits 2 focuses on musical self-expression, enabling you to easily customize the sound of your samples using intuitive radial menus. The process is flexible yet straightforward, making it simple to explore your creativity.

Circuits 2 drum editor — » Circuits 2 is way more than a game, resembling a simplified DAW at times. Here's the drum pattern editor, which shares the same radial UIs as in the main gameplay.

Circuits 2 annotated drum editor — » I provided the team with annotated mockups explaining functionality.

Circuits 2 melody editor — » Another look at the more DAW-like features of Circuits 2. Here's a melody editor in a simplified view...