MOD Music Player
By Eric Fogltanz
An exploration in UI/UX, branding, and app design
MOD Music Player
by Eric Fogltanz
Instagram:
@ericfogltanz
Filed Under:

 


MOD Music Player is a project that allowed me to dive headfirst into the User Interface/User Experience (UI/UX) world while applying the design skills I have developed over the last 5 years. I chose to design a music player app because it is something I find myself using daily and have many frustrations while doing so. I looked at this project as an opportunity to search for solutions to problems I saw, or at the very least, understand why some of my problems exist.

 

Research

Being that I knew very little about UI/UX at the beginning of this project I spent a good deal of time researching the field to get a base understanding of what UI/UX is, and how I can go about practicing it to discover if its an area of design I would enjoy. Medium.com was the first place I went to for information, I read countless articles ranging from different forms of testing to articles on different UI/UX programs. I also spent countless hours listening to the UX Podcast, a podcast where two hosts bring on professionals from all areas of UI/UX and discuss different aspects of the profession. This podcast allowed me to get into the mind of a UXer and taught me how to talk and think like one. The final chunk of my research was from Donald A. Normans book Living with Complexity. This book allowed me to shake the urge to simplify everything, and rather search for better ways to optimize the inevitable complex situations we face as designers. Research spanned the entire length of this project, as there is always something more to learn.

 

Branding

Branding was my first design focus for this project. Being that this would be an app, I figured the branding had to be something different than what is already out there. Many apps used very generic branding, because of this, I decided on three ways I can set my app apart. The first is a texture, all the other apps were either a flat color or a gradient, an electric texture allowed my app to stand out among the rest. Secondly I wanted to incorporate a symbol that communicated that the app was at the very least music related. I went with an alternative take on the play symbol to differ it from the other basic play symbols used in other apps brandings. Finally, I wanted to include a wordmark so that the name can be remembered upon seeing the app icon. Combining these elements made the app stand out among the rest.

I also created a handful of graphics to be used for Instagram promotion. I created these midway through the UI, and used them as an opportunity to have fun with design, as the UI design got a little dull after a while.

User Experience

I had planned to do extensive testing with this app. Given the world we are living in right now, hands on testing became almost impossible. I found an online alternative, and launched a card sorting test. I learned the hard way here that the completion rate of online surveys is less than ideal. I received only about a 25% completion rate. As much as I wanted to continue with the UX testing for the app I felt that it would be best to focus more on the branding and interface design and revisit the UX at a later point where I could actually sit down with users.

 

User Interface

When I first began the UI design of the app I made some wireframes, and looking back, I had no clue what I was doing. After reading up on how UI design should be done and discovering the life saver Material Design, I had a much better base and went ahead with the UI. I felt that I needed to stick to the script a bit while designing the UI, being that this was my first UI project. Now that I have a solid foundation I feel much more comfortable moving forward with UI/UX.

The final app design can be found here.

Eric Fogltanz was repsonsible for posting the content on this page. Any inqueries should be directed to the contact information listed above.