Quadio is a social music streaming app for Gen Z. I worked as an in-house UI/UX Designer at Quadio from 2019 to 2021 and the following is one of the projects I was responsible for.

‍

Context

Quadio was a social music streaming platform targeted to college aged users. The product direction has changed since its initial beta launch in March 2020.

I was initially brought on to design the app for a native mobile environment. I've outlined the process and learnings in the case study below.

Project Overview

Goal: Design a mobile experience for Quadio

Target Users:

• College student musicians
• College student music fans

Platform: iOS, Android (React Native)

Approach

Understand

the web product

The first step was to understand what the current product looks like. I visualized my understanding into an information architecture map to grasp what the product aims to do in the current scope.

This IA map helped me do two things:

• Identify possible areas that might be difficult to navigate through on mobile
• Start thinking on how the mobile navigation could work

Mobile User Needs

While I didn't have enough time to squeeze in a full interview research project, I was able to access results from prior user interviews that the UX and Product team had done before. From there, I was able to reformat the data into identifying some mobile only behavior patterns.

Define

The development schedule was tight and we wanted to build an app that provides the ideal mobile experience, rather than a 1:1 port of the Web app.

Through a series of workshops, the Product team and I defined some key goals:

1. 💻↔️📱  Retain core features

1. Business wants to retain the three primary features that define the platform's identity and avoid potentially not meeting user expectations.
2. Upload was deprioritized because we determined not enough of target audience will upload from their phones.
3. Search was deprioritized because of the development timeline was not met.

2. 👉📱🎵  Easier music listening

• Emphasize the streaming aspect and have Quadio music streaming be as smooth as possible.
• Reduce the amount of effort to selecting what to stream.

3. 🧍🤝🧍  Social on the go

• Connect users 24/7, when they're away from their laptops.
• Easy access to activities within their network on the Quadio platform.

Ideate

Information Architecture

Before I started designing any of the screens, I wanted to first revisit the IA.

For a refresher, here is the IA Map from earlier.

I started asking questions on how I could organize information into a comfortable experience on mobile.

Additionally, I decided to pull the Notifications feature from a Secondary Nav item on web to a Primary Nav item on mobile because it helps the user access their social activities more easily (remember Key Goal 3?).

Here is the updated IA Map for Mobile:

Design

While I designed every mobile screen, I'll be focusing on Charts for this case study. You can still see designs from other parts of the app here.

‍

Design Problem

On Quadio, there are 4 tiers of Charts: National, Regional, State, and University. Each chart tier shows only the tracks that belongs to each Chart tier; for instance, if the User from New York selects the State chart, the app displays a New York State specific chart by default. Using the filter, the User could easily swap to a different state.

‍

I wanted to retain this core functionality for Charts (remember Key Goal 1?), but while I sketched some solutions, I discovered that the experience would be frustrating on mobile compared to the above because of the location filter:

• Constantly show filter -> Too much spotlight to a low traffic feature
• Hide filter and open with button -> Low discoverability of all 4 chart types
• We want users to more easily return to their interests and navigate between chart types

‍

Lo-Fi Sketches

To solve this I started to sketch out possible solutions:

‍

• A. Top Left: User clicks into a filter modal to change location and chart type
• B. Bottom Left: User navigates between charts via tabs
• C. Right: Page 1 loads 4 cards, each corresponding to each chart type. On each of the cards, the users can play from that chart, view the chart, or change the location (ie. NJ-> NY)

Ultimately, I decide a two level design like C would reduce information overload while easing access between different chart types. But I wanted to test out my decision.

Iterate

‍

Usability Testing

Following first round of high fidelity designs, I ran a set of prototyped A/B usability tests with this feature on 5 students.

This round of tests were originally planned in low fidelity, but ultimately done in high fidelity because I had some downtime while I waited for participant availability.

Research Questions

• Is this two-level Charts IA usable?
• Do users understand how to open and play the charts?
• Is the card subheading "#1" necessary?
  

‍

Results

• All participant had no issue completing the opening tasks.
• 3 participants had trouble identifying how to play music from the top level page.
• Users across all variants had no issue identifying that the song on the cards were #1.
• No other usability concerns were raised during tasks.

As such, I decided to continue with Variant A, and no other major changes were made.

Final High-Fidelity Designs

I took the results to iterate accordingly. Here was the result:

‍

Some key changes that were made:

• Removed the #1 Subheading.
• Added Play icons to clarify play action on top level.
  

Reflection

As I'm still early in my career, this was one of the first projects I worked on after college and fortunately I was very lucky to be working with a talented team to deliver on the product. That's not to say, however, that I think my designs were perfect:

• I wanted to be more involved in the product process. Early on, I identified several problem points in the feature set in finding a product market fit and it was a bit difficult to get involved in that manner until the pivot.
• On a visual aesthetic level, many commented that it left something to be desired, especially given that our target audience is young and creative.

‍

What Happened After

• The official Beta closed out early 2021.
• Several other features, such as Playlists and Search were eventually added. I played a key role in arguing for, ideating, and designing these features on both the Mobile and Web platforms. As a result, we saw a significant increase in user retention.
• Before Beta was over, our team decided to shift the product direction and make drastic changes. You can read about that journey here.

‍

Other Designs from Quadio Mobile

Here are some of the other designs I did at Quadio Mobile!