Grooveshark was a web-based music streaming service that allowed users to upload and stream digital audio files and organize them into playlists. The website featured a search engine, music streaming features, and a music recommendation system.
The owners of Grooveshark were interested in implementing a new chat feature. This case study outlines the process and activities done to create a clickable prototype.
At the conclusion of the project, my team’s design and implementation were selected by the Grooveshark UX team to be implemented into the product.
Lead UX Designer
Conducted Focus Groups
Sketched Storyboards
Created Wireframes
Created Clickable Prototype
Created Script and Voiceover for Concept Video
Illustrator
Photoshop
Balsamiq
iMovie
Garageband
Invision
Grooveshark was a web-based music streaming service that allowed users to upload and stream digital audio files and organize them into playlists. The website featured a search engine, music streaming features, and a music recommendation system.
The owners of Grooveshark were interested in implementing a new chat feature. This case study outlines the process and activities done to create a clickable prototype.
At the conclusion of the project, my team’s design and implementation were selected by the Grooveshark UX team to be implemented into the product.
Illustrator
Photoshop
Balsamiq
iMovie
Garageband
Invision
Lead UX Designer
Conducted Focus Groups
Sketched Storyboards
Created Wireframes
Created Clickable Prototype
Created Script and Voiceover for Concept Video
Recruitment was done to target two types of users; Expert and Novice
Experts - could provide a more knowledgable and contextual insight into the product needs based on extensive usage. They could also identify possible improvements to existing communication functionality.
Novices - could provide insights based on their previous experiences with competitive services and anticipate how those services’ features could be implemented with Grooveshark.
**prior to asking the questions, the participants used Grooveshark for 15 minutes to get familiar with the application
The team wanted to create a new chat design based on user needs.
Therefore, the first phase of the project was to conduct user research in an effort to understand the context of use and identify possible breakdowns or opportunities that currently exist.
The goal of the next phase was to take the learnings from the research and translate them into a list of implementable features for client feedback.
Due to the scope of this project, the top four needs were selected for further development based on feasibility and importance to the users in the focus group.
Finally, three scenarios were generated to explain how the new features would be used in context. Subsequently, storyboards were created to illustrate each scenario.
Next, I led the team in ideation sessions to generate ideas that translated the user needs into desirable chat features for each persona
Two personas were developed representing fictional characters with archetypical user characteristics, based on our user research.
DAY IN THE LIFE
Abi is a student at Santa Clara University. She is currently working to get her MBA. She enjoys playing the violin during her spare time. Due to the demanding nature of her studies, Abi spends most of her time studying. Recently one of her friends told her about Grooveshark. As a result she has started listening to Grooveshark while studying. Abi mainly uses Grooveshark when she wants to hear new music. While viewing a broadcast Abi mainly watches others chat. If a song comes on that she really likes, she will occasionally commend the broadcaster. Since Abi is often studying while listening to Grooveshark it is difficult for her keep track of fast paced conversations in the chat window.
Age: 24
Profession: Grad Student
Ethnicity: Chinese
Hometown: Santa Clara, CA
Music Preference
Favorite Genre: Electronic
Favorite Artist: Komeda
Age: 27
Profession: Target District Manager
Ethnicity: African-American
Hometown: Savannah, GA
DAY IN THE LIFE
Mark loves socialize with people. People like being around Mark. In result he has many associates that he occasionally hangs out with. Mark and his friends like spending time listening to each other’s broadcast’s on Grooveshark in the evenings after work. He has over 5000 songs in his collection that span a wide variety of genres. Mark prefers to play alternative rock music when he broadcasts. When interacting with other users on Grooveshark Mark likes to be entertaining. He often tells jo es resulting in a room full of ‘LOLs’. When Mark sees his friends online he often uses other forms of technology (text, google chat, etc) to communicate directly with them.
Music Preference
Favorite Genre: Alt. Rock
Favorite Artist: My Chemical Romance
Have more control over broadcast chat experience
Provide feedback during broadcast chat
Communicate with users that are not in their community
Communicate directly with other users
During the ideation sessions, numerous ideas were generated. The list of features was prioritized to keep the design as simple as possible. After further iteration, the key features emerged:
The enhanced interactivity included the ability to like, comment, mute/hide users, toggle the view of muted users, and search by hashtag.
The group tried to refrain from making the design overly complex with the new chat. Once the list of features was completed, the key features were selected and the scenarios and storyboards were formulated.
Afterward, wireframes were designed and iterated to keep the simplicity of each feature. The group focused on the seamless integration of the new chat features into Grooveshark’s current design.
Communicate w/ Non-followers
Allows user to chat with a non-follower
Share Rich Content
Allows user to share pictures with their friends via chat
Font & Color Customization
Allows user to change the color and size of chat window font
Hide Users
Allows user to hide the comments of a specific user in the broadcast chat.
Direct Messaging
Allows user to communicate with friends in a private chat outside the broadcast.
Messages by Interest
Allows user to leverage hashtags to quickly filter/access conversations by topic of interest
The following were created for each of the 3 scenarios:
Task Flow Diagram
Storyboard
Wireframes
Mark has been very stressed lately after driving to several stores. His stores are getting ready for the holidays, so his working hours have been very long and tedious. When he gets home he just wants to talk to his friends and listen to music. He uses it as a form of relaxation. However, he just wants to talk to certain people and not everybody. Therefore, when he gets to his computer, he logs in into his Grooveshark account and sees who is online in the community pane on the right hand side. He hovers over his friend’s name in the pane and a short menu appears with the options of play a station, suggest song, and chat. Mark clicks on the chat button and a chat overlay appears. Mark is able to talk to his friend while listening to the music he prefers and shares it with his friend. Now he is able to relax and have fun with his friend.
Mark is fun, spontaneous and loves to socialize. When he is listening to music and broadcasting, he talks to his friends. However, he also welcomes people who would like to talk to him even if he does not know them. Therefore, when he is back from his tedious job and he is on his Grooveshark account listening to music and talking to his friends, he checks his notification icon on top-right of Grooveshark. When he sees a number indicating the amount of notifications, he clicks on accept to chat with the person. People find him by searching his name or by listening to his broadcasts. Once Mark accepts the person’s chat request, another chat pop-ups on his current page next to the other chat windows.
“Abi is done with classes for the day, but she still have a lot of studying to do for her upcoming exam. After getting home from a hectic day, she decides to settle down and listen to Grooveshark while she looks over her notes. She puts on her headphones, navigates to the electronic station and learn as much information from her lecture notes in a short amount of time. When one of Abi’s favorite songs starts playing she takes a look at the chat the view the conversation. One of the users mentioned some interesting information about the artist of the song currently being played. To show her approval she clicks the comment’s like button. After watching the chat a while longer Abi gets annoyed with one of the users. Abi decides to ignore the user’s messages by clicking the hide button. She also notices a current conversation going on with the hashtag ‘#EDC2015’. To help her focus in on the conversation she clic s the hashtag to filter the conversation to only show messages with the hashtag”
The client was pleased with the features and the integration ideas. Although the ability to filter messages was a need that came out of the user research and was rated positively by peers, the client had some constructive criticism about the feature. The only constructive criticism about the mid-point design suggested that although hashtag filtering may be a cool feature, it would be better served in a later version of the product. The group agreed, and decided to remove this feature in the next iteration. This can be seem in the final design solution.
After taking the comments from the client into consideration and making changes to the wireframe the interactive prototype was built. The interactive prototype focused the three key features.
The way users currently use Grooveshark was taken into consideration when integrating each of these features. An example of this can be seen through the direct messaging interaction.
To start a chat users can click chat. This brings up a chat box towards the bottom of the site. The chat box design was inspired by existing chat applications such as Google Hangout and Facebook. The aim of the chat box design is to allow users to chat while maintaining easy access to Grooveshark’s content. To assist with this, users can maximize or minimize the chat by clicking the bar at the top. When the chat is maximized the region of the bar containing the users name does not minimize the chat when clicked. This was done with the future consideration in mind of clicking the username to navigate to a user’s profile.
The direct messaging feature includes the ability to add friends to a chat. The interactive prototype represents this by giving users the ability to bring up an “add a friend” dialog box. This can be done by pressing the add friend icon towards the top of the direct messaging box.
After clicking the image button, a dialog box shows that photos can be dragged in or selected from a file saved on the computer.
In addition to direct messaging a friend, the prototype highlights receiving a chat request from someone outside the user’s current friend list. The ability to turn off this functionality is also included as a feature.
Grooveshark settings already includes a privacy settings area that could be used to manage this feature. In the interactive prototype a non-follower chat request shows up as a notification. A user can view this notification by clicking the notification icon. Afterwards the user clicks accept to begin chatting with the user. This chat works exactly as the direct message feature mentioned earlier.
The final key feature highlighted in the prototype is enhanced interactivity. Users can navigate to the enhanced interactivity features by clicking the broadcast button. Once in the broadcast users can like messages, block users, or upload photos. Hidden messages can be shown again by activating the settings icon located in the lower right corner of the broadcast chat. By selecting the Show Hidden User option users can display messages that were previously hidden.
A few items were not included in the interactive prototype. One interaction is the process of requesting to chat with a non- follower. This was overlooked in the earlier phases of the design process. It is the group’s suggestion that users be able to request a chat session wherever a user can request to follow another user. Based on Grooveshark’s ecosystem and UI, the Chat Request button can be next to the Follow button. Another item overlooked was the ability to view archived messages. A suggestion for future work would be to include an area designated for messages such as an inbox or message center. This would allow users to retrieve archived messages when desired. This was mentioned by one of the focus group participants but was not identified as a vital need therefore it is not included in the final design.
“ Good to see Chat Requests coming in as Notifications in the existing notification system. “
“ Very good touch that you included Likes in chat. Our users have requested it, and in general, we also think it’s a good decision - services that use Likes in chat have alot fewer people filling up space with empty “lols” since they can use likes instead (think: GroupMe vs. SMS) ”
“ Ability to mute is good, and the fact that you included a way to show they previously-muted users is even better! “
Check out the clickable prototype built with Invision Studio...
