AFX Music App

Project Overview

This app is for AFX, a hip-hop dance team at Berkeley which I have been a part of for two years. They are working on an app for their directors which would allow them to upload, loop and slow down songs to make choreographing easier.

My Contributions

I joined as the designer of a team who is more experienced than me at programming, but I am also expected to take part in the app's development.

My GitHub

Learning How to Develop Apps as a Team

Although I have taken enough computer science classes to know Python and Java, HTML/CSS is completely new to me, but nevertheless a great skill to learn as a UX designer. Since joining this team, I have built up my skills through looking up tutorials and close collaboration with other members.

So far, this experience has taught me how to use a variety of new tools, and given me a wider perspective on the development process as a designer.

The Decision to Start Again

When I first joined this team, they already had a semi-functioning app that just needed some design work. However, we quickly found more and more bugs with the original, so made the decision to start all over again. I do not have images of the original, but this is what the app looks like now:

Clearly, this is the bare bones of the app, but we want to get it functioning while simultaneously adding some of the basic design elements. A lot of work for me!

For example, the first thing I worked on was the play/pause button. First I found icons that would work with React Native, and found out how to code them into the app. We are using Expo to test it out on our phones as we go along.

Time to Get to Work

Because we are adding in design elements as we program the functionality (look at the play icon above as an example), I had to get designs done ASAP. I began with a task analysis chart to see the sequence of actions that an AFX choreographer would have as a user of the app. To inform, this step, I used my experience being in AFX, and thinking back to the main issues that my previous instructors had with their music.

Previous Issues:
1) Have to scroll to a certain point in a song several times per practice
2) Have to find the song on YouTube to adjust speed
3) Have to change back and forth between songs

Potential Solutions
1) Have a cut and loop feature
2) Buttons to adjust speed. Most frequently used ones can be quickly accessed with buttons.
3) Can have a library of clipped songs and loops.

Sketches

Next was a paper sketch which included notes on functionality, and like always, many versions of the same frames. I concluded that the solutions I previously thought about needed the app to have two frames: a gallery and a music editor. However, I learned that a common experience as a UX designer is to learn that your development team does not have the time or resources to make your vision happen. That's ok--just another obstacle to work around.

Thus, I got stated on building the buttons that were accepted. While doing so, I came up with new ideas...

Building

So far, I have found app development slow but very exciting. My task was to add icons using react, and fix the pause/play button functionality. I learned how to do this by importing icons from AwesomeFonts and changing their appearance with a style sheet.

New Plans

Impovements

✅ 2 buttons = simpler interface
✅ Speed and jumps are no longer drop-down menus which covered half the screen
✅ Opportunity to animate the icons in the large buttons
✅ No small buttons which are had to read and have less accessibility

Adjustments

❌ Currently trying to find a way to exhibit different speeds: I want common options as well as the ability to customize your own, but the space is really limited.
❌ Changing the size of the jumps is another issue.

What comes next?

We are currently still working on this app for three hours a week using the new sketches. I will continue to update my process here.

Projects