FanBam, a peaceful music app
As a solo UX Designer, I was exploring the idea of a music app designed to create a calming and serene listening experience.
About FanBam
FanBam’s goal is to revolutionize the way we listen to and connect with music. I worked directly with the founder to create designs and was the sole designer for this project.
Project Brief
The project was about creating the UI of a Music App. With this project, I wanted to explore neomorphism, a new design trend that became increasingly popular in 2020 and companies like Apple and Cred used it in their phone apps.
01
Peaceful
Make the music player a chill zone. When you use it, feel the calm. No stress, just good tunes bringing peace.
02
Insanely Simple
Let music be the only thing on mind. No complicated options, just straightforward and user-friendly.
03
Spatial
Let the music player feel like a wide-open universe. No limits, just endless space.
Video Walkthrough
Final Mobile Prototype
Process
Competitive Analysis
I looked at the UI of the two most popular music apps - Spotify and Apple Music.
The Spotify app has a very disco, party person vibe.
Apple Music used bright red which is attention grabbing, intense and very in-your-face.
Critiquing the icons and usage of the Spotify and Apple Music
Moodboards
“The night sky is therapy” -
Astronomy educator Gary Boyle
A study conducted by Coventry University found that 'individuals highlighted a range of spiritual and transcendent emotions which can be enjoyed whilst stargazing' as well as an 'increased fascination and sense of flow'.
Keeping this in mind, I created two different moodboards to present to the stakeholders and get their feedback. In both these, I decided to keep the celestial theme consistent.
Color Palette 1
Color Palette 2
After getting buy in with the founders, we decided that the following image truly represents what we were trying to design. It is celestial, has a calm presence and gives a cozy feeling. This image ended up being the background of all screens.
Final Screens
01
Hero Screens
I focused on three main screens: Home, Search, and Library. I noticed overlap between Search and Library, as both involve exploring music, so I found ways to simplify and unify these functions.
For visuals, I incorporated circular elements, inspired by planetary orbits, to maintain a cohesive celestial theme.
I avoided flat buttons, opting instead for skeuomorphic buttons, which feel more tangible and satisfying, like a mechanical keyboard.
02
Find and play a song
Unique Features include
"Play Anything" Option:
Users can click "Play Anything" for instant music, ideal for times when they don’t know what to listen to.
Music Therapy Section:
I created a "Music Therapy" section, which includes playlists like sleep or relaxation music, designed for specific moods and needs.
Combined Search and Library:
Users can toggle between viewing their Library and exploring new music seamlessly within the same interface, reducing clutter and enhancing usability.
Visual Elements and Interactivity:
The play button includes shadowing for a realistic touch, and the seek bar resembles a shooting star, visually enhancing the user’s interaction experience.
Unnecessary buttons are hidden under a three-dot menu for a clean interface while still providing access to options like Shuffle and Repeat.
03
Add a song to a playlist
Simple and minimalist design, I combined all the less used options to the three dot symbol and made sure the at once, you could add songs to multiple playlists, a feature that was limited in the existing apps.
- Toggle between Library-only and all-music search modes.
- Select a song, add it to a playlist, or use the three-dot menu to access additional options.
Impact
Enhanced User Engagement: By focusing on a seamless, enjoyable design, we successfully fostered retention and loyalty among our early adopters. Users appreciated the intuitive experience, which encouraged them to keep coming back and exploring more.
Market Differentiation: Embracing a unique, peaceful, and spatial aesthetic helped FanBam stand out in a crowded market. This distinct identity resonated with users and fueled word-of-mouth growth, helping us build a community of dedicated early supporters.
Scalable Design Foundation: Our modular design approach enabled us to iterate quickly, staying agile and responsive to user feedback. This foundation allowed us to adapt and add features without disrupting the user experience, keeping our product relevant and dynamic.
Reflections and Learnings
This redesign taught me a lot about balancing simplicity with usability. I learned how color and tone can create a calm user experience, which is essential for apps intended to be relaxing.
Simplifying the interface was a challenge, but it helped me understand the importance of prioritizing only the features that add real value. It taught me that a clean, focused design can make the app easier and more enjoyable to use.
Adding features like “Listening with Friends” and “Music Therapy” showed me the impact of social and therapeutic elements, helping the app support not just music enjoyment but also well-being.
Finally, working with small interactions, like hover states, helped me see how subtle details can make the experience smoother and more satisfying. This project helped me grow in designing for simplicity and user comfort.
Given additional time, I would:
Expand "Music Therapy" by incorporating guided meditations, offering a more holistic approach to relaxation.
Introduce a "Listening with Friends" feature, fostering social connection and enhancing the app’s calming atmosphere.
Enrich the user experience with additional macro interactions and hover states, ensuring a smoother, more immersive interface.
