Strange Tapes Recording
Full-service design and build for a recording studio site: vector logo from client assets, proprietary Photoshop treatment for a punk and grunge look, UX research, illustrations, and low- and high-fidelity Figma prototypes, shipped to production on Vercel with a custom Node contact form.
I received a logo and original photographs from the client and owned the project end to end. I converted the logo to vector and applied proprietary Photoshop treatment techniques to achieve a punk and grunge aesthetic.
I handled customer intake and defined requirements through thorough conversations, did UX research, and created illustrations and images from scratch. I then built low-fidelity and high-fidelity prototypes in Figma, collaborating with the client via text, phone calls, and Figma comments. The work was shipped to production on Vercel with a custom Node emailer form — all done by hand before AI tools became mainstream.
Matt Ibarra, the client, has over 13 years of experience across the music industry: PR and communications for labels and artists, live sound, mixing, and mastering for clients including Sony, Atlantic Records, and Invisible Records. He was assistant engineer for award-winning producer Martin Atkins (Ministry, Public Image LTD., Skinny Puppy) at Mattress Factory Studios in Chicago for five years and at Golden Track Studios in San Diego for six. He has owned and operated STR Mastering for 13 years and is label boss at H2L in San Diego, where he records, masters, and releases experimental music under the moniker MattxIbarra.
Figma UI prototypes
I designed the full set of UI screens in Figma — from discovery and information architecture through to high-fidelity mockups. This screenshot shows the full scope of prototypes: navigation, services and rates, contact, and supporting pages, all structured so Matt could review flows and give feedback in one place.
High-fidelity review and comments
A closer look at the high-fidelity screens. Matt left feedback directly in Figma; comments are collapsed here so only the name-initial buttons are visible, but the thread of suggestions and approvals ran throughout the file. This back-and-forth kept the design aligned with his vision while I handled layout, hierarchy, and production details.
Assets and custom image treatments
I created and documented custom image treatments (e.g. grunge, texture, contrast) and applied them to assets. Each treatment was listed and paired with examples so Matt could approve or comment. This made the visual direction explicit and gave us a clear record of what was signed off before moving into build.
Client collaboration and feedback
These screens capture the extent of collaboration in Figma: different sections of the file, comment threads, and revisions. I handled direct customer feedback, managed expectations, and iterated in the same document so Matt could see changes as they happened. The process stayed transparent and collaborative from first wireframes to final UI.
