Alex Penman
Work About Photo

Stream music from your Subsonic server to any device using Subsweep.

Subsweep
Subsweep is a music player designed to connect with Subsonic servers. Its simple and elegant interface makes it easy to use while keeping in mind the complex needs of those who run their own media servers.

A sample flow through the Subsweep app.

The Problem
Subsonic is a personal media server allowing you to stream your local files over the internet. Subsonic has been a top choice for people who are willing to put a little bit of time into server maintenance to give them more privacy over current media streaming subscription services such as Spotify and Apple Music. However, due to outdated or hard to use apps, streaming music from your Subsonic server on the go is not so enjoyable. Subsweep is an alternative to existing Subsonic mobile apps with a focus on easy navigation and a simple interface.

The idea to make Subsweep came from my own personal use of Subsonic and my assumptions around what makes a good media player. Through interviews and multiple iterations, I arrived at a design that I am hoping to code into a functioning app.

Subsonic is a media server. It streams your local files to an app. In this case, Subsweep.

Conducting User Research
To help me get out of my own head, I began the process by conducting interviews with people who maintain their own music servers to see how they listen to music. We dove deep into why they take the effort to run their own server and their thoughts on major streaming services.

The overarching theme was that by maintaining their own server, they had more control over their music. Whether that meant having a diverse mix of rare songs or getting them to go out and discover new music, they all found that this was a big benefit over spending money on subscriptions to major streaming services. While 5 of the 6 interviewees showed little interest in a Spotify algorithm guiding them to new music, they all admitted to enjoying the feeling of discovery on their own.

Screenshots from the PlaySub and Plex apps.

Competitor Analysis: PlaySub and Plex
PlaySub is an iOS app built strictly for Subsonic. It plays music well and has all the features anyone would need for a Subsonic app but it just doesn’t feel good like Spotify or Apple Music. However, this app is well received by the Subsonic community. The developer is active on the Subsonic forums, keeping his users updated on what’s coming next for the app. An important thing to note when creating something for the community.

While not technically based on the Subsonic server, Plex is its own media streaming platform with an accompanying app. Since it’s designed for all types of media, not just music, the app feels cluttered. Each tab in the navigation bar is for a different media type which means that all the functionality of a music streaming app like Spotify is crammed into one tab rather than spread out across a full app. In terms of visual design, its muted color scheme makes it work well with the endless combinations of artist portraits, album art, and movie posters.

Comparison of the Apple Music and Spotify interfaces.

Competitor Analysis: Apple and Spotify
The two most popular music streaming services have a different business model than that of a Subsonic app. Their needs revolve around converting users to their premium tier and keeping them there. This means getting them to stay on their platform through curated playlists and personalized recommendations.

There’s an element of browsing for new music which would not be available in a Subsonic app. The copy throughout the app is personalized and meant to make you feel like you are finding new things; something that almost all of the interviewed users didn’t like. Though these two things might not fit well in a Subsonic app, it’s important to note the feeling that comes along with discovering fresh music.

I made a list of what should go on each screen of the app to gain a better understanding of the big picture.

Information Architecture
I casually listed out what should go into different parts of the app, mainly for me to have a full idea of what would be needed to implement. This helped set an image of screens moving into the next stages of the process.

Ultimately, what was most valuable to me here was the consideration of technical limitations. By looking into Subsonic's API, I was able to verify from a high-level, all these components would be implementable into a working app. I even threw together a quick Javascript app to test out the search endpoints of the API to see what sort of data was available.

By sketching, I was able to quickly take a look at designs.

Sketching
I began by sketching out basic layouts on paper; iterating through various concepts and flows. I experimented with card layouts, list views, and very rough iconography. This gave me an idea of what layouts work best for navigating to music fast and when screens felt too crowded with information.

The most important decision from this part of the process was avoiding the traditional tabbed navigation layout of many music apps and going with a single page layout. When you go through apps such as Apple Music and Spotify, the recommendation of content is necessary and adds a need for dedicated "Search" and "Home" tabs. Since discovery plays an intentionally smaller role in Subsweep, the app architecture can be cut down in its complexity.

Using Sketch, I could test out the interactions by mirroring to my phone.

Wireframing
Next, I mocked out a medium fidelity prototype that fit on a phone screen. Through this, I decided where buttons and images would go and how the user would flow through the app. I began thinking about the interactions and using Sketch’s basic prototyping, was able to navigate through user journeys to make sure that all the functionality was accounted for. Additionally, by using Sketch's phone mirroring app I was able to quickly test out how the placement of buttons felt when used on a mobile device.

Now that the app felt good, it was time to focus on making it look good.

Visual Design
With all the interactions in place, I moved on to visual design. I picked a color palette that was subtle to accommodate the varying images for album art and artist profiles with hints of bright colors to help pop out on menus. I also worked on some spacing details; making the spacing consistent across the app and adding some padding to lists so the text could breathe.

One big thing that I found during this process is that it’s very easy to pick and choose album colors that look nice to display in a portfolio. A quick search for music app designs on Dribbble shows that. Using random song information from my personal music library helped get a feel for what a “real” UI might look like.
Next steps
1. Go back with users and test out my designs.
2. Code it! This isn’t just a case study; it's something I am hoping to use in my everyday life.