GuitarApp

GuitarApp is a free guitar learning app that includes a tuner, metronome, chord finder, and over 200,000 free guitar lessons curated and updated daily. Think of it as a distraction-free YouTube browser for guitar lessons combined with all the tools you need to practice and learn. For educators, we make all of our web tools free to embed on any website or LMS course with a simple iframe code snippet. As one of four co-founders of GuitarApp, I was responsible for all of the UX/UI design, copy, branding, and a large portion of the frontend code. I was also solely responsible for building our web metronome and tuner which are now used by over 50 schools and websites to teach guitar and other instruments to over 2 million visitors a year. I designed it to be dark mode by default which is a common design theme in the music app space, but I also designed a light mode for the embedded tools to fit into a wider range of website designs. The content browsing experience was designed to be familiar to YouTube users but with added loop and slow down tools on each video. The tuner and metronome were designed to be simple and intuitive to use for beginners but powerful enough for professionals. The design process started with pencil and paper, then Sketch for high-fidelity designs, Zeplin for handoff, and VS Code for the final product. Once the product was live, I would often design and iterate directly in code. I use GitLab for version control and CI/CD.

UX/UI | 100% JS,HTML,CSS | 40% Copywriting | 100% Product | 100%

Metronome

This is the metronome I designed and built for GuitarApp. It's a fully functional web metronome that can be embedded on any website with a simple iframe code snippet. It's actually embedded here if you want to try it out! Hit the play button, then change the tempo, time signature and accent pattern to see what happens. When designing this tool, I had to consider the needs of both beginners and professionals but the added layer of complexity was that I wanted to make it embeddable on other websites too. This means it had to be responsive, lightweight and seamlessly fit into a wide range of existing website designs if it was going to be adopted by other online educators. This metronome is now used in over 50 schools and websites to teach guitar to over 2 million visitors a year! Pickup Music and Blackstar Amps are just a few of the companies that use it. I used javascript extensively in this app to create the audio engine and the UI animations. I also released it as a Chrome Extension. I designed the UI in VS Code as I built.

UX/UI | 100% JS,HTML,CSS | 100% Copywriting | 100%

Tuner

Here's the tuner I designed and built for GuitarApp. It's a fully functional web tuner that can be embedded on any website with a simple iframe code snippet. It's also available as a Chrome Extension. The design considerations for this tool were similar to the metronome but the added complexity was that I had to design the audio processing and UI animations required to tune a guitar in real-time. To use this tool, tap the mic button to start and you will be prompted to allow access to your microphone. Once you allow access, the UI will start responding to the pitch of your guitar strings (or voice) in real-time. You can also tap on the note names to hear the pitch you are tuning to. I designed the UI in VS Code as I built.

UX/UI | 100% JS,HTML,CSS | 100% Copywriting | 100%

HawkMode

HawkMode is a Chrome Extension that I built to scratch my own itch but I've decided to release it later this year too. It's a simple productivity tool that displays all publicly visible email addresses and social media profiles on any webpage. You can then copy one or all of the contact details to your clipboard with a single click or save them within the extension for later. Once saved, you can tag, filter and export them in CSV or JSON format. I originally designed it to help me quickly build up prospect lists for my own projects but I've found it useful for many other things too. I now use it as a supercharged bookmarking tool for saving and tagging interesting people and websites I come across online. I designed the custom UI in VS Code as I built and used Sketch for the icons and branding.

UX/UI | 100% JS,HTML,CSS | 100% Copywriting | 100%

Fender / Riffstation

Riffstation was a popular music education app that I co-founded in 2011. It started life as a desktop app that would analyse the audio, detect the chords, isolate the guitar and slow down any song in your mp3 collection, but later evolved into a web and mobile app with YouTube support. I was the sole UX/UI designer on the project and handled all of our frontend web coding for V1 until Fender acquired us in 2015. At that point, I became the product manager and was responsible for managing the design and development team for web, mobile and desktop apps. I was lucky enough to have a great designer on the new team and we worked from Fender's new design system to migrate from my original skeuomorphic design to a more modern flat design (V2).

Product Manager | 100% V1  UX/UI | 100% V2  UX | 50% V1  JS,HTML,CSS | 100% C++ Audio DSP | 50% Copywriting | 100%

Andante

Andante is a new music therapy app that I'm currently working on. Research has shown that walking can delay the onset of cognitive decline and that gait analysis can be used as an early predictor of various conditions. Andante uses the phone sensors to measure the user's walking speed and creates a music playlist at a tempo that matches their pace. The app tracks and analyses the user's walking speed and gait over time and uses this data to create a personalised music therapy program while also providing feedback on their progress. The data is also shared with the user's healthcare provider to help them monitor their patient's progress. I started with wireframes provided by the founder, explored the design language of healthcare apps, and then I designed the app in Sketch. I used Zeplin for handoff to the iOS developers.

UI | 100% UX | 50% Copywriting | 50%

Get in touch