full-stack designer
Staccs - a streaming platform for concerts
During a 4-month project I created a foundation for design, a brand concept and coded up the front-end (Svelte / Sapper) of the Staccs web client - a streaming service for concerts. The project was followed up with some further development when all the content started coming in, taking it all the way to a launchable product.
staccs.com →Legendary Concerts on a Digital Stage
Staccs embarked on a quest to bring a pristine concert experience directly into homes. While the platform showcased iconic concerts, it was its avant-garde technology that set it apart. As Declan pioneered a method to stream video at groundbreaking speeds, I took on the mantle of designing an interface befitting this innovation.
Fast forward to today, Staccs has evolved significantly. Yet, I invite you to revisit the version of Staccs I helped mold — a chapter now immortalized here.
Designing a Retro-Futuristic UI
At the start of this project, news of the Covid-19 virus was just emerging from China, and the world had yet to grasp its impact. Strangely enough I anticipated a renewed appreciation for the outdoors, remote work and a trend towards retro styles. My exact words back in January 2020 were: "Green wave is coming back! 70s groove, Nature, Facebook is dead - TikTok is winning, Local social events like bowling are back, the color brown, E.T…"
For Staccs to make some serious waves in music, we wanted it to feel like if Spotify and Marshall had a lovechild… My vision was a sleek, modern UI in the vein of platforms like Spotify, but infused with the dynamic energy and unparalleled sound quality that brands like Marshall evoke.
A Video Player Like No Other
The project called for a custom-built video player, tailored for Staccs. This player, enabling smooth transitions between concert tracks, came equipped with animated icons and key controls. It was seamlessly placed centre stage and the rest of the web app navigation receded during playback. Developed in Svelte, this player was a testament to the synthesis of design and innovation I brought to the table.
When Music Meets Light
A UI shouldn't eclipse the content, but for a fledgling product, branding is paramount. My goal was to craft a brand evoking the transformative power of light, a force rivaled only by music in its mood-altering prowess. Strobe lights, the warmth of fire, and the sharp brilliance of LEDs each elicit distinct emotions, and music mirrors these shifts.
This philosophy was woven into the UI, from the highlighted tops and subtle shadows on photo cards to a color palette capturing the dance of lightning against a night canvas.
The Light Mode Challenge
Staccs was designed with a dark mode-first approach during a time when toggling between modes was still novel. The challenge? Adapting an advanced color palette for light mode while maintaining the brand's essence as a light source. It wasn't just about switching to a white background; I crafted an entirely new palette to ensure the brand's glow shone just as brightly in light mode.
Crafting a Handmade Logo
To complement the platform's essence, I handcrafted a logo, drawing inspiration from the luminosity of neon lights. This design wasn't just a symbol; it embodied the nuances of an autograph or the whimsicality of a string, capturing the spirit of concert ambiance, fandom, and an adventurous musical journey. Even as I meticulously aligned each letter to a grid for precision, I intentionally retained subtle imperfections. This deliberate balance between precision and authenticity gave the logo its distinctive character—perfect in its imperfection.
Beyond the platform and logo design, I compiled a comprehensive digital brand manual for Staccs. This essential guide encapsulated the brand's essence, detailing everything from color palettes and physical applications to a rich graphics and icon library.