Apple Music is Apple’s first foray into the world of streaming music. I fashioned together the Apple Music experience on the web, touched the surface of social sharing, and helped improve the mobile experience through motion design and prototyping.
Sharing across the web is not known to be Apple’s forté. With the introduction of Apple Music Connect, we wanted to change that. Artists could easily share their music and connect with their avid listeners for the first time using the Apple ecosystem. We revisited the existing web post pages to bring all the new ways an artist could share to the web.
Next, we needed a way to share artist content outside of the Apple website. The Apple Music Web Player was our answer. It was designed to allow blogs and and artists share their social content across the web. We wanted to create a way to fully represent the artist’s identity within the player. Using the artist’s artwork, we created an effect that blurred the background with a subtle sample color overlay. We built a prototype that used a variety of artists and artwork, and we eventually discovered a sweet spot where this technique consistently looked good. We also gave the sharer the option to change the treatment of the effect, to help match the frame where the content would be shared.
Once we fully prototyped the player, it was time to build it. I sat with the developers of the team, and talked through their needs. We exchanged ideas back and forth, and eventually I built a CSS spec that was easy to understand and could produce exactly what we wanted.
Lastly, I played the role of prototyper for a variety of iOS and iTunes designs. Prototyping ended up being a massive asset in finding what we wanted and what we didn’t want on the iOS app. It allowed us to change ideas quickly, and discover new ideas before going to the engineering team. We used a variety of tools to get the job done: Apple’s internal prototyping software, Keynote, HTML/CSS/JS, Swift, and After Effects. The following is a small selection of screens are contain interaction that I prototyped.