User Experience Design

iCappella launch screen I made.
iCappella launch screen I made.

Apple sponsored a hackathon at Rochester Institute of Technology to create an app related to media in less than a week. All it had to do was be something that would be presented on stage, demoed, and judges would ask questions pertaining to the novelty and difficulty of the coding. So I joined a few of my a cappella group members and friends to make a team of 4 to make something neat.

What kind of cool iPad app can be created in less than a week?

My group and I tried to tackle a domain we were familiar with: music. Within a couple of hours I had my whiteboard filled with some ideas of what kinds of apps we could take on with us unanimously choosing to go with an audio looping application. After downloading and using a few different popular audio looping apps, the idea had been solidified. We wanted to take on audio looping for performers who would be using this app live on stage.

Approach

My job was to design the UX and UI for the app while exploring what we’d be capable of implementing for our demonstration. I did tons of sketching (you can see them on my Behance) and talking with the team about how we could stand apart from some of the other apps. I looked to inspiration from several physical, live audio devices: live looping pedals, drum kit machines, dj turntables, reel to reel recorders, etc. Given the time constraints I figured it would be best to go with creating a visual metaphor of audio equipment that was not fully skeuomorphic but respected its digital environment.

Look at all the buttons and knobs on the analog reel to reel audio recorder.
Look at all the buttons and knobs on this thing!
Color ideas from higher end fashion retailer, Burberry.
App color ideas from Burberry to help the app feel more sophisticated.

We had pivoted ideas a few times as we had found different software API’s that weren’t performing to the needs of real-time audio manipulation. My early ideas had most of the buttons situated as if the iPad app would be set down. The more I thought about this being for live use, I decided to place the buttons along the sides so the iPad could be held and used to record, similar to using an instrument. To accommodate the controls my teammates were able to produce, I had created on/off toggles for each multitrack, record functionality within each track, reset all, and “master” volume with playback pause/play.

Results

The app icon I made for iCappella.
The app icon I made for iCappella.

Somehow we had pulled it off. My teammates were all already established software developers which allowed me to contribute to the UX/UI and functionality. Adapting our project scope and features was a challenge given our time constraints. It is very tough to grasp that we were making something that needed to work on stage and not really anywhere else.

Us working with an Apple Engineer during the hackathon.
Us working with an Apple Engineer during the hackathon.

Some challenges we faced were the fact that 3/4 of the team had a full-time Mac at their disposal for Xcode development. So, I made sure to lend my laptop to my team while sketching out ideas and then staying up into the night to implement them using Adobe Illustrator when they had finished. I thought of it as working the late shift so when the team woke up the next day we’d have some icons to work with.

Being that this was a live performance app, we made the decision early on that we would do a live singing demonstration. What we had to tweak was our differentiation from other app and we had decided to create an a cappella recorded drum kit, courtesy of a member of the all-male a cappella group Eight Beat Measure (also my roommate).

Before: An early sketch of iCappella.
Before: An early sketch of iCappella.
The app in action.
iCappella in action.
Presenting iCappella
Presenting iCappella to Apple and our friends.

Impact

This experience had taught me a lot about working under a time crunch and trusting your team. There were so just as many sacrificed good ideas as there were brilliant revelations. Having never done a hackathon, let alone without my laptop at my side the whole time, this experience definitely set the benchmark for me. My teammates were all amazing and we produced an app that I was proud to put my name on for the time we had to create it. Taking on a project like this has inspired me to continue learning more about creating something cool for iOS using developer tools.

Sadly, that was just the order of the presentations since we went first.
Sadly, that was just the order of the presentations.

The app in action