Mixcloud

"Explore radio shows, DJ mixes and podcasts made by passionate creators."

This redesign case study was a final project for my Usability and Information Architecture class where our team had to evaluate and redesign an important component of a mobile app.

Overview

We chose Mixcloud because its crowdsourced content inspired us to look into how community culture affects product design. Through our initial evaluation of the app, we decided to approach a redesign in two perspectives: feature discoverability and social engagement.
Our team was comprised of UI/UX designers: Franz Quijano, Jared Suasin, and Marjorie Tolentino.

Timeline

  • Nov - Dec 2019

SKILLS

  • Competitive Analysis
  • Wireframing
  • Prototyping
  • User Testing

Tools

  • Figma

User Testing I

To gain a better understanding of the app and its features, our team created tasks that utilize the various components that it offers. We wanted to see if there were any difficulties that users were experiencing as they navigate through the app.

MEthod + Results

There were two team members per participant. One member asked questions, while the other took notes. We also recorded the screen with audio.

Throughout testing we concluded that:
  • Our users experienced cognitive overload due to being presented multiple pathways at once.
  • It made it difficult for them to decide what steps to take to achieve the tasks and users frequently resulted in backtracking and unnecessary taps
  • Inconsistent naming conventions between pages as well as the placement of features within a page did not match the users’ mental model
View In-Depth Analysis

Component Redesign Proposal

From information we gathered with our first user testing, my team decided to propose two redesigns of the homepage and main navigation; doing so would result in a more logical information hierarchy and allow us to be more intentional with users’ entry points to other features. 
‍
The following highlights our redesign with an emphasis on feature discoverability, which is the portion I helped create along with Marjorie. The redesign that focuses more on enhancing social engagement was created by Franz and Jared.

Competitive Analysis

We explored Youtube, Spotify, and SoundCloud to understand how they organized their content effectively without overloading the page with a lot of information.

Most notably, all three had a fixed, bottom navigation--resulting in fewer pathways between features. We also noticed that information on the homepage was curated for each user, separated by each type, and included a short description.

Sketches

Using our competitive analysis and user testing results we explored four concepts that played with the idea of an interactive homepage and simplified navigation. Concepts that we created variations on include a simplified sidebar navigation menu, a social content homepage, placing categories on the landing, and a homepage of personalized suggestions.

Prototype

Our goal for this redesign was to promote feature discoverability by consolidating the main features of Mixcloud into one bottom navigation. We still wanted to put emphasis on the social aspect of the app and concluded with a separate profile icon on the top, right corner. Other original features were combined or nested within this redesign’s main navigation.
Test our Prototype!

Home

The homepage is now more personal and structured by including recommendations that are curated specific to the user’s activity and history.

Search

Mixcloud’s “Categories” is now nested within this tab to give users a directed pathway. Similarly, we added a sort button to increase ease of use and included secondary information that users would want readily available (feedback from user testing).

Playlists

Mixcloud’s “Favorites”and “Listen Later” are now in this tab as they are pre-made playlists that users personally fill. We also included details about each playlist to give additional, necessary information to the user.

Feed

The feed includes personal (“Notifications”) and social (“Following”) incoming information--previously separate features. We were intentional with removing unnecessary details and adding the ability to filter the feed to reduce cognitive load.

Profile

The “Activity” tab is sorted by the type of activity and includes a history of the user’s action. The “Posts” tab consists of the user’s own uploads to Mixcloud and is separate to put emphasis on the social aspect of the app.

User Testing II

Similar to our first user testing, this round was conducted to determine the usability of our redesign and the tasks we created address the various features that our redesign offers. More importantly, we wanted to determine if our prototype addressed the issues found from our initial user testing.

Results + Analysis

Most of the issues we encountered from the first user testing were addressed with our redesign.
  • The restructured and consolidated bottom navigation eliminated multiple pathways that were originally confusing to the users.
  • User flow became more intuitive and natural, with some users noting that navigation was similar to well-known apps.
Overall, user interaction was positive and straightforward because features and functions were easily distinguishable. 

User hiccups were minute (confusing iconography) or involved features from the original app design that were not addressed and discovered from our first user testing (difference between “Listen Later” and “Queue”).

Insights

Some navigation icons were not easily recognizable or were not a good representation of their corresponding tabs.

In the future, I would add tab titles below the icons and follow proper conventions for the tab icons. Regardless, our redesign excelled in addressing our original goal of “enhancing feature discoverability”; users noted that the tasks were “straightforward” and this was reflected with their ease of use of the redesign.

takeaways

Doing this project highlighted the importance of getting user feedback to guide the design process. In both instances, it helped narrow down the objective of the design, while keeping in mind that every decision we make is for the benefit of the user. 

It was also rewarding to see the prototype in action and how much our users enjoyed using it. Often times, I do not get to see the new/revised product in action and it is nice to know that it was a step in the right direction.