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.