New app incorporates intuitive design for touchscreen-friendly music synthesizer in father-son side project
03/03/15

Case Study by Don Niven RGD Emeritus 

 

The design and creation of synth-Q, a music app now being sold on the iTunes App Store was initiated almost three years ago by my son Christopher, a Music Technology graduate from McGill University. A synthesizer transforms signals to create and manipulate sound. Chris had released his first music related app called 76 Synthesizer in 2011, with graphic designer Jonas Eriksson. 

 

Eriksson, a designer from Sweden, posted a request for a developer to bring his design concept to life in the form of a working app. Although Chris was working in Montreal at the time, he offered his services and over the next several months the app took shape. At the time ultra skeuomorphic app interfaces were all the rage. This first app received a lot of attention for the hyper realism of the interface, the rich quality of the sound, and both designers' attention to detail. 

 

After the successful launch of 76, Chris and Jonas considered working on a sequel, but their ongoing commitments prevented this from happening. At this point, Chris approached me about collaborating with him on his next project. He wanted to create a synthesizer that had all the features he was looking for as a musician, and that would, in turn, appeal to other like-minded musicians. We started with a clean sheet of paper and a desire to move beyond the boundaries of 76. High realism would not guide our decision making — we did not want to imitate a pre-existing device or machine — and we wanted the new app to have more depth and range than 76 in terms of its sonic capabilities.

 

The iPad's touchscreen informed how we approached the design of the user interface. The touchscreen relies on user input in the form of single or multi finger taps and swipes. These operations determined the sizing and arrangement of slider switches and buttons in relation to the virtual multi-octave keyboard. Ease of use, sound quality and intuitive design were among our top priorities. Additional accessibility features, such as visual zooming, are built into the iPad user interface. 

 

In terms of other add-ons, external midi input devices, consisting mostly of physical keyboards, can be connected to the iPad and used with the app. 

 

As this was very much a passion project, there were no budgetary considerations or set timeline. We agreed to work on the app as we were able. We assumed that having already created a music app on the iTunes store, the experience with 76 would help guide us through the major hurdles. So really, how hard could it be?

 

Process

The project started with pencil sketches of what Chris envisioned for the app. We knew early on that it was going to have a keyboard and multiple options for shaping sound as that's what synthesizers do.

 

The prototyping process soon shifted to computer wireframe sketches where we tackled the spatial issue of allotting half the screen real estate to the keyboard. Above the keyboard, we envisioned function access buttons and operational modules. The option of creating and saving presets became an important feature once the project progressed.

 

For projects where spatial organization and layout are a main concern, the first step is to divide the retina screen pixel dimensions into a flexible grid. In this case, this helped to determine the size of the operational buttons and the keyboard. Measuring the keys on the home piano seemed like a logical place to start. All dimensions and measurements had to be divisible by two to allow for lower resolution iPad models.

 

During the design process, we also came up with the idea of incorporating a multi-octave keyboard, which ended up being one of those breakthrough design features that excites both reviewers and users.

 

 

The final and most challenging issue involved the operational modules needed to control the function of the synthesizer. Each module interacts with the others in complex ways that only an audio engineer or "synth-head" would understand — someone like my son. In the design of other synthesizers, users criticize the undersized dials which create problems when combined with the limitations of a touchscreen. As a user and developer, Chris wanted synth-Q to have easily accessible and consistent controls. To address this issue, the app uses vertical sliders instead of dials and incorporates generously-sized button style operators throughout.

 

 

Ease of use and concise design were the prime considerations for all of our layout and design decisions. A variety of typefaces were explored before deciding on the Trade Gothic Condensed family for its space saving and legibility advantages. And no, Helvetica Neue was never a contender.

 

For app developers interested in learning more about designing for iPads, screen size specifications are well documented within Apple's product descriptions. Apple also publishes developer guidelines regarding graphic formats to be used in iOS applications. 

 

It should be noted that the aesthetic of the app was established well before Apple released iOS 7, which endorsed an obvious flatness and simplicity of design. 

 

Challenges

A concern when family works together is that conflicts might arise beyond those experienced in a typical client-designer relationship. Fortunately this wasn't the case for us. Both Chris and I have our own areas of expertise and throughout the process we respected and relied on each other for those specific skill sets. The far greater challenge involved time management and focus without a deadline or the outside involvement of an anxious client. When the final delivery date is open ended any number of life circumstances — apartment moves, daytime jobs — can push a project like this to the back burner. A self-directed project is easily sidelined. 

 

The most significant design challenge was keeping up with the many improvements and adjustments that were made as the project grew. Chris was driven by the idea of producing an app that he himself would use in performance and production settings. 'Feature creep' might be the best description for how this affected the project. Additional modules with new capabilities were added. Many times. It's safe to say that all 860+ 'png' files that now comprise the app were produced at least six different times in at least six different ways. There were certainly no contractual sign-off statements nor any formal agreements in place.

 

Another designer might have thrown in the towel after year two, but in this case, I was dealing with my son and wanted to see the project through. I knew we were co-inventing something unique. Like most digital artifacts produced these days, there is always the potential for making continual modifications. In this sense, the flexibility of a self-directed project worked to our advantage; the timeline shifted as we discovered better ways of doing things.

 

 

Because Christopher was working in Montreal and I was in Kingston, our regular client meetings took place through emails and FaceTime. While Chris was programming, I worked on the visual prototypes and iOS mock-ups. Eventually graphics files were transferred to actual iPads to give us a better idea of how the app was responding and what changes needed to be made to increase the overall functionality. Certain portions of the early prototypes simply didn't work because of the complexity of the app. Each module has multiple connections with the others, meaning that a simple adjustment could disrupt or break another part of the app, requiring additional hours of debugging. Debugging was by far the the most time consuming and challenging part of the process.

 

Result

It looked like a Christmas 2014 release was imminent when Apple approved the app for sale on December 19 but, at the last minute, Chris discovered a bug that would have produced an unwanted error message. We decided to override the pre-Christmas release date until this was remedied. As luck would have it, Apple does not process apps for a full week during the holiday period — a further delay. On January 1, 2015, the app was finally released. An early spotter on one of the audio forums informed us that the app was posted on the New Zealand App Store.

 

Within hours it was made available worldwide. That day one of the best known iOS audio reviewers obtained the app and gave it a glowing review. Sales took off with informal reactions by bloggers also being very positive. Since then sales have been steady — usually up on the weekends and lower throughout the week. As of this, writing synth-Q has received a five star rating on the US store.

 

Takeaways

  1. A passion project is a leap of faith. I'm sure there are many designers who have contemplated producing the next great mobile app or game, but to follow through you have to be willing to invest in the project, even though there are no guarantees of a financial return. Under ideal circumstances they say a decent app or game requires around $150,000 USD just to have a chance at being successful on the App Store. Although Chris and I never officially logged our time on the project, I believe our combined efforts if charged out, probably exceeded that number. 
  2. Mutual respect is key. Knowing that your partners are equally as committed to a project as you is essential for the long haul. 
  3. Don't underestimate the importance of design basics. Establishing visual hierarchies, being aware of contrast and balance, form and function — and having a healthy measure of basic common sense are, as always, the starting points. 
  4. There is always a chance for success if your app is unique, falls into a niche area and is engaging and fun to use. There are many stories of people who have commissioned designers and programmers to realize their ideas. Unfortunately only a few make their investment back despite the best of intentions. If you're really lucky, there'll be a receptive audience waiting to jump on your bandwagon.

 

Interested in submitting a case study to appear on the RGD website? Download 'Guidelines for Contributing Content' and email