p5-parallax.jpg
20170301_114913.jpg
p5datasynthesis-parallax.jpg
20170418_175202.jpg
p5-parallax.jpg

1. Parallax


GROOVE MAPS

SCROLL DOWN

1. Parallax


GROOVE MAPS

PROJECT OVERVIEW

 

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.

groovemaps-logo.png
 
 
 

 

HIGH FIDELITY INTERACTIVE PROTOTYPES

 
 

 
 

My role

- Research & Analysis
- User interviews
- Wireframes & Prototype
- Information Architecture
- User testing & Iterations
- High fidelity mock-ups

Tools

Sketch, Photoshop, KeyNote, Invision, pen & paper.

 

Timeframe

11 days

 

 

COMPREHENSIVE RESEARCH

 

Our first step was to create a Mind Map. It helped us visualize and understand how our next few steps should look like:

20170414_123952bw.jpg

 

COMPETITIVE/COMPARATIVE ANALYSIS

 

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.

researchcompetitors.jpg

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


 

USER INTERVIEWS

 

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 concertshow people interact in online communities, and valuable factors in chat experiences.

20170301_114913.jpg

3. user interview takeaways


3. user interview takeaways


INTERVIEW FINDINGS

 

DISCOVERY RELATED

graphs100.png

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

 

COMMUNITY RELATED

7525.png

75% of the fans are open to meeting up with others from online communities

8813.png

87.5% of the fans rely on communities mostly for information gathering

All fans are concerned about potential uncomfortable meet up situations

 

CHAT RELATED

100.png

87.5% of the people enjoys using rich chat features such as Emojis, gifs, and exchanging photos

8813.png

75% of the users prefer fast and to-the-point chat experience, while 25% are interested in spending longer periods, exploring music related topics


p5datasynthesis-parallax.jpg

4. Synthesis


4. Synthesis


DATA SYNTHESIS

 

AFFINITY MAPPING

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.

 

PERSONAS

PRIMARY PERSONA: BOBBY (25 YEARS OLD)

Shares and receives music recommendations

Dislikes awkward meet ups with online community members

Wants a feature-rich chat experience to show his enthusiasm

SECONDARY PERSONA: MARSHA (34 YEARS OLD)

Checks online sources for music recommendations

Fears uncomfortable meet ups with online community members

Prefers a simpler chat for fast and easy communication


 

EMPATHIZING WITH PERSONAS THROUGH JOB STORIES

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.


20170418_175202.jpg

5. Sketching User Testing


5. Sketching User Testing


SKETCHING

 

DESIGN STUDIO

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:

 

FIRST GOAL: DISCOVERY OF COMMUNITIES

We wanted to explore what route users prefer to take, from exploring the available communities screen to actively chatting in a specific chatroom:

sketches-comm.jpg

Communities

Will the user be able to understand what communities are all about, and also understand the filtering system?

Communities + menu

What would be the most effective affordance to be used by the users?

Community Page

Should a community foster numerous chatrooms or just be a standalone generic chatroom?

 

SECOND GOAL: CHAT FEATURE INTEGRATION

We were interested to know more about feature related behaviors of users in chatrooms:

sketches-chat2.png

chat feature icon minimized

Will users understand how to incorporate a chat feature into the chat feed such as uploading an image or send an emoji?

chat feature icon expanded

Incorporating a chat feature sometimes involved taking several steps. Are users ok with taking the necessary steps?

Chat

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?


 

IDEATION & USER TESTING

 

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.

 
 
The general chatroom is where all the chit-chat happens, while the other chatrooms are there if I want to dive deeper into subjects
— Gil [User#4] 34 years old, male
 

 

RESULTS

 

GOALS MET!

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:

1. Communities pages

Validated that users understand the community pages system, and enjoys the variety of genres.

2. Community page

Users feel content when having the option to pick their own chatroom rather than an auto-join option when hitting a community page.

3. chat feature

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.

4. genre & location filters

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.


 

ITERATIONS OF HIGH FIDELITY MOCKUPS

 
iterations1.jpg
p5-iterations2.png

new icon for 'LOCATION AND GENRE FILTER'

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.

'CREATE A CHATROOM' ICON changed

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.

 
iterations1.png
iterations2.png

INVITE & SHARE made easy

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', the right way

'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.


 

FUTURE UPGRADES

 
  • 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.

 

 

FUNCTIONALITIES to be considered

  • 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

 
 

  • Photographs used in Groove Maps screens were photographed by me, and can be found at ZoharLindenbaum.com

 

You Made It! See More Projects Here: