From Bagpipes to Mixtapes: Using Adobe XD to Design A Platform For Experimental Playlists

How one Adobe XD designer transformed a web-based music platform for bagpipe enthusiasts into a downloadable iOS app for experimental and creative music lovers.

Featured in Creativity
Unreel.fm features experimental mixtapes curated by artists from around the world.
From Bagpipes to Mixtapes: Using Adobe XD to Design A Platform For Experimental Playlists

As I write this, a mixtape called “Strut” plays through my speakers. It’s a collection of music curated by Toronto-based DJ Wes Parham that was built for Unreel.fm, a new music app designed by Adobe XD designer Gleren Meneghin using Adobe XD.

Gleren works in New York as a designer on the XD team working predominantly on the design systems that make XD possible. Created in collaboration with designer Jason Briscoe and junior engineer Jack Chorley, Unreel.fm is a passion project that recently launched on the App store. It features artfully curated playlists by musicians that are intended to take the listener on a journey while simultaneously introducing them to new music.

In a way, it’s a digital recreation of Gleren’s childhood drives with his father, who would pick up a new album from a different artist each week and play it for Gleren in the car on the way to school. It was important to his father, in their family of musicians, that Gleren be made aware of different types of music, and now Gleren is trying to do the same for the app’s users.

“My dad is a music teacher and was always every week coming up with something drastically different to make sure I was open to every side of music. I would say our main users are people who have a definite ear for music, but also people who just want to listen to something different and feel something different than they experience or hear everywhere,” Gleren said.

Collaborating with a rival

Gleren is originally from France, but spent a good portion of his life living in Scotland and other parts of the world playing drums in a bagpipe band, his talent recognized on an international level. He met Jason in London, where both were living at the time. Jason played in a rival bagpipe band, but their shared enthusiasm for bagpipe music would allow them to become trusted collaborators as they began sharing their favorite tracks with one another.

Before the app became Unreel.fm, it was first a web-based hub for bagpipe and Celtic music with a twist — which is to say that it was bagpipe music fused with other genres like electronica and acoustic guitar. It was a niche community that loved this specific type of experimentation in music, but after two years the designers were ready to diversify their offering.

“Sometimes you’re into your product and you’re like, I think it’s time to do something a little bit different,” Gleren said. “I think we’ve always wanted to do a mobile app and we found out we had to open it up to different styles of music rather than just doing bagpipe music.”

It was time for Gleren to channel those early music lessons from his father. One of the first people he reached out to on contributing musically was Wes, who, in addition to “Strut,” has a number of mixtapes available exclusively on the platform.

“When we presented the idea to him, one of the first things he said was, ‘Let’s not just put tracks together, let’s just put like ten tracks that tell a story behind it,’” Gleren said.

This conversation shifted the approach to the project, and now all the playlists are intentionally created with a story in mind for the listener, one that takes “the listener into a specific journey rather than just track after track,” Gleren said.

The team is working with additional DJs and musicians to build future mixtapes. To date, new mixtapes tend to drop every two weeks, give or take.

“What we want is two things. One is having people listen to something that is different than what they’re used to and for an hour, kind of go through something very specific like going through something calm or peaceful or energetic, kind of like an experience,” Gleren said. “We also want to empower our DJs and how good they are at picking the right track at the right time and telling a story, so we are partnering with DJs that are very different. Wes is the first one. He is more into jazz and funk, so a lot of playlists right now are into like pop music, jazz music. We are also partnering with a South American DJ that is more instrumental.”

 

Broken grids for a better UX

At Adobe XD, Gleren’s work focuses on building experiences that allow other designers and creatives to build their own experiences. He’s prone to adding “something pretty inside his mock-ups,” as he puts it, and wanted to build out something more visual on his own.

“I knew that I had that side project going on already, which was a website. One day, I wanted to explore what could this project be in a mobile app and also play around with XD to see if it was a good tool to use,” he said.

He designed the app on a broken-grid system. Broken-grid designs alternate between different alignments to offset the overall design while taking advantage of the white space surrounding the objects. The simplicity behind it is intentional, allowing Unreel.fm users to easily and immediately access the music, the app’s main feature.

“You open the app and you listen to it right away. I think that’s what we wanted out of anything. The design challenge was making it as simple as possible and removing the UI to just focus on the music. That’s what we wanted to do,” Gleren said.

As a designer, this provided an opportunity for Gleren to explore a style of design he wasn’t as experienced with.

Since the app is simple — consisting of a main screen that features the mixtapes, a middle screen that shows you what songs are in the playlist and what is playing right now, and a third screen with account settings — designing on a broken grid made sense. The music is the core component of the application and anything too busy would detract, or distract, from that, so they wanted it to be void of the square designs and typical navigation menus many users are used to on social media platforms like Instagram and Facebook. They wanted to strip it down on their own terms.

“Doing this type of project gives you a chance to explore and do different things that you wouldn’t do in your day job with less constraint — a lower budget, but less constraint. It’s not so much about doing something for the sake of doing it, but trying to do something where we would just have fun doing it and that feels different,” Gleren said.

“Every mixtape has a different size in terms of key measurements, which makes the actual experience a bit more vibrant and different than any other apps I have experienced.”

To power the mixtapes, the app was built using Spotify and Apple Music APIs. Users must also have a paid Spotify or Apple Music account to access the mixtapes. This is to ensure artists are rewarded for making “the good stuff they do,” as Gleren said. In the future, the team plans to expand Unreel.fm to Android and possibly a web-based platform as well, while also continuing to finesse the iOS product.

 

Side projects give UX designers an opportunity to experiment

Although Gleren works on Adobe XD day-in and day-out, designing his own app using the technology was a different experience. He hopes by sharing his story, other designers may be inspired to use the tools they’re already using, or perhaps explore new tools for the first time, to challenge their design processes and learn a thing or two along the way.

“I think that as a designer in XD, I really wanted to have a side project using the tools I designed every day. I think that’s a designer’s dream, right? To be able to create a tool every day that helps you create designs, websites, and mobile apps,” Gleren said.

“I’m very happy to have been able to do that, and I hope both the music app and Adobe XD will empower people to do the same.”

For more UX insights sent straight to your inbox, sign up for Adobe’s experience design newsletter

 

Adobe XD

Design. Prototype. Share. All in Adobe XD for FREE. Go from idea to prototype faster with Adobe XD, the first all-in-one tool for creating and sharing website and mobile app designs.

Download Now Learn More

Recommended Articles