Algorithmic identity for a sound designer’s portfolio
Angus Gruzman, Jack Freeman, and Griffin James form the Sound Advice & Advanced Transmissions Union — SAATU. Sound design always lives inside someone else's visuals. Yet through thoughtful design by Systems Studio and precise digital execution by Upclose, SAATU’s new online portfolio carves out a strong, unmistakable brand presence of its own.
- We partnered on
- Frontend + backend development
- Design
- Systems Studio
- Year
- 2022









We are Sonic-consultants, Music-manipulators, Audio-Enthusiasts and Artists with ears to bend. We take an energetic and unique approach to our work and won’t settle for the ordinary when the extraordinary is always at arms reach.
We Give Sound Advice.
Angus describes himself as “somewhere between an enthusiastic experimentalist and a music maniac” and he certainly has a diverse approach to sound - honed after decades of experience running record labels, touring, producing events, playlisting, on-set recording and composing original scores.
As a DJ at nightclubs, festivals and fashion house shows - has amassed a remarkably broad knowledge of music and a record collection with its own postcode. Through his record label Multi-Culti he has provided clients such as Cartier, Dior and Louis Vuitton with work and has composed original music for nature documentaries, runway shows, mindfulness retreats & art installations.

Barcodes: turning data into identity
At the core of SAATU’s visual language is a dynamic system of barcodes — a digital-first identity element unique to each project. Each <Barcode/>
component is automatically generated on the frontend according to a set of design rules. The backend assigns a unique project ID; an algorithm transforms this ID into an eight-digit number. Each digit is mapped to a specific graphic pattern, and these patterns are assembled within a 4×2 grid, creating a barcode that is both systematic and distinct.
This approach seamlessly blends branding with code: a visual marker that is purely generative, yet always consistent with the creative vision.

A branding tool for designers
To extend the barcode system beyond the website, we developed an internal tool for Systems Studio and SAATU.
The tool allows users to select a project from the portfolio and generate custom visuals based on its barcode. They can modify the size of the patterns, adjust color palettes, and overlay barcode grids onto background images — easily creating promotional assets and social media posts. The tool ensures that SAATU’s brand remains flexible without ever diluting its coherence.

Augmented playback: integrating audio waveforms into video
In SAATU’s world, sound isn’t just a background element — it’s the lead character. To highlight this, we developed a custom video player using waveform.js
to bring the audio to life visually, layering the sound’s volume waveform directly onto the video interface. Because generating a waveform from a video file is resource-intensive, we designed the process to run asynchronously and cache the results server-side — ensuring a smooth, seamless user experience.
LESSONS IN GOOD TASTE
ROLE
COMPOSITION
CLIENT
CAMPAIGN
ARCHIVE NUMBER
37737728
YEAR
2023

Structured content management with Hygraph
We chose Hygraph as the headless CMS for SAATU’s portfolio. Its user-friendly interface gives the SAATU team full control over projects and content, while the structured frontend application ensures every page stays true to Systems Studio’s original design vision.
Hygraph also provided the ideal setup for hosting and delivering MP3 files — a crucial element in making SAATU’s sound-driven work feel immediate, reliable, and deeply connected to their brand identity.


Identity and website design by Systems Studio.
Frontend: Nuxt 3, Wavesurfer.js
CMS: Hygraph