Trulli Audio
Overview
Trulli Audio is a company run by a passionate group of individuals looking to make it possible for music to be experienced as the artist intended it, anywhere and everywhere you want it. We worked closely with the Trulli team in order to launch their product suite of speakers and subwoofers and to build a compelling digital experience, optimized for the Trulli brand and unique marketing needs.
Stage 1: Wireframe Concepts
Below are a select few wireframe concepts that I took the lead on while working closely with a senior designer as well as the lead consultant to get designs approved for client demos. Each wireframe (Desktop + Mobile) was completed in 1 week and has gone through many rounds of iterations based on client feedback. I designed about 80% of the wireframes for Trulli.
Stage 2: Hi-Fi Design
Because our wireframes were as close as possible to being hi-fidelity and we componentized early on, transitioning into hi-fi designs were done in conjunction with designing the rest of the site's wireframes. Having followed best practices as well as consistently updating our design system, we were able to seamlessly deliver hi-fi designs to the client.
.webp)
Creating a Dashboard
Stage 3: Design System
The client provided us with their brand guidelines, but while we followed it as closely as possible, the branding guidelines were built for print and needed to be updated. When we moved into hi-fis, we began making recommendations on a digital-friendly color palette and an updated typekit that all falls within accessibility conventions.
Stage 4: End to End Development
After the hi-fis were finished and the design system was polished, we handed off designs to dev. Prior to official hand-off, every week during the design phase, we would review designs (whether in wireframes or hi-fis) with the dev lead to ensure that our designs can be developed. Post design-phase, I provided dev support for 2-4 weeks to answer any questions developers may have and collaborated closely with a motion designer to work out the micro-interactions throughout the site.
Conclusion
The success of this project was due to the collaborative effort between the consultancy and the client, as well as between the internal strategy, design and development teams. We were able to deliver a custom library of over 50 multipurpose components via AEM (Adobe Experience Manager) and pass on that authorship to the Trulli team as their business grows. This project has successfully delivered a modern digital rebrand of Trulli that matches their goals of introducing their cutting-edge audio technology to the world.