Music helps me to focus when I’m working on projects that require complete concentration, and also helps me power-through when I’m working on more monotonous tasks. I use Apple Music when I’m on the go, but will typically use the iTunes application on my Mac when working. And despite its terrible interface, I still use iTunes nearly everyday.
Just do a Google search and you’ll see there are plenty of others that share the same sentiment. Once a revolutionary product, not a lot has fundamentally changed since its inception in 2003. Fifteen years later, the application is in dire need of a major overhaul. The user experience is, well… abysmal, which is hard to say from a former Apple brand evangelist.
The neglect could be due to a number of things: lack of internal resources, business priorities or Apple could be planning on launching a completely new product. But these assumptions aside, iTunes seems to be in conflict with Apple’s own MacOS app design themes/principles, particularly intuitiveness (flexible) and focused.
A New Look
All of that being said, over the holidays I had some downtime and decided to take a stab at redesigning the iTunes interface as a pet project (I used my own library content in the mockups… no judgements!)
Not exhaustive or terribly in-depth, this exploration is very high-level and only scratches the surface of what I envision the iTunes application could be. In this post, I’ll focus on calling out specific features, but to see full page mockups and UI animations that illustrate the screen flows, click the button below.
Step 1: Defining User Goals/Tasks
Before addressing the usability, I needed to establish concrete user goals; any new enhancements to the interface would have to align with at least one. Aside from the obvious primary goals of storing/accessing and playing back media; browsing and discovering content were established as secondary goals:
Step 2: Usability
With the user goals defined, I conducted a quick evaluation of the interface for some qualitative benchmarks. There weren’t any new discoveries, only confirmation that iTunes has major usability issues across the board, with particularly low scores in the areas of design and navigation.
Step 3: Wireframes
I then put together wireframes, that introduce new features and enhancements to address the UX vulnerabilities that surfaced from the usability assessment. The new features would create a more enjoyable user experience.
Step 4: Design
And lastly, based on the wireframes, I designed new interface mockups to visualize the UX work. Throughout the current iTunes experience, the screens are complicated and feel restrictive. There’s an onus on the user to memorize how the functionality works versus making the application so intuitive that anyone can use it without much thought. I began the design by focusing on the overall structure of the screens and components.
When you open the application it’s unclear how to get started. It’s equally unclear what users can do within the application. There are no instructions to help onboard users. Moreover, the UI design is neither visually appealing or engaging.
Now, it’s clear what users can do here, there are clear entry points to guide users and help them accomplish their goals/tasks. For added visual appeal, homescreens now include vivid background images and feature recently played/updated media content.
Navigating the interface is taxing and complicated. It is particularly difficult to quickly switch between screens, as the main navigation is hidden within a dropdown menu. Additionally, wayfinding is problematic; it’s challenging to orient yourself as you click through the various application screens.
The main navigation has been pulled out of the drop down menu (which has been deleted) and placed prominently at the top, enabling users to effortlessly switch between screens. The new main navigation, along with relevant supporting images in the background, make it easier to orient yourself.
The media player, although anchored at the top, manages to get lost. It blends in with the application window, providing no contrast to the new user, it could be easily overlooked.
The media player has been moved to the bottom of the application window, in the direct line of sight of the user, and remains affixed to the window (visible at all times) as the user scrolls down. The color of the player is now dark, which provides a striking contrast against the content.
Secondary Navigation (Store)
The secondary navigation links in the iTunes Store are easy to miss, given their indistinct placement. It seems to be a hodgepodge with no discernible taxonomy applied, which make the links ineffective.
The number of links has been reduced, reordered and put into a drop down menu. Now located at the top of the screen, the links are more accessible, providing more whitespace beneath.
There’s an excessive amount of content displayed on the store screens, and while the grouping of content is helpful, it’s overwhelming–the majority being irrelevant to the user. It feels like catchall of miscellaneous categories with no reasoned structure.
The content is grouped more effectively and there’s more negative space to reduce the clutter. The number of sections have been vastly reduced and the focus is on (3) main themes: what’s trending, what’s new and what’s recommended.
So That’s the Gist of It
The new design now makes better use of the space, creating more openness. While it leverages familiar iTunes brand elements (fonts, icons, colors, buttons), the interface is much more visually appealing and vastly more intuitive. Click the button below to see the full mockups and some UI animations. If, by change, this post happens to come across any of the UX/UI design folks at Apple, feel free to reach out, I’m always available for new client partnerships –– Cheers!