Groove Maps is a live music events startup. Their mission is to connect fans to local live music events and communities. Partnered with another UX designer, our role was to design a new experience for group chat and explore the users favorite chat features.
The stakeholders vision is to transform the app from passive to interactive experience. Users can find local live shows around them, discover, and connect through chat with people who shares the same music interest.
- Research & Analysis
- User interviews
- Wireframes & Prototype
- Information Architecture
- User testing & Iterations
- High fidelity mock-ups
Sketch, Photoshop, KeyNote, Invision, pen & paper.
Our first step was to create a Mind Map. It helped us visualize and understand how our next few steps should look like:
By employing this research method we were able to understand our competitors and the standard chat behaviors people are used to in todays market. The apps we've researched were: Songkick, Bandsintown, Jambase, Google Allo, Slack, Snapchat, Whats App, Skype, Reddit, Facebook Groups, and Instagram.
In order to better understand these competitors, we divided the market into 4 sections: Concert discovery focused apps, chat apps, community focused apps, and chat as a supporting feature. Then, we examined actions and behaviors like 1 on 1 chat, group chat, private vs public chat, media support such as video, and hashtags.
Our target was to gather information from users between 18-29 years old attending 6+ concerts per year, and 30-45 years old users who attend 3+ concerts per year. We conducted 8 user interviews with people from 23 to 43 years old. Our goals were to learn: How people discover concerts, how people interact in online communities, and valuable factors in chat experiences.
All fans enjoy sharing new concert experiences with friends or other fans
87.5% of the fans relies on a variety of channels (Facebook, blogs, friends) to find new shows
All fans are interested in finding more channels advertising new shows
75% of the fans are open to meeting up with others from online communities
87.5% of the fans rely on communities mostly for information gathering
All fans are concerned about potential uncomfortable meet up situations
87.5% of the people enjoys using rich chat features such as Emojis, gifs, and exchanging photos
75% of the users prefer fast and to-the-point chat experience, while 25% are interested in spending longer periods, exploring music related topics
The best type of synthesis for this mission was Affinity Mapping in order to reveal the user needs. We documented our insights from the interviews, then combined them on a wall based on commonalities. Our findings lead us to the creation of our Personas.
Shares and receives music recommendations
Dislikes awkward meet ups with online community members
Wants a feature-rich chat experience to show his enthusiasm
Checks online sources for music recommendations
Fears uncomfortable meet ups with online community members
Prefers a simpler chat for fast and easy communication
My partner and I created a list of 22 jobs stories that covers chat and community areas. We were attentive to the discomfort, enjoyment, needs and goals of our personas by focusing on the 4 most important job stories, based on the feedback we’ve received from our users:
When I chat, I want to know who I’m chatting with so I can feel safe.
When I chat, I want to use chat features so I can express myself in lively, fun way.
When I chat, I want to be able to easily search so I can find relevant information quickly.
When I join a community, I want to make sure they have similar taste so I can learn about artists, genres and venues that I will like.
At this point, my teammate and I concluded that we’ve collected enough data to fire off the Design Charrette. We drew our ideas on paper simultaneously and under a timely manner, then shared our thoughts about the drafts that we've created. We've had 2 goals in mind:
We wanted to explore what route users prefer to take, from exploring the available communities screen to actively chatting in a specific chatroom:
Will the user be able to understand what communities are all about, and also understand the filtering system?
What would be the most effective affordance to be used by the users?
Should a community foster numerous chatrooms or just be a standalone generic chatroom?
We were interested to know more about feature related behaviors of users in chatrooms:
Will users understand how to incorporate a chat feature into the chat feed such as uploading an image or send an emoji?
Incorporating a chat feature sometimes involved taking several steps. Are users ok with taking the necessary steps?
What would users do in case they need to look up a detail from a past chat? Would he/she know where to look?
What's the expected behavior for flagging a member?
We relied on quantitative validation of the features we prioritized by analyzing stakeholders and user interviews to find trends and overlaps. We still used qualitative judgement to inform some of our decisions particularly in respect to user interface.
The User Testing stage consisted of 3 offline rounds and 1 online survey. After each round, we went back to the drawing board in order to incorporate the data received from our users. Each round uncovered new discoveries and insights, and also validated what went well in our suggested solutions. We presented the users with mostly non-leading, open ended-questions. for specific scenarios, we did not want to affect the users decision-making process through the ways we present the scenarios. The other leading questions that we've asked our users were designed to examine how they respond to such situations.
I enjoyed listening and empathizing with the users as I am always interested in understanding their thought processes while paying close attention to the underlying non-verbal communication.
Users enjoy the experience of choosing a community, then having the freedom to choose which chatroom they like to explore based on their interests and the time they wish to devote. This is how our goals were met:
Validated that users understand the community pages system, and enjoys the variety of genres.
Users feel content when having the option to pick their own chatroom rather than an auto-join option when hitting a community page.
Users feels right about placing the chat feature on bottom left side of the screen as they are very familiar with it from other chat platforms.
The simplicity of having one dedicated page for all filtering options is preferred by the users. This option is beneficial for the developers as well since they will not have to change the interface in the future when another filter will come into play.
We have noticed that some users were having difficulty understanding the filter icon. By using both online and offline survey, we found out that Filter icon A is the most intuitive by the users.
We have noticed that some users were having difficulties complete the mission when they were asked to create a chatroom. The affordance was initially at the bottom of the page, quite a problematic place. We asked; Should it be sticky? Should it be at the bottom of the chatrooms list? We tried to solve it by placing the affordance at the chatroom header, then tested it with users once again. The results revealed that the new location works great, yet the affordance Chat bubble with the word ‘new’ right next to it - is unclear. We chose to go with an existing visual communication symbol - the ‘+’ sign (a symbol used in other icons throughout the app) then took it to another round of testing. This time results proved a great success! All users clearly understood what '+New' symbol conveys.
As per our stakeholders, the circle of users expands mostly through word-of-mouth, so we brainstormed in order to find the best ways to intensify this aspect. We placed the Share and Invite affordances at a top priority place, so it will be easier and more visible for the user to use it. Through user tests we confirmed that users find it easy to be used, and the location of these affordances feels right and not intrusive.
'Flag a member' feature is an integral part of a chat experience. We wanted to see if users were able to understand how to flag a member. They were tasked with open ended questions such as “a user misbehaves and you want to flag him. What would you do?”. We were pleased to see that all users stated the exact same answer; They want to report the misbehaving user to the system first, then have the choice to either mute the flagged users messages or completely remove their communications from their chat experience. We happily implemented these options, then reconfirmed with users once again.
Reorder the app bar icons since the app is more community based now. Profile icon should not be placed on far right but at a more prominent place such as first one from the left.
Further user-testing should be conducted around the wording follow, favorite, and join. These words has different connotations that are tied with the screens they are located on.
Integrate live streaming so fans can watch shows together
Add precise location sharing so users can meet up
More robust Privacy Settings
More moderator-curated recommendations for communities (new music, other communities, “influential” users)
Show a user’s own communities on their homepage
Reuse filtering design pattern for any additional filtering functionality
You Made It! See More Projects Here: