Finding a Groove; A Case Study
UX/UI Case Study
Time Spent on this project: 3 weeks.
Group Members: 1
Overview
This project allowed me the opportunity to create a product for Groove. Groove is an app with a real-time heatmap of your city’s nightlife that shows you “what’s popular tonight, who’s there, and what the vibe is.”
I had a meeting with both co-founders of Groove, and they were looking for alternative UI designs to improve their pre-existing app UI. I asked them to go over their wants, needs, and expectations. They had a clear idea of what they were looking for, and after sharing it with me, I promptly got to work.
Research
Groove is an app with unique features that faces indirect competition because other apps do not offer the same features. So the Competitive Features Analysis was ideal because every app I considered one of Groove’s competitors missed at least one key feature that Groove offered.
The four other apps I compared Groove to were Snapchat, Discotech, Instagram, and Skorch. I would consider Snapchat or Skorch to be Groove’s main competitors. Still, each app is too fundamentally different from the other to be able to claim this. I also compared each app’s value proposition and brand attributes in a brand comparison chart.
User Research
I created a Lean Survey Canvas to help map out the best questions to gain quantitive data.
I also conducted five guerilla-style interviews and organized the valuable responses received into an Affinity Diagram. I found patterns in the answers that showed me insight into the user’s habits and behaviors.
I noticed a pattern where the users relied on choosing where to go, dependent on where their friends were going. They didn’t do the research themselves but trusted their friends knew where to go to have a good time. Many users also shared that before choosing where to go out, they would check multiple apps searching different types of information about a venue.
I created an empathy map to identify different emotions and thoughts the user might experience when going out for the evening. From hearing the sounds of a bustling bar to overhearing someone complain about the line to get inside, imagining these moments helped formulate potential pain points and gains in the process.
Although I had user survey results and interview results, I also created a couple of Jobs-to-be-Done Statements. These Jobs-to-Done statements helped me narrow down the best ideas to ideate for Groove’s design.
I developed a User Persona that encompassed details of who I thought would be our ideal user. I imagined a young social butterfly millennial who is post-undergrad and works full-time. Her name is Party Pam.
I made a User Journey Map which helped me ideate what a typical night out might look like for Party Pam, the ideal user of Groove. I created this to analyze Party Pam’s actions, thoughts, and frustrations. The User Journey Map helped provide me with visual insights into finding design opportunities.
Problem Statement & Hypothesis
Young socially active people need a better way to know vital information about a venue before deciding where to go for the evening, including what friends are planning to attend the venue that evening.
If we give young, socially active people information about where their friends will be going for the evening, then our users will have more enticing information about a venue and will be more likely to want to attend the same venue.
MVP Statement
The goal of the Groove app is to help users choose where they’d like to go when planning a social night out.
To accomplish this, we must design an app that provides the user with a live heatmap to show crowd levels, venue information, event details, and a friend activity feature.
By ensuring that these features are available, Groove will entice users to choose a venue to visit while using the app.
How Might We Statements
I framed How Might We Statements to help me ideate solutions for the main problems that needed answers.
- How might we make the user feel confident about the venue they have chosen to visit for the evening?
- How might we show the user that friends are at the venue without sharing the user’s or the friend’s exact locations?
- How might we create a private way for users to see friends’ exact venue locations with user permissions?
MoSCoW Method
I used the MoSCoW method to plot down and prioritize each idea for a feature that came to mind. I prioritized the main things the stakeholders shared as Must-Have features, such as the heat map, venue details, and the ability to share location privately or discreetly. I also categorized other ideas as Should-Have, Could-Have, and Won’t-Have features.
Site Map
I’ve found site maps to be one of the most helpful organization tools when designing an app. Looking at the skeletons of the app in a high-level manner helps visually guide you as a designer through all the different happy paths a user could take. I’ve found it to be incredibly constructive, even if your potential user flow won’t include every aspect feature of the site map. I quickly sketched out a site map and listed the features that could live on each page in bullet point fashion.
I taped it to my wall and began to ideate a User Flow.
Lo-Fi Frames
I sketched out my Lo-Fi designs on paper. Check out some of those sketches below.
I performed usability testing on my lo-fi sketches. I received feedback on the placement of friends’ activity vs. users’ interests and the additional scrolling the user had to do to get to the social feature.
To make it more engaging for the user to participate and use their friend’s outing activity list on the User Profile Account Page. I switched it around to present the user with their stats and outing activity first, followed by their friends’ activity, and finally, their interest choices.
Mid-Fi Frames
I also cleaned up the details displayed on both the venue pop-up and the venue page. These changes included the design for the friend’s display on the venue page.
My usability testing for the mid-fi wireframes let me know that although the information was clear and valuable to the user, it did seem crowded to some users. This usability testing result lets me know that I need to create a visual hierarchy using fonts, font-weight, and colors to display essential information.
UI
After completing my mid-fi wireframe, I moved on to the UI portion of the design project. I started this by taking another look at the apps I considered to be Groove’s main competitors and visually comparing them amongst each other.
The app’s co-founders were very clear during the stakeholder’s meeting about the look of their brand and just how far I could deviate from it. They let me know the most important parameters were surrounding the continued use of their current logo and that the UI needed to be in Dark Mode. They also shared that their brand color was a specific shade of purple but would be open to designs created with different shades of purple. I made a Moodboard with these parameters in mind to start visually ideating the user interface’s design.
I performed Moodboard testing and heard some of the attributes I was looking to apply in the app’s design, which let me know I was heading in the right direction.
Brand Attributes
The Brand Attributes that I chose for Groove are below:
Lively
Explorative
Cool
Colors
Groove provided me with their current exact Hex Color, and I wanted to try and see if I could work with it and build a color palette surrounding it. My Moodboard came to use again, and I sourced the additional colors from the images included.
Typography
Inspired by the Moodboard and the app’s name, I looked into different fonts related to 70s disco and nightlife. I downloaded the font Neon Tubes 2, which helped beautifully deliver a neon sign effect for the landing and sign-in pages. I then chose the font Raleway for the remaining text throughout the design.
My client had shared that they wanted to continue to use their pre-existing logo and so I kept the integrity of the logo and it’s owl design, but tucked a glowing disco ball underneath.
Style Tile
I incorporated the previously mentioned style elements into one cohesive design style tile.
After much trial and error, I edited the color palette to reflect a more muted palette that felt more compatible with a dark mode interface.
Hi-Fi Frames
Here are some of my Hi-Fi Frames. Groove’s logo includes an owl designed within the two O’s of the word Groove, the O’s serving as the owl’s eyes. I wanted to continue building off the Owl theme and sprinkled owl puns throughout the design.
Prototype
Check out my Prototype here.
What would my next steps be?
- Perform Dark UI Usability Testing and play around with additional gray and dark purple-gray hues to perfect visual hierarchy.
- Add a visual indicator to the navigation bar to communicate which page the user is currently on.
Thank you so much to Vanessa Koliver and Victoria Hickam, Co-Founders of Groove, for believing in me! It was a pleasure creating these designs for Groove.
