Muse is a music and podcast streaming service looking for a fresh interface design for their new app. The challenge is to encourage users to explore artists easily without getting lost in their extremely large database of content.
Design two versions of an adaptable and trendy user interface for the music and podcast service with a bold color palette, selected font pairing, and UI guide, while featuring a clear and functional UX and user journey.
Up against competitors such as Spotify and Youtube, their own identity needs to be bold and recognizable. An artist profile concept and a design for the music player screen was created as important elements to the app.
Muse is a music and podcast streaming service looking for a fresh interface design for their new app. The challenge that Muse faces is to encourage the user to explore artists easily without getting lost in their extremely large database of content. Therefore, they need the design to be clear and functional whilst remaining aesthetically on trend. Muse is going up against competitors such as Spotify and Youtube, so they will need their own identity to be bold and recognizable.
- x1 Music player concept screen
- x1 Artist concept screen
- UI style guide
- Mockup of final design on phone
- Responsive presentation
A music playlist screen of favorites was designed, as well as a design for the music player as this will be an extremely important element to the app. The screens need to work together harmoniously, so some of the UI elements should remain consistent across, including logo positioning, menus and navigation.
The initial sketches attempted a clean interface design keeping this harmony of elements in mind and using some universal design principles for an intuitive UI that could easily stretch across and accommodate responsively across viewports. I liked the idea of adding a sound glyph or decibel chart that danced with the music.
The first version was designed for fun with a bold and funky color palette in psychedelic purple. This was definitely a bold decision and leaned more towards a dark theme. This was going out on a limb and bit and perhaps thinking outside the box.
The UI elements were in place, the navigation theme was user-friendly, the expected buttons were all available, the logo was front and center at the top of the app, the progress bar well balanced, the audio control easily accessible and a replay button was added.
A playlist screen keeps track of music that is added and can be accessed as a list with options for playing or adding to or from the list, as well as adding to a favorites database. This screen also gives the user an option to search through their music for whatever they might be in the mood for. This layout could also function as a favorites list instead.
To maintain consistency, a UI guide was required. This guide kept all of the individual elements, logo, type rules, color codes, icons, transitions, buttons etc. that make up the user interface designs for the app, all together in one document. This would then be used by their in-house team to roll the designs out across the whole app.
With this particular design I implemented various gradients which I thought played well into the theme and gave a depth and 3D feel for the buttons and also offered some dimensionality to the backdrop and features.
The iconography I chose was simple, clean, and fun and worked cohesively with the font type pairings, which were easily readable and did not detract from the boldness of the theme. I liked how the dancing sound decibel chart complemented the Muse logo, and also the decision to use gradients throughout the interface.
At this point, the requested design for the music player was structured, but Muse alternatively requested specifically an artist profile page, rather than a broader playlist screen. Again, I could use any artist of choice for the concept.
I used a very similar layout to the previous version’s music player design but decided to tone down the bold color palette to something that would be adaptable enough to work for any other artist in the future of the design. I also decided on different typography. Without going completely neutral for the color scheme I began working with an army green and some yellow highlights and accents, which after some experimentation I ultimately replaced with the neutral grays for a little more versatility.
The artist profile page includes a featured image of the artist with their name and genre. Instead of scrapping the entire concept of the Playlist screen, I included a favorites list as the user scrolls down. Here they can add/store tracks to play and easily locate them in an organized fashion. The screen also displays the artist’s various albums, so the artist, their albums, and tracks are all accessible from this screen.
After some revisions and modifications to the buttons, colors, font, theme and UI, I settled on a final user interface for the app. Next, I began placing the designs into various mockups to get a good picture of the final design and really help the client to gage an idea of what the app will look like in situ. The design was prepared for presentation and the style tile was updated accordingly.
