Redesigning my first prototype

My favorite thing about design is that it’s never finished. There is always something to improve and update as the users’ needs change. That’s why I was so excited to redesign my first HiFi prototype after user testing.

Let’s get right into it:

Entry Point

Previously, one way to start this music discovery experience was to tap on the discover button underneath the cover art. That, along with the number next to it, created confusion. I decided to remove it and use the Discover button on the menu as the only way to start this experience. It’s now more intuitive to access this feature as users don’t have to tap on a song and tap the discover button to begin their music discovery anymore.

Two Ways of Discovery

Some users mentioned how it would be challenging to swipe through songs if more than 20 songs were being listened to around them. I thought it was a great insight, so I wanted to create a way to solve that problem. When you click on the discover button, the app detects where you are and creates a playlist consisting of the songs. You can shuffle the songs or enter the card mode by tapping on the song.

New Design for Song Cards

Many users didn’t notice the distance indicator in the previous version of this prototype. It was also very unclear what that meant. So I created this hierarchy where the feet indicator stayed on top but added a text that says “Somebody is listening to” above the song. That way, it became easier to connect the music and the radius.

I also removed the number as it was confusing for the user. I removed the extra box around the song to make the design more straightforward and elegant. I included the three dots “more” button underneath the heart for quick access to other song-related features like “View Artist,” “View Album,” “Share,” etc.

Adjusting the Radius

One of the comments I received from my users was what would happen if they ran out of songs in a given radius.

I added this feature which appears when there are no songs to display in a given radius and allows users to increase their radius based on their preferences.

The app will then starts displaying more songs within the new radius.

Homepage Reminders

In the previous design, users wondered why this particular place was shown on the homepage and whether they could see other areas as well.
I heard them and came up with this concept called “Places of Discovery,” where the places you discovered new songs are collected. By tapping on the title, you can see all your music discovery places and how many songs you discovered there.

Place of Discovery Interface

When you click on a place, you are shown the songs you discovered with their respected dates. I also included a shuffle button to listen to the songs from that location quickly.

Closing the Loop

Users had lots of feedback for the screen where the app reminds them of the location and time they discovered the particular song they’re currently listening to. Instead of covering some part of the cover art, I now included the discovery icon next to the “add to queue” button. This icon indicated that the song was discovered using the music discovery feature. It gives more details on where and when this song was found when the user clicks on it.

During my user testing, the users found it nice to see the photo of the place, yet it wasn’t very visible in the first version. Therefore, I placed it on top.

You will notice that I included a Street View feature (that shows the street view of the place around the time of discovery using Google Maps API). My later user testing and interviews showed me that the map alone doesn’t spark any emotions or memories (videos came first, followed by the photos). I asked people to think of a time and place where they felt “alive” and asked them to drop a pin on maps to see the street view of that place. When they were in that place, some people’s eyes got watery, some started laughing, and some just started to think in silence. People recalled their memories and showed emotion. So I decided to include a street map feature that would teleport the user to that place to look around if they wanted to. I also included photos of the day to aid memory recall.

That’s all for now; the next step is to test it again and get more user feedback to improve it further. See you next time!!

--

--

--

mfa candidate @svaixd, experience design @gallagher, psychology alumn @whitman, portfolio: gokayabaci.com

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

A Gift to a Designer? Easy!

How I Structure my work in Figma

Redesigning the future of public transport: Service Design case study (Part 5)

Perfect Client Partnership Tips

Stay focused… on the small bets.

How to make a convenient website

3 types of workshop questions

Coincidence and String Theory

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Gökay Abacı's Thesis Blog

Gökay Abacı's Thesis Blog

mfa candidate @svaixd, experience design @gallagher, psychology alumn @whitman, portfolio: gokayabaci.com

More from Medium

Comments on Rainbow Six Siege Design Team AMA

Designing for Understanding: Bechdel Test

Basics of XR/AR/VR