music UX

BBC launched its Sounds mobile app last year. I use it every Sunday to listen to Guy Garvey's weekly podcast while I make breakfast for the family. 

I love KEXP . It’s a listener-supported radio station in Seattle. It streams all around the world on its website and mobile app. And they’ve had a really good app for the Apple TV for some time - great to stream in the house at a high volume!  And I’ve reviewed them before here . Oh, and also here .  They recently released an excellent new version of the app for Apple TV. And although it doesn’t introduce a lot of new features, it’s way more visually engaging and maximizes the screen real estate much better than before. Here are some of the major changes... Additional, prominent functionality- Archive (stream any show from the past) and streaming Settings The old version had a lot of wasted, unused screen real estate while the new version makes more efficient use of the screen New, large, colorful tiles along the bottom represent each song played in chronological order You can scroll left and right to see history of songs played (much further back in history than before) Larg...

Sometimes conveying the meaning of an icon is hard, especially when the meaning isn't just one thing but two things. In the case of Google Events, they use an intuitive bookmark icon to let users save an upcoming concert. That's one thing - but what's the benefit or impact of saving the event in the first place? That's a challenge to get across without supplementing the experience with something else.  Several months ago, we were planning to see Luna at Lincoln Hall. After doing a search for the show, I found a list of upcoming Luna shows. We weren't sure which date would work, so we saved a few. After tapping the hollow bookmark icon, it filled with color (an ubiquitous, best practice for an on/off toggle to provide visual feedback).  But on top of that, Google displayed a snackbar (a pattern from Material Design) in the bottom right of the screen to tell us the benefit - 'You'll get reminders and updates about this event'. Finally, in the snackbar, the...

