top of page

RIPPLE UX RESEARCH

LandingPageMockUp copy.png

Competitive Analysis

From my research I learned that Spotify is a hybrid app meaning it operates on multiple devices such as iPhone/Android/Computer. the objective of this app is to provides its users with the opportunity to enjoy the creativity of artist, as well as helping artist make money off of what they love to do. It has a popular social element of being able to share music with friends or on social media. Also another popular feature is being able to download music and listen to it while off-line. Some areas of improvement could be adding news, or weather updates. 

User Interview

To get a better idea of how to design my streaming service I interviewed a variety of people on what streaming service they used. When interviewing users I asked questions that gave me qualitative data so I knew the best way to design the app so it included the users favorite aspects of their current streaming app as well as avoiding the things that frustrate the user. The goal of this list of questions is to better understand the needs of the user and what they are looking for in an app. I would ask questions that gave me insight to their decision making so I can predict what will keep the user engaged with a easy and enjoyable experience.

User Flow

To research the user experience of Spotify, I mapped out the app in terms of a user flow. First a rough sketch, then used sketch to create a clean user flow map.

This is a good birds eye view visual representation that shows the features of the app and how to navigate through it.

SketchFlow.png

User Personas 

In this step we really get to know the people that we are designing for. We get to know them on a very personal level and can better understand their personalities, their likes and dislikes, as well as their issues with their current music app that way we can design something better suited for them.

Desktop HD Copy 3.png
Desktop HD Copy.png
Desktop HD.png

WIREFRAME

 This project is part two in the process of developing a music streaming app. With a set of user goals I developed a flow of the actions it takes to accomplish the goals. The goals set out for the user were,

  1. Log in to app/create an account

  2. Search for a song, album or artist

  3. Play, stop, pause, fast forward and rewind a song

  4. Create a playlist

  5. Add or remove a song from a playlist

  6. Share a song with a friend

  7. Add a song to a favorites list and access the list or edit it

  8. Browse new releases and top charts and add selections to a playlist

  9. Access song details to view an album

  10. Access profile to update username, email or contact info

  11. Sign out of the app

Untitled_Artwork 55.png

Low Fidelity Wireframes

From the napkin sketches I further developed the user flow into  low fidelity wireframes. These give a good overs view of the usability of the app. There isn't a whole lot of design in this stage, its primarily to test the functionality of the app and find any problems before adding more detail.

 

This flow is to search and add a song to a playlist. I wanted it to be as easy as possible to understand, trying to not overcomplicate the process.

4.png
4 c.png
4 a.png
4d.png
4 b.png
4 c copy.png

User Testing 

The best way to learn how to better develop a product is to test it with a variety of users. Through this process you can learn what needs to be changed so that its better for your target audience. So for the Ripple music app I did a round of user testing when I had my high fidelity version prototyped it out and had three users test it to see what needed to be changed. 

Example Questions

Did you experience any problems with accomplishing your task?

What aspects were confusing to you?

What, if any, were the enjoyable features?

Given the user feedback I made changes to the design of the app. Here I have a side by side view of the same screen before and after the user testing. The changes I made are the following.

version1.png

Another change that I made was another sizing issue with text. The mini player was difficult to read and needed to be enlarged 

version2.png

One of the things I was prompted to change based on the user testing was the view all button. The font was too small and needed to be resized  

The last one of my changes was to change the color of the bottom nav bar. It was brought to my attention that the black made it too flat. So I changed it to a blue that gave it a little more pop. Also I needed to add a active color so the user knew which page they were on.

bottom of page