Application 2, Trace

Trace is an application project, that helps people to learn to play drumset easier and more efficient. Many musicians know the problem. As a child, they really wanted to learn a specific instrument. Then as they grew older they lost the motivation and stopped playing for a while. The years go on and it becomes harder and harder to play again and you also start to forget certain skills and methods. So after years of not playing you decide to risk a fresh start. You know a bit, but honestly, you forgot way too much.  Congratulations, you are the perfect user within our user group. Trace helps you to develop your skills and motivates you on your journey to become a better drummer.

IMG_4904

Through our research, we gained some useful insights about the learning process of an instrument. We used interviews, surveys, user journeys, empathy maps and other user-centered methods to define the pains and gains. For example, we visited schools and special music schools to learn more about the learning process and the needs of the user. Quickly we defined one of the biggest problems. Often while learning the user does not get a instant feedback which leads to lack of motivation. Learning new thing is always hard, but it becomes easier if you feel the progress. In order to make that progress palpable, we decided to create a reward system. This system is a new and fresh approach that rewards the user instantly by using a unique kind of feedback. Light.

Affinity geordnet
Affinity map running on Windows 10.

Light is one of the most powerful signal nature has to offer. Everyone around the globe understands the effect and power, light can have. So we decided to use that knowledge to motivate the drummer. The only way to let this happen was with the help of a hardware component. At first, it wasn’t easy to develop such a concept, but through the process, we created a good solution. Every drum has his own custom build plastic ring underneath it. On the inside of the ring are an RGB led light strip and a piezo sensor. The piezo sensor notices power, so if you hit the drum the sensor gives a signal to an Arduino board, which gives then another signal to the led strips to glow. Sounds complicated, but in the end, it means that the drum glows instantly if you hit it.

_D712027
Feel the glow.

That visual feedback hast several purposes. It gives you feedback if you play right or wrong, rewards you with stunning show effects and motivates you while playing. In order to unlock new effects, the user needs more points. To generate more points, he has to accomplish more lessons. That simple system takes care of staying motivated.

_D712015
This is NOT a bomb.

We didn’t know that much about Arduino and that kind of prototyping. It was, like last semester, a little adventure. Not everything worked the first time and many times we had to change the plan in order to get the results. It was a bit risky, but in the end, we learned so much not only about interface design but also about Arduino, product design and electrical engineering.

1-start1582_e1.png
The Home Screen.

Besides the massive hardware was also the software, the actual project. Throughout the iterative process the concept changed a lot, some functions were unnecessary, some features weren’t planned, but the main focus remained. One of the biggest problems was the navigation. Trace is a classic desktop application but between the user and the device stands always a drumset, so mouse or keyboard control is not really intuitive. Our solution was, to use the drumsticks as controllers like a Wii gaming controller. It wouldn’t be that difficult to build position sensors or tracking sensors into the sticks in order to use them as a mouse. Due to the limited time, we did not develop that, but it would be possible so we used the theoretical concept for the project.

Designing a typical desktop app with a little twist was a new experience and we learned a lot. The UI changed a lot throughout the process. I really don’t know how many wireframe generations we were creating. The UX was also a challenge but we tried to make the app as intuitive as possible. The most interesting feature of the app is probably the freestyle function. With the help of the trace hardware, the app tracks your sessions, while you are playing. It tracks the sound and saves it as drumset notes or as trace notes, a note system we developed for people that can’t read traditional notes.

3 Frei Start_E(1)
The Freestyle Screen.

Let’s face it: learning new things sometimes sucks. It is difficult, takes a lot of time and honestly playing an exercise for the millionth time is super boring. In order to change that we developed a new concept.

While the user plays free, the app tracks every hit on a drum and every tone. With that function, the user can save sessions and doesn’t forget anything while playing free. He also gets points for playing especially good or creative. These points can be used to unlock new light colors or effects.

5.1.1 Lernen Übungen spielen_1
The Exercise Screen with the open legend to explain the trace notes.

