UX

UI

Mobile App

iOS

Research

Usability Testing

Prototyping

groovemaps-thumb

Feature integration in an iOS app

Groove Maps mission is to connect fans with local live music events and communities. Partnered with another UX designer, my role was to research and discover how users prefer their chat experience. Then, design a new experience for group chat and explore the users' favorite chat features.

Responsibilities

Research, user interview, survey, UX, UI, interaction design, usability testing

Client
View Prototype

The Problem

Groove Maps users enjoy using the app to purchase tickets for concerts, however, they don't take advantage of the full potential of what the app has to offer which is exploration of new bands and genres. Also, the experience users have is isolated and they don't get to interact with other users.

As a music enthusiast, I recognized the potential as music and concerts is a great way for people to get together. At that point, I was excited to see how a chat feature will affect the overall experience users have while using the app.

Isolated Experience

Short User Engagement

Minimal App Exploration

Research

Research Goals

The goal of the initial research was to understand users' behavior, motivation, and context in order to learn what motivates them to go to concerts, explore new music, experience the group chat on a mobile app, as well as their favorite chat feature while actively chatting.

Mind Map

The first step was to create a Mind Map, a great tool to help visualizing the spaces and consider what's in and around them.

Landscape Analysis

Competitive/Comparative Analysis

By employing this research method I was able to understand our competitors and the standard chat behaviors people are used to in todays market. The apps analyzed: Songkick, Bandsintown, Jambase, Google Allo, Slack, Snapchat, Whats App, Skype, Reddit, Facebook Groups, and Instagram.

Interviews

User Interviews

The 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 the ages of 23 to 43 years old. We aimed to learn: How people discover concerts, how people interact in online communities, and valuable factors in chat experiences.

Interview Findings

Discovery Related Findings
All fans enjoy sharing new concert experiences with friends or other fans
Most of the fans relies on a variety of channels such as Facebook, blogs, and friends to find new shows
All fans are interested in finding more channels advertising new shows
Community Related Findings
75% of the fans are OK to meeting in real life with people they have chatted online with
87.5% of the fans relies on communities to discover more music-related information and wish hey had more channels to do so
All fans are concerned about potential uncomfortable meet up situations
Chat Related Findings
87.5% of the people enjoys using rich chat features such as Emojis, gifs, and exchanging photos
Two thirds of the users prefer fast and to-the-point chat experiences, while 25% are interested in spending longer periods and will take the time to explore music related topics

Data Synthesis

Affinity Mapping

In order to reveal users' needs, I gathered the documented insights from the interviews on a wall based on commonalities. The below personas are based on these commonalities.

Personas

Prototype

Visual style defined by user needs

At this point, my teammate and I implemented Design Studio practice, AKA Design Charette. We drew our ideas on paper simultaneously and in a timely manner, then shared our thoughts about the drafts we created. We had 2 goals in mind:

First Goal: Discovery of Communities

At this point, my teammate and I implemented Design Studio practice, AKA Design Charette. We drew our ideas on paper simultaneously and in a timely manner, then shared our thoughts about the drafts we created. We had 2 goals in mind:

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

At this point, my teammate and I implemented Design Studio practice, AKA Design Charette. We drew our ideas on paper simultaneously and in a timely manner, then shared our thoughts about the drafts we created. We had 2 goals in mind:

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 that journey?

Chat feed

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?

User Testing

Ideation & Testing

I relied on quantitative validation of the features we prioritized by analyzing stakeholders and user interviews to find trends and overlaps. I 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, I 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 chat room is where all the chit-chat happens, while the other chat rooms are there if I want to dive deeper into subjects.”
Gil [User#4] 34 years old

Results

Information Architecture & Taxonomy Validation

Validated that users not just understand but also prefer the structure hierarchy of the community pages, and enjoys the variety of genres.

Allowing users to feel connected

Validated that users enjoy feeling connected. They want to have the option to pick their own chatroom rather than an auto-join option when hitting a community page.

Users understand and enjoy interacting with the UI

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.

Crafting an intuitive experience

The simplicity of having one dedicated page for all filtering options is preferred by the users. This is also beneficial from the business and development standpoint since interface change is minimal.

New icon for 'Location & Genre' filter

I have noticed that some users had difficulty understanding the filter icon. By using both online and offline surveys, I found out that Filter icon A is the most intuitive and favorited by users.

'Create a Chatroom' icon changed

Some users had difficulties to complete the mission when they were asked to create a chatroom. Initially, the affordance was at the bottom of the screen, a position that was found to be quite problematic. I checked some alternatives such as making it sticky or placing it at the bottom of the chatroom list.. The usability test results showed that the proposed location works great, yet I discovered that the icon of the chat bubble with the word ‘new’ right next to it is unclear. I chose to go with an existing visual communication symbol - the ‘+’ sign (a symbol used in other icons throughout the app) then ran another round of testing. This time results proved a great success! 100% of the users clearly understood what the new icon conveys.

Invite & Share affordances made easy

The circle of users expand mostly through word-of-mouth, so my partner and I 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 more accessible and welcoming users 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 yet not disturb the flow.

'Flagging a member' done the right way

'Flag a member' feature is an integral part of a chat experience. I 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 in a chatroom and you've had enough of him/her. What would you do?”. I was pleased to see that all users stated the 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 that the flow works.