Groove App

Role

This was the final project I worked on at Ironhack Miami. This project was special because it was the first time we would be working with actual stakeholders. We were given two weeks to complete our project using the double diamond design process.

Overview

For this project, I was given the task of creating a heat map with the following features:

· A visual indication of which venues (bars, clubs, etc.) are currently busy

· A visual indication that friends are at a venue without using numbers or personal identifying information (like an icon)

· An easily recognizable privacy button to disappear from other users

· A sliding showcase of venues at bottom of screen that populate based off zooming in/out

· An info page with the venue’s hours, visual indication of how busy it is and popular times and who’s there (both friends and non-friends with different visual indicators)

Tools

Figma, Miro

The Client

  • Groove App

  • Created by Vanessa Koliver and Victoria Hickam

  • Mobile nightlife app that includes a private community of people 

  • You’re able to connect with your friends in real life and face to face.

  • Discover new spot 

  • Host your own parties

  • Skip long lines with a Groove Pass

Discover

 

Lean UX Canvas

This is a living document that is used to brainstorm ideas about the business needs and the outcomes. The Lean UX Canvas highlights the current issues from both the customer and business point of view and also highlight potential opportunities.

 

Competitive Feature Analysis

In order to understand the current market and our competitors, I put together a competitive feature analysis that compares different nightlife apps and the features they offer.

 

Market Positioning Chart

After completing our feature comparison I began to chart the different apps based on minimum vs maximum features and user friendly or non user friendly categories. As you can see there was a blue ocean in the data which is an area of opportunity in the market that can potentially differentiate you from competitors in the area between being user friendly and heavy features.

User Research

During my research I was able to collect 30 surveys and conduct 3 user interviews. This information helped me gain a better insight into the users experience in the night life.

Based on the information gathered:

Qualitative Data

“I really enjoy engaging with people face to face.”

“I want to be around people that are interested in the same things I’m interested in.”

“If I go to a lounge I want to see how the atmosphere is. So I’ll look at the ratings and see what other people thought about it.”

“I’ll walk by and look at the menu. If it has something on there that seems appealing to me, then I’ll go there.”

Quantitative Data

33.3% are only somewhat familiar with the nightlife in their area.

56.7% are comfortable sharing their location with friends.

48.3% believe that their biggest challenge when meeting people is because they are intimidated or shy.

60.7% prefer to meet new people at bar, restaurants, nightclubs, etc.

Define

 

Affinity Map

Once the data has been received it is time to organize and evaluate this information. We do this by using the Affinity Map which allows us to organize our user data into different categories and highlight the common patterns and trends.

 

Value Proposition Canvas

Once we organize our data it is time to understand our customers needs. We will start by listing the customers jobs while using the app. Once we complete that we will highlight some of the potential pains and gains that might come from using the map during a user’s experience.

 

User Persona

I created this nightlife user persona based on the demographics and lifestyle of the users surveyed.

 

As-Is Scenario

Now that we have learned about our customers through user research, we will walk through a typical scenario of someone planning a night out. I organized this chart into 5 categories in order to understand how the user is feeling and thinking.

 

User Journey Map

Once I complete the as-is scenario, I then put together this user journey map which illustrates the different emotions the users are experiencing while going through the different stages.

How Might We…

How might we be able to provide users with proper resources to help them locate fun things to do in the nightlife?

How might we provide users with an effective way to hang out meet new people and combat social anxiety?

How might we help users with connecting with their friends and respecting their privacy?

Develop

 

Feature Prioritization

Here is where I will begin to organize some potential features that may possibly make it into the heat map and organize the features into different categories of must have, should have, could have, and won’t haves.

 

Value Proposition Canvas

Next we will review the gain creators and pain relievers from the business side. Here is where we will add the potential benefits and downfalls of the features we might choose to add.

Jobs To Be Done Framework

“When I go out, I want to be informed about restaurant details and accurate wait times, so that I can plan out my night and not feel like my time is being wasted.”

“When I go out, I want to have an effective way of meeting new people, so that I can connect with more friends and combat social anxiety.”

“When I find a new restaurant or club, I want to be able to share details with my friends, so that we can have options to choose from and not feel like we’re always going the same place.”

 

MVP

My MVP is a heat map designed to provide users with information about Nightlife that includes privacy settings, wait times, and business details.

Ideate

 

I brainstormed ideas to help resolve the problem statements which I turned into How Might We’s. Here are some of the potential solutions to some of the common issues that came up during the research phase.

Deliver

 

Lo-fi Prototype

The first step in the deliver process is to create a lo-fi prototype. I will use this as a guide for the potential layout of the heat map.

 

Usability Testing

I was able to conduct 4 usability test with a 75% completion rate. It took users an average of 11 minutes to get through the task. During the testing the users averaged a 77% misclick rate.

 

Mid-fi Prototype

When creating the Mid-fi’s I added the map in dark mode and created the privacy feature. This is a brief preview of what the app will look like.

 

Visual Competitive Analysis

Here are some visuals of different app from competitors in the nightlife.

Brand Attributes

  • Calming

  • Belong

  • Helpful

  • Welcomed

  • Appreciation

 

Mood Board

Based on the Brand Attributes I selected I chose to go with the following pictures for my mood board in order to get a better idea on the color palette I would choose. When conducting desirability testing, people expressed that the mood board made them feel both excited and energetic.

 

Style Tile

Based on the mood board, these are the color palettes and typeface I decided to go with.

 

Atomic Design

These are some of the items that I created to use in my design.

 

Hi-fi Prototype

Here are the final results for the Groove App Maps.

Success & Failure

  • Churn Rates

  • Amount of time spent on tasks

  • Increase/Decrease of Downloads

  • App Reviews

Outcome & Lessons

  • Don't overthink things

  • Don’t doubt the process

  • You can’t solve every problem

Credits

Ermence Dumesle
UX/UI Designer