Another cool feature is the exercise screen. At first, it looks like the freestyle screen, but it works a bit different. The user plays classic exercises, but instead of playing notes on a paper he has to hit the not the moment the symbol crosses the blue line on the screen. The notes flying from the right to the left and if they hit the line the drummer has to hit the right drum. If he does that successfully he gets points if he fails at the timing than he gets no points. Sounds familiar? Well, the concept was heavily inspired by the popular game franchise “Guitar Hero”. However, instead of focusing on entertainment we concentrated more on the educational aspect. Therefore, Trace feels more like a learning app, despite using gaming elements and concepts. This leads to a clean but still enjoyable experience.

6 Lernen Skills Übungen_E(1)
Nice skills.

Another great feature is the skill function. One of the biggest insights from the research was, that often it is extremely difficult the train special aspects of your game. This leads to playing an exercise for the millionth time, hoping that this time you play faster or more consistent. Sometimes it works, but most of the time it doesn’t and that is very frustrating. In order to prevent this uncool experience, we developed the skill feature. In this screen, you train explicitly one skill, one ability the weakens your whole game. Based on the research, we defined three skills: speed, precision, and endurance. These are the factors most of the people we worked with had problems. This right here, for example, is a speed exercise. The goal is to play as consistent as possible over a specific amount of time. Trace distinguish between the left and the right hand with the drumstick tracking to give you better feedback. If the user plays in the perfect speed the circle is as big as the note lines and if he plays too fast or too slow the circle becomes red. The better, the more points. And as always, more points mean more awesome light effects.

IMG_4917
No screens, no problems.

It is not easy to demonstrate such a big and unique concept to someone who never played a drumset in his entire life. Therefore we made a little film to showcase the power of Trace and his benefits. Both Constantin and I love film, so we planned a huge movie. Due to limited time, we had to reduce the script a bit, but in the end, I think we did a decent job. The film explains the main features of Trace and shows us a little use case. This was the biggest movie we ever made together, so naturally, we learned a lot. For example, we had to record the drumset in order to use the sound in the film. We borrowed different drumset microphones, one for each drum. Then we had to adjust the volume of each microphone in order to get the perfect sound mix. That was a challenge and it took two hours to understand the sound mixture interface and how to use it, but after a while, the sound was recorded perfectly clear.

IMG_4911
And action!

The movie was filmed in a concert hall, so the acoustic was on point. By the time we filmed all of that, the screens weren’t finished which means that we had to improvise. We used a green screen and included the screens later. I know, that sound incredibly smart but hold on. Because we made a movie, we had to deal with the motion of the camera. So in order to include the screens right, we had to track the camera via motion tracking. And again I know, what a smart move, but After Effects tracking function is not very good. In other words, it’s super dumb and frustrating. In the End, we had to adjust the tracking points by hand, in every goddamn frame. It took us three days. I don’t know why the tracking was so bad on the green screen, but I am sure that that were the most frustrating moments of the whole project. However, the movie itself became very good.

AfterEffects Tracking
Hello darkness, my old friend.

So after all these challenges and all this stress am I proud of the results? Of course, I am. We learned so much about the so many different things. This wasn’t only application design. It was product design, electrical engineering, sound engineering, filming, rapid prototyping, human-centered design and of course time management. Speaking of time management that is probably one of my biggest weaknesses. We planned so many features, so many prototypes, and a huge movie. In the End, it was way too much.

_D711950

Last month, we worked without pauses and it was was very, very stressful. If I would start this project again, I would reduce the prototype to just one drum, not the whole drumset. That way we could focus more on the screen. In my opinion, the screens are not perfect and I could have made them better if I had more time. But still, I love Trace and the work on it. Every project is stressful, but it is easier if you work with your best buddy. I am proud that Trace is now finished and ready to take on the world. It was, as always a pleasure and a valuable experience. Let’s rock!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.