top of page
Frame 1.png
Trulli Audio Mobile.png

Trulli Audio

Shipping a marketing site for an audio company aiming to help users experience music as the artist intended
 
Project Date: Jan 2021 - May 2021
Client: Trulli Audio
My Role: Research, inspiration gathering, sketching, wireframes, hi-fis
Team: Strategy Consultants, Developers, Project Manager

Overview

Project Background

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.

Platforms

Web (Responsive)

Mobile

Deliverables

Responsive Design that is mobile-first, AEM (Adobe Experience Manager) implementation, end-to-end development

Wireframe Concepts

Wireframes
Wireframes

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.

Trulli Wireframes 2.png
Trulli Wireframes 1.png

Hi-Fis

Hi-Fis
Hi-Fis

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.

Trulli Hifis 1 (1).png
Trulli Hifis 2.png
Design System

Design System

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. 

Final Product
Trulli Design System.png

Final Product

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.

screencapture-trulliaudio-2021-10-01-17_07_25.png
screencapture-trulliaudio-2021-10-01-17_08_10.png

Next Steps

Next Steps
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.

Future Considerations

If we had more time and resources, a few things I would love to explore:

  • Monitor the growth and impact this site redesign has had on trulliaudio.com

  • Interview Trulli's target audience to gather research prior to the design phase

  • Conduct user testing of our designs to iterate and improve the product

bottom of page