Spotify With Touchbar Mac

1. Mac Touch Bar Spotify
2. Spotify Mac Miller
3. Spotify With Touch Bar Mac Os
4. Spotify Mac App Store
5. Spotify With Touch Bar Mac Store
6. Spotify Mac Old Versions

Spotify is a digital music service that gives you access to millions of songs. Spotify is all the music you’ll ever need. Skip to content. Spotify Download Spotify. Play millions of songs on your device. Bring your music to mobile and tablet, too. Don’t get why people hate it. I have an iMac and MacBook Pro 2016 with TouchBar. On the iMac I only use the volume control while on the TouchBar I have lots of useful shortcuts, I can pause a video on pirated streaming website without ads popping up and many more. I actually love it and I hate that developers don’t care about it. Looks like it has been somewhat flaky for a bunch of people. Some report that updates to macOS and Spotify solved it, others say that it didn't work for them. Apparently popping open Activity Monitor and killing the 'NowPlayingTouchUI' process and restarting Spotify is.

Giving the touch bar a little bit more of an identity.

The Spotify Touchbar

The Spotify touch bar is an app for the MacBook Pro touch bar. The purpose of the app is to allow the user to control the currently played Spotify song from the touch bar, negating the need for the Spotify desktop/web app to be used.

As this was a solo project , my roles were that of a researcher and designer.

The Problem

The Spotify touch bar for the MacBook is limited in its current form.

While functional, the application lacks the ability for the user to see the current song being played.

While there is a 'scrubber' that allows you to browse through the current song being played, there is no time indicator to show you how much time is left or how long the song actually is.

Mac Touch Bar Spotify

My redesign attempts to correct these issues.

Solution

• A timer that is common in all music apps, Spotify's native app included
• Addition of the current song's album cover
• Title of song
• Name of musician

I believe that visual aid is very important when it comes to enhancing a product's ease of use.

'Why is this app missing crucial information?'

The idea for these features came about one random night at a bar. I was ordering my usual gin and ginger when a song I was unfamiliar with began to blare over the speakers. Pulling out my phone, I used the ever-useful Shazam to search for the unfamiliar catchy tune. Later that night, once back home and on my MacBook, I pulled the song up on Spotify for a late-night listen. Using the touch bar to navigate between songs I realized that surprisingly enough, the touch bar app was missing key features. I then thought to myself, 'Why is this app missing crucial information?'

Once I did some research, as seen below, I decided to see what I could do to attempt to fix some of these issues.

Competitive Analysis between SpotMenu and the Spotify touchbar

Research

The biggest challenge with redesigning the touch bar app was that the bar was still pretty new and as a result of that not many apps using its features was present. This led to me looking at other apps that utilized Spotify as its main selling point.

Spotify Mac Miller

My research eventually led me to SpotMenu, an app for the menubar. While similar to the touch bar in its ability to control your Spotify song, they differ vastly in their methods. Using the menu bar as opposed to the touch bar gives SpotMenu significantly more space to showcase important information such as the artist, song name, album title, album art, etc; features that the touch bar variant is lacking or just outright missing.

I knew that when redesigning the touch bar, these are features that I wanted at the forefront.

Sketches

The sketches displayed were my brainstorming attempts to create a design that was in line with Apple's design philosophy while also utilizing Spotify's aesthetic. This leads to me creating multiple bars and various gauges with those two defining principles in mind.

I eventually ended up going with a design that uses the classic iPod progress bar as that invokes the feel of an Apple product; which I feel the current bar lacks.

Wireframes

After selecting my preferred sketch of the new design I began to style a wireframe. This was useful to do on the off chance that I would have to go back and make some adjustments on the current design. I ended up with a total of 5 frames, boasting the transitional phases of the app.

UI Design

Once I tested out all usability mistakes, I started designing the final screens in Adobe XD.

Spotify With Touch Bar Mac Os

The final version of the touch bar was an amalgamation of styles and features. For the font, I decided to stay in line with Apple's current style guide and used Helvetica and its many variants creating a homogeneous effect with the rest of the type the app would be encapsulated around.

Spotify Mac App Store

The colors used were kept the same from the original touch bar, rather adding Spotify's iconic green to the new progress bar highlighting it more on the touch bar.

Learning Points

Spotify With Touch Bar Mac Store

This was my first project dealing with the MacBook touch bar. 3 years after its release, the touch bar is still a product with very niche uses. This made it rather difficult to find other similar programs I could use for inspiration and research.

Spotify Mac Old Versions

That said it was quite refreshing to learn new design principles for the touch bar and to be at the forefront of, hopefully, a growing style of interaction with the latest MacBooks.