A few weeks ago, my wife and I really wanted to see Alvvays and Frankie Rose at Metro in Chicago. But the show sold out and I was left to look for tickets second-hand. I've used Stubhub before to purchase concert tickets but up until now, hadn't tried their Price Alert feature which lets you set a ticket price max and be notified when the price goes below it. The user experience from beginning to end was really good. The feature is easy to find and provides very mobile-friendly controls to create the alert. The Price Alert tab was prominent on the event details screen - very easy to find. Note: today (1/5/18), Stubhub has removed those tabs and you have to tap an Info button top right of the viewport to look for the same feature. It's a still a good UX once you get there but it's an additional step. The Price Alert feature is intuitive and uses tappable numbers to let me pick the quantity of tickets (not a clunky dropdown menu or less efficient plus/minus p...

Metacritic is an app that aggregates critics' reviews for movies, games, TV, and music all across the web. It's a very useful site that I use occasionally to check out reviews for recent albums - and I'll link out to the reviewers' sites to read more detailed reviews. Most of the site is organized fairly well. Search results are laid out in nice, usable columns based on category. And once I find a specific album, I can read each of the reviews very easily.  There are just a few issues when search for an album. Although I can eventually find what I'm looking for, the experience is less than optimal - some elements really don't afford clicking or they change position in the UI, and the overall look and feel is inconsistent depending on where you are in the flow. Here's a few of the steps when searching for an album... A search for Wolf Parade begins in the typical location - top right of the UI. The search input looks like a te...

A couple of weeks ago, I wanted to buy an inexpensive stand for my acoustic guitar. I was already familiar with Reverb , which is  an online  marketplace  to buy and sell music gear. Without knowing much at all about guitar stands, I did a search, landed on their site, and within several minutes I was able to research and purchase a new stand. From the helpful information about different stands to the last step of the checkout process, the user experience was great .  After Googling 'guitar stand Reverb', one of the first results was a super helpful article on Reverb titled, 'The 6 Best Guitar Stands for Every Budget'. It listed all with all of the comparative specs I needed right on the page (saved me from having to look at each stand's page). Knowing my budget was small, I selected the On-Stage XCG4 Classic Guitar Stand. The price was right, the design was simple, and reviews were good. There's only one I caught that could be improved - when I curiously tr...

Before attending the An Event Apart 2017 conference in Chicago last month, I didn't know much at all about SVGs, or even what an arpeggiator was. One of the speakers, Chris Coyier, gave a fascinating talk about the possibilities of the vector image format. And some of the examples he used included things like logo animation, shape morphing, spinners, art. He even had a music example - an arpeggiator created on CodePen by Jake Albaugh. If you're interested, there's a great article about arpeggiators here . In short, an arpeggiator is commonly found on a synthesizer, and 'provides synth players with an easy way of playing complex synth parts via simple chords'. Besides being built entirely with SVG,  Albaugh's arpeggiator  (which you can interact with) has a good user experience too. Areas of the screen are clearly labeled and the bright yellow color stands out for selected items,  The screen is laid out well - you select options in each section and...

In any UI, calls to action must be clear - represented either by intuitively labeled buttons, or instantly recognizable icons. When they're not, your users will have to do extra work to figure out how a feature works, how to get started, how to distinguish areas of the screen. This will cause them to hesitate, be confused, and simply take more time than needed to get something done. And they'll most likely forget next time they visit your app. In the case of Ultimate Guitar, an excellent guitar community website which includes chords (and tabs) from 1000s of songs, the detailed view of a songs's chords have too many similar calls to action. In the image above, notice the number of tappable elements that represent 'Play'. The first and second one (top of screen) seem to do the same thing - they briefly open a different, more robust view of the tabs, followed quickly by a modal asking me to upgrade. Not only are the options redundant but only the second one ha...

For the past several months, I've been working with the CHIRP Radio volunteer tech team to design a mobile solution that allows station DJs to plan out their weekly shows. At a high level, a DJ should be able to browse and select songs from a massive music library, and add them to one or more playlists, which can be used for their shows. The app also has functionality like the ability to read album reviews, view recent activity by DJs in the app, and review a DJ's profile. A site map is an important artifact when designing any application or website. It shows how the overall navigation should be structured, can be used with end users to validate the taxonomy, and is helpful for developers as a companion to wireframes or mockups. Below is a site map I recently created for the project. The highest level navigation options are lighter in color, while as the user navigates deeper, darker colors are used to represent those options. The coloring isn't necessarily a known...

On December 22, Rdio finally shut down its service, a beautiful, on-demand music streaming application, which didn’t do anything extraordinary when it came to functionality - they had discovery, sharing, playlist management, and a mobile offering just like their competitors. But it was the user experience that set it apart from others like Spotify and Apple Music. Simple, organized, intuitive, and mobile-first. Clean, simple UI  - Screen density is often an issue with music apps trying to cram every piece of recommended content and social function on the screen at once. Rdio's beautiful, simple design (with plenty of white space and good use of color and typography) makes for a clean interface so users don't get overwhelmed with all of the options and content being shown at any given time. Users notice important things like calls to action since they stand out so well. Well-organized  - Things are where you expect, including a small set of persistent navigati...

When an application is intuitive , it typically has features that are simple to understand. The user doesn't 'have to think' when performing an action, completing work or navigating here to there. Things are located and work as users expect - and this is based on their mental model that develops by way of experience with similar applications. Bandcamp is a great site for artists and users. As I've written about here , it does a lot of things well including a great checkout process for users to purchase merch. However, I recently found the login link hard to find . When I did a Google search for 'Bandcamp La Luz', I linked directly to the band's Bandcamp page and was able to add their latest album to my cart.  I then wanted to login to the site to see what albums I had purchased recently but I couldn't find the login link. I expected it (based on experience with other sites) to be located top right of the page and was surprised when I scrolled and ...

In the first of a series of UX reviews of Apple Music, I focus on navigation, one of the most important UI aspects of any music app. When we talk about navigation, we're referring to a user's understanding where of they are and how they predictably and easily get to various areas or features of an app. First of all, I really like Apple Music for several reasons: the pictures of artists and large album art, tighter integration with iTunes, improved playlist management on mobile, Beats 1, the potential of Connect and other things which I may write about later. But when it comes to the navigation, the app suffers in a few ways. I've read (and heard) about some  issues  with the overall navigation model, that it's difficult to remember where you are and how to get back to where you were.  I've experienced the same thing - but I'd like to focus on a few specific things I frequently use: a new option that allows a user to see only tracks downloaded to the phone...

This Is My Jam is a music app that lets users share one song at a time with others. If there’s a song that you absolutely love right now and want to the world to know about it (which I often do), you can select the song, post it to your page and tell the world ‘this is my jam!’. Not only is the app’s value unique but the user experience is good, specifically when it comes to choosing a new jam.  First of all, the app is responsive, slightly changing the layout of screens according to users’ device sizes. This is important because it delivers a consistent experience from web to mobile (without having to learn or download a separate native app) while the folks at This Is My Jam only have to maintain one web experience that adapts to users’ devices (that is, they don’t have to manage a web AND native mobile experience and all it entails).  And this isn’t just some responsive web site where the content shifts around - this is a web application, folks, and it’s not easy...

Cherry Red records is an independent record label based in London. Established in 1978, the label is known for such artists as Dead Kennedys, Runaways, Everything But The Girl and most recently, Swervedriver.  But despite the rich history of the label, the user experience of their website could be improved.  Since elements on the homepage are styled similarly (color, weight) and the page is so information-dense, it’s difficult for users to know where to look first, where to focus their attention and where to find things. There’s so much to look at that the visibility of what’s important is reduced. And I understand the red color is a big part of their brand, but the page is so saturated that it makes things worse. A redesign of the page would help, focusing on a more aesthetic and minimalist design , deciding on the most important information and organizing the page in such a way that the hierarchy is clear and user can find things quickly. For example, they should con...

In an exclusive essay, Nick Hornby writes about the effects of the digitization of music on the local record store, the resurgence of the local record store and what it all means in the context of his famous (and my favorite) book, High Fidelity. Check it out here... http://www.billboard.com/articles/news/6494722/exclusive-nick-hornby-essay-high-fidelity-sequel

Bandcamp is like an online music store for artists where they can sell their music or merch and promote themselves. Many artists these days are using Bandcamp to set up a unique site to distribute their music on their own, with or without the help of a label or major distributor like iTunes. The design and structure of each artist’s Bandcamp site is very clean, very simple with clear calls to action for playing tracks, following the band and buying things. But where Bandcamp really excels is in end-to-end flow of purchasing an album (or two). This past weekend, I wanted to buy the latest album by Pale Lights, a band from NYC (also recommended by The Big Takeover magazine). Directly from the band’s Facebook page, I linked to Pale Lights’ Bandcamp site from which I was able to quickly find the album. On the album details screen, I clicked the large Buy Now link. From the subsequent modal, I named my price (in the conveniently highlighted field) and could either checkout or add to...

I recently purchased two tickets for the David Bowie exhibit (David Bowie Is) at Chicago's Museum of Contemporary Art (MCA) . The exhibit looks brilliant - a retrospective of his career including costumes, artwork, photography, etc. And it's been getting rave reviews from folks like Rolling Stone and UK's Guardian. I've been a fan of Bowie since I was a kid - we even named our black lab after him! However, purchasing tickets for the exhibit via the MCA's website was not great. Interruptions in the purchase flow made the process confusing and time-consuming . I selected the October 24 date at 6pm, two tickets and clicked Purchase (fairly easy). Now, I'm a new user to the MCA site so I had to create an account. This interrupted the process and it wasn't totally clear why it was necessary. I did it anyway, expecting to come back to the next step in the process, the cart. Instead, I came back to the earlier page to (again!) select the date, time and quan...

KEXP is a Seattle, WA public radio station which broadcasts all over the world via its website and mobile app. Their format is consistent and brilliant - their DJs play a lot of the stuff I like including many new and old under the radar artists (Dum Dum Girls, Elbow, Adorable, Stone Roses). And they have weekly shows like Roadhouse (Wednesday night) which specializes in genres like Roots and Americana. For those who miss any of the weekly programming, KEXP has a new feature - a 14 day streaming archive (currently in beta) where you can search the station's archive according to times, shows or hosts. This takes the place (if I recall) of an older archive feature which was difficult to use. KEXP, though publicly funded, seems to always be investing in the user experience of their listeners   - they recently redesigned their website with better usability and visual design and their iPad app is very engaging. Overall, the streaming archive user experience is simple and intuitive...

Merge Records is an independent record label based in North Carolina and started by Laura Ballance and Mac McCaughan of the band Superchunk in 1989. I got to see them live for the first time in September at the Hideout Block Party in Chicago (a great show) and may see them again in January at Metro. Though I thought the last version of the label's site was good, the latest version is really clean and engaging - a lot of photography, large type and several ways to listen to music by way of Listen links and a Merge radio feature. And the site's built responsively which means it reacts and scales depending on your device's resolution - this makes for a consistent user experience from laptop to tablet to phone without having to download and install an app (although they already have a good mobile app). Browsing and purchasing music on the site is also good. With browsing, the links to New Releases, Shop and a search box make it easy to find new stuff. In terms of purchas...

Who says a good UX can only come from digital music products? Eton's FRX3 American Red Cross is an award-winning radio which provides a laundry list of features in a very intuitive and ergonomic way. Although the radio comes with a small instruction manual, I didn't need it very much (except for understanding battery life, charging options and Alert mode). For the most part, it's a 'walk up and use' experience , not needing any training for first time use. I was able to figure our most of the other features quickly and on my own. As far as ergonomics, the device is comfortable and doesn't require a lot of physical effort . The knobs for volume and tuning are easy to rotate and large, with notches to make them non-slip in bad weather and in the perfect spot while holding the device with both hands (my index finger and thumb were naturally right there!). And the crank used to charge the FRX is accessible, simple to rotate with its handle on the end and lightwe...