Music App UI
This project was created for a UI design challenge. The goal was to design an interface for a mobile music app.
Design Goals
Showcase the album artwork – I wanted to create an interface that showcased the album art. To achieve this, I stretched the album artwork as far as it could go while keeping it’s original shape.
Easily re-arrange tracks – I spoke to a few musicians about features that they wanted to see – one of the more popular ideas was a feature that would allow the user to easily re-arrange tracks and set tracks to ‘skip’ if they don’t enjoy a particular track in an album. I designed the second page with that idea in mind.
Experiment with finger usability – I wanted experiment with creating a scroll bar that fits the curvature of the users thumb. After testing with a hand full of users I landed on the slight curvature of the scroll bar. Overall it feels comfortable and is easy to use with one hand.
Design Process
I decided on a color palette primarily made up of blues with touches of violet and magenta. These are colors that are often associated with music and I felt like the dark blue backdrop would not only look nice but would also save precious phone battery by not projecting a lot of light while the app was in use
UI Flow Chart
I created a full flowchart for the app just to explore design options and to get an idea of how the app would function overall if I were to build it out in it’s entirety.
I designed 2 low fidelity wireframes for the interfaces I was going to focus on to make sure that the app layout makes sense in it’s most basic form.
When constructing the final layout I also put together a version where the album art was presented in a circle to compare it with my full album art version.