Music Investment App • UX Research & Design • iOS & Android App

Basenote

Project Overview

Background

Basenote is a music investment app that connects fans with their favorite artists by allowing them to directly invest in the artist and in return, share in their streaming royalties. This creates a mutually beneficial relationship where fans benefit from the success of the artists and artists are able to use the funds for creating new music, touring and other activities.

Goals

The goal for the design of Basenote is to create a proof of concept app that enhances the discoverability of artists and their music, and differentiates Basenote from other streaming and investment apps. These designs will be used to build a working prototype that demonstrates the potential of the Basenote app to future investors.

Design

Delivered a polished user interface and streamlined user experience that demonstrates the basic functionality of the app to be used as a sales tool. The designs created for the POC are flexible and of a quality that can be used as a base to build out the following MVP, removing the need to completely redesign the app for the next version.

Research & Discovery

Competitive Analysis

Working with the founders, we defined a list of four apps that we would focus on for secondary competitive research:

  • Spotify: Massive market share, mature UX, large user base, can help define a familiar user experience.

  • Tidal: More niche market, catered towards music fanatics that want to know specific details about what they’re listening to.

  • Republic: Niche crowdfunding, makes donating to various businesses/products easy for users.

  • Robinhood:(mature UX, large user base, makes investing tangible to inexperienced users)

Card Sorting

I collected insights from competitors’ Home screens in order to discover common patterns that could help inform Basenote:

  • Sort/Filter/ Categories/Collections

  • Layout/Colors/UI Patterns

  • Features

  • Page Names/Titles

  • Types of Custom Content

  • Investment Insights

    See when an offering is new

    See how much time is left on an offering

    Identify active vs. closed offerings

    Card based layout for ease of organization and future information expansion

  • Music Streaming Insights

    Display collections of media

    View an artist’s page (songs, bio, updates, link to offering page)

    Full screen media player

    Artist picture to be circular shape

    Album/songs to be square shape

Redefining Product Goals

Business Goals

Swarm Media needs the app to be structured in a way that will seamlessly convert users from the discover page to making an investment via the artist page.

How might I design this app in a way that provides a streamlined user experience to increase conversions from listeners to investors?

User Goals

Users need an app that allows them to easily discover music, invest in artists, and keep track of their investments.


How might I design this app in a way that introduces users to the concept of investing in an easy to understand way, while affording them the resources to make an informed investment?

Design Framework

 

Site Map

Using what we learned from our feature discovery and following the redefined product goals, I created a site map to establish the framework for the high-level structure of the app, focusing on the Discover (home screen) section.

 

User Flows

Through the user flows I established a repeatable pattern that can be used to organize and display any type of media or content within the app. Possible types of media include:

  • Single Songs, Playlists, or Albums

  • Artists

  • Videos

  • Mixed content of each type

 

Moodboard & Styles

 

Swarm Media asked me to use their current brand colors for the app and to create a light-mode app. With this in mind, I pulled some UI samples for the founders to look at and conducted a collaboration session using FigJam to get feedback on the samples.

Deliverables for the look and feel were defined as:

  • Black and white based UI with 1-2 accent colors

  • Images & content become the focal point

  • Rounded corners to make the UI feel more friendly

  • Rounded UI icons to mirror the rounded corners

  • Card-based layout

 Design Ideation

 

Mid-fi Wireframes

Created a wireflow to clearly communicate the happy path of the discover through investment flow. Due to an upcoming user testing deadline, we moved forward with this design to establishing the look and feel of the app.

 
 

Hi-fi Look & Feel Options

I created some options for styling based on inspiration from the moodboard selections. After reviewing with the founders, we decided to move forward with Option 3 as it felt like a balance between being simple and including some styled elements.

Hi-fi Mockup V1

Actions:

  • Added styling

  • Added “About this Offering” to help users understand the “what, why, and how” of an artists’ offering

  • Simplified the design of the artist page by removing icons within the segmented control

  • Simplified investment details by displaying them in a more graphic way

  • Added performance data to the offering page

We tested this version of the design with 10 remote usability interviews over Zoom and distilled these key insights:

  • Users had trouble locating the “explore investment” and “sign up to invest” buttons at the bottom

  • Users had trouble “re-locating” the Investment Details page after they left it 

  • Users almost unanimously had an “ah-ha” moment when they got to the page that listed the various investment amounts that they could select.

Ah-ha Moment

After reviewing the user feedback from our usability testing session, Set out to solve our users’ main pain point of not being able to locate the “Explore Investment” CTA and not being able to re-locate the offering details page. The solution I came up with was to move the artist’s offering page to the artist page, and to make that the default selection on the segmented control.

Final Design

In the final iteration, I implemented the relocation of the offering page to the artist page so that it is the first thing users see when they visit an artist’s page. I then combined the artists’s “music” and “about” screens into one section called “profile” in order to keep the segmented control simple with the original three selections. I also removed the background texture from the bottom bar and changed the “invest” CTA to red in order to draw users’ attention to it.

Demo & Final Mockups

 
 

Impact

 

Through this project I was able to deliver a complete design for Basenote from music discovery features to investment flows. This proof of concept app will now be used as the base for MVP and as a sales tool to help Swarm Media attract artists to use the platform.