top of page

Surround

A school project exploring a social music listening application.

iphone x light copy.png
iphone x light copy 2.png
iphone x light copy 3.png

About

Interaction Design Class Project

Role

I worked on this project completely by myself, from concept to design and iteration years later.

Background

In my interaction design class, we were challenged with creating a music application that could be anything from updating the existing music app or coming up with our own concept. Part of the design challenge was also to explore the interaction elements and create a prototype to demonstrate it.

I came up with the idea for Surround based on my personal experience listening to music with my friends both near and far. I loved the social aspect of sharing the same listening experience, but found that it never felt as collaborative as I wanted it to be.

Personas

Although I wouldn't recommend it, my friends and I became the initial audience for this concept. A group of friends who listen to music together as a way of bonding. But later on, I realized that Surround would also be a really nice concept for long distance relationships, friendships, and family.

“Can I connect my
phone to the speakers after? I found this song you might like!”

Friends with Devices

Problem statement

How might I bring people closer together through a shared music experience?

Preliminary Research

I spent a lot of time researching the existing music applications that were already out there because I wanted to create something new. I downloaded a bunch of music applications such as Spotify, Pandora, Soundcloud, Youtube Music, and iTunes.​ I explored their experiences and primarily focused on how they could be used socially.

I also informally interviewed several of my friends while we happened to be in the setting that I was trying to target. I learned when and why they would listen to music with others. I found that what was missing in the current music app market was to bring music to the center of the conversation rather than just being in the background.

IMG_8033 (2)_edited_edited_edited.png
iphone x light copy.png

Wireframes

I began to sketch a bunch of ideas and layouts. I wanted my design to be as simple and straightforward as possible so that it wouldn't distract from the function, but I also wanted it to be delightful and fun to use.

Once I landed on a design direction from my sketches, I took it into Illustrator and started creating all the states I needed.

Prototyping

Because I didn't have any prototyping tool access at this point, I had to get very creative. I decided to explore using PowerPoint as a prototyping tool because I knew there were some fun transitions and animations that you could use, but I just had to fake it a little because of the lack of hot spots.

Iteration

I finished this project while I was still in school (2015), but still loved the idea of the application, so I thought it would be a fun opportunity to see how drastically my design style has changed over the last couple years.

Ideally, I would have loved to do some user testing on the existing app design, but because it was so out of date, I decided to just give myself a constraint of a few hours and  update the design style.

Outcome

Overall, this was such a fun class project and personal project just to iterate on. It's really fun exploring other topics that aren't in my day to day life at work and that go along with my personal interests as well.

Surround.png
iphone x light copy 3.png
iphone x light copy 2.png
bottom of page