Skullcandy Partners with Ravn to Build a Headset Companion App

A Case Study: Skullcandy Gaming Companion App

The purpose: To Develop a PC desktop application to configure and interact with a new line of Skullcandy gaming headsets

The Challenge: Working with various unique hardware, firmware, and low level software libraries

The Solution: A solid team, Electron, Node Addon API, C++, and ReactJS

Outcome: A polished and news worthy desktop application: Skull-HQ software, quality code, and reliable automated updates

See it in the media here and here.

Who is Skullcandy?

Skullcandy Inc. is an American company based in Park City, Utah, that markets headphones, earphones, hands-free devices, and other products.

Skullcandy’s products are primarily targeted to the outdoor action sports demographic (snowboarders, skateboarders, etc.) and general consumer market, but they have expanded in recent years into the premium audio market with products such as the Crusher headphones.

Most recently they embarked on a mission to enter back into the gaming space with their SLYR, SLYR PRO and PLYR gaming headsets. It was at this point they reached out to Ravn for help.

Our partners at Ravn have been more than a pleasure to work with. They are competent, reliable, and have continually exceeded our expectations!

Jenny Buchar, Applications Product Manager @ Skullcandy

Challenge

Skullcandy wanted a companion desktop application to release alongside their new line of gaming headsets. As a mostly hardware company, and with a fast approaching deadline, Skullcandy needed a strong team of developers to be able to jump in and seamlessly integrate into their design and hardware teams.

The hardware and firmware were already deep into production cycles so we had to work within the constraints of what was already defined and ready for release.

They needed the app to run on Windows and it was important for them to build something that could be extended to MacOS in the future.

The requirements involved integrating code from a third party vendor to adjust settings on the devices and perform hearing tests as part of a feature which allows users to tune their devices to improve sound custom to their ears. We needed to be able to utilize this code, written in C++, in whatever technology we chose to go with.

Skullcandy was shooting for a modern retro style app aesthetic with challenging design elements.

Solution

Ravn decided that the best way to provide multi-platform support with potentially shared code was to use Electron. Electron allows you to build cross platform desktop applications with web technologies including HTML, CSS, and Javascript. We found Electron to be the perfect platform for this project.

Because there were so many unknowns associated with using the C++ headset communication library in javascript, we prioritized that work first.

Two teams were arranged to make the best use of a limited time frame. One team would focus on the Electron app and frontend while the other focused on consuming and integrating the C++ SDKs into the javascript side.

Electron apps exist in a NodeJS environment -- a Javascript engine built on Chrome’s V8 engine, which is written in C and C++. NodeJS offers its Node Addon Api, a C++ wrapper/bridge for developers to use C++ code in Javascript. For the headset communication and hearing test SDKs we used the Node Addon Api with an event-listener style architecture to send and receive events from the headsets. These were set up as private Github packages so we could version our changes for the client applications. We set up automated builds with versioning and release capabilities to ensure making changes to the package would be quick, smooth, and painless.

The headset didn’t support listening for changes in device values so we set up a polling system to reflect changes in the headset initiated by the build in headset buttons or from the mobile app.

The headsets have a wheel on them that the user can use to adjust system volume and we wanted to be able to reflect this value in the UI as the user adjusts it. Existing NPM packages for system volume either didn’t support listening for changes or utilized methods that hogged valuable system resources. We built a performant custom volume listener package using OS specific C++ APIs and the Node Addon Api and tied it into our existing automation flow for C++ packages.

We worked alongside the hardware and firmware teams to report bugs, pivot to support under-development features, and make recommendations for additional and necessary changes for the desktop application.

UI elements were carefully crafted and organized to be maintainable, extendable, and reusable.

The Ravn team built a hands off process for releasing and updating the app for the end user that was easy to follow and stay on top of from the Skullcandy side. We wanted to put an emphasis on creating a process that could live on long after we were gone. We implemented a similar process for the firmware updates that were necessary for the headsets to be able to receive updates.

Ravn - A team of strong, reliable, and high performing developers. They solved some pretty challenging issues and did so with grit and grace. It’s been a pleasure working together and I hope to continue a long term partnership with them.

Ian Sime, Solutions Architect @ Skullcandy

Outcome

After teaming with Ravn, Skullcandy successfully pushed the new gaming product line with the companion app, Skull-HQ software.

The companion desktop application was called out in media reviews as being a polished and delightful experience that set their gaming line apart from competitors.

The close and effective recommendations and collaboration of the Ravn team with the hardware and firmware teams resulted in a delightful headset and application experience for the end user.

The project is left in a state where onboarding a new developer is easy and development is smooth and enjoyable.

App and firmware updates are stable and stress free for both Skullcandy and the end user.