Melody Mixer

Giving people a way to enjoy and to play music and allowing people to find new music. Also, it helps people get better benefits and more features with a premium subscription.

My Role: UI/UX Designer

Tools: Miro, Figma, Marvel POP Prototype

Timeline: Ten weeks

The Challenge

Melody Mixer is a mobile application that offers free plan accounts to users and aims to monetize its existing user base by allowing users to sign up for premium subscriptions.

The Outcome

I designed a mobile application with features that allow users to listen to music and to discover music by taking in their interests and providing users with the opportunity to learn more about the subscription plan.

Competitive Analysis

Melody Mixer is an application designed for mobile phones, specifically iPhones. So, I looked at three similar iOS apps and studied them through a heuristic competitive analysis. Through the analysis, I discovered to:

1. Break down the description of the premium plan into concise, readable sections.

2. Clarify the purpose of the premium plan in the description and action button.

3. Offer the premium plan in the main pages of the application.

Competitive Analysis First Page

Competitive Analysis Second Page

Competitive Analysis Third Page

Bold and Smart

Before creating the prototype, I put together a simple style guide for the visuals in the application based on the branding personality and attributes from the challenge brief.

Style Guide First Page

Style Guide Second Page

User Flow

Based on the given challenge brief, I created two main user flows for Melody Mixer based on two groups of user needs.

As a new user, I want to make an account and to add a subscription to choose my interests in music and start listening to music.

First User Flow

2. As a returning user, I want to use an existing account and to add a subscription to explore, save, and listen to music.

Second User Flow

Low-Fidelity Wireframes

After I conducted the user research and the user flows, I made low-fidelity wireframes to represent the Melody Mixer application. Next, I aimed to integrate both of the user flows completely in the low-fidelity representation so it was ready for usability testing.

Wireframes Main Pages

User Research Iterations

In order to test the efficiency of the low-fidelity wireframes, I held usability testing with 5 sessions and found minor issues that had to be improved. A few of those improvements from the user research are shown below.

Providing Context for Premium Plan

Visually Indicating Profile Icon

Adding Clear Explanations in Premium Plan Banners

High-Fidelity Prototype

I incorporated the suggestions from usability testing into the solution as I evolved them from low-fidelity wireframes to the high-fidelity prototype.

Prototype Pages

Interaction Design

I worked on the high-fidelity prototype in Figma by adding transitions between designs that align with the state of the design and encourage user interaction.

Other Iterations

I conducted a second round of user testing to check if there are any more issues that needed to be improved in the design. I found that issues continued to be in the design, so I sought to incorporate the feedback in the second iteration.

Making Profile Icon Visually Distinct on Page

Final Designs

Here is where the prototype can be used. Click on the link to start the prototype.

Result & Next Steps

I looked forward to conducting research about the music industry for the mobile subscription application. I also enjoyed the process of designing a music listening application that is modern and can be used daily by users.
During the project, there was less of an opportunity to look at more possible features or elements that I could have implemented in the application. If I was given time to continue working on the application, I would conduct more research on how users upgrade to a better plan and work on features to show the users an overall view of the plan.
My next steps would be to improve on the design and run another round of user testing to interview users, then run another iteration on the design before launching a new version of the application.