Music Investing App

Music Tech
Tech Fleet
Product Designer
8 weeks

Project Overview

The Problem

Given the exponential growth of the music streaming industry in the last decade, it is easier than ever for musicians to self-release songs and albums on platforms like Spotify and Apple Music. Despite this, many musicians are still relinquishing the rights to their master recordings in record deals that give them only a fraction of their own music’s streaming royalties.

Why?

The Solution

Our client approached Tech Fleet to help develop an exciting new investing app that proposed a symbiotic way for musical artists and fans to connect and BOTH make money, while ensuring artists get to keep 100% of the rights to their music.

How?

Our team's challenge:

Constraints

Process Overview

Eight weekly Sprints with client demo presentations every Friday and retros on the Monday of the following week.

Discover (Sprints 1-2)

Assist client and Strategy team with MVP requirements, map out customer journeys, create proto-personas

Ideate (Sprints 3-4)

Brainstorm musicians’ pain points, create user flows and wireframes, develop app UI mood boards

Re-align (Sprints 5-6)

Incorporate client feedback, design wireframes for fans’ experience investing in an artist campaign

Execute (Sprints 7-8)

Produce MVP high-fidelity prototype, create sitemaps, style guide, and handoff annotations

Discover (Sprints 1-2)

Goals

Method

Heuristic evaluation

After meeting the client and larger team, UXD went through the client’s initial app wireframes and conducted a heuristic evaluation, noting elements that upheld or violated any of the Nielsen Norman Group’s 10 evaluative tenets.

My chief recommendations included creating a distinction between primary and secondary CTAs, making sure all icons had labels for accessibility, and de-cluttering info presented on artist campaign cards.

Outcomes workshop

During Sprint 1, we also held an outcomes workshop with the client, which helped us define the client’s four chief desired outcomes:

Our outcomes workshop also allowed us to further clarify the scope of the app’s functionality specific to artist and fan user groups. With the help of a teammate, I created two customer journey visualizations in order to consolidate our understanding of the app’s artist and fan views and map each target user group’s high-level journey through the platform.

Proto-personas

The next step for the UXD team was to imagine different kinds of artist and fan app users - specifically, to brainstorm the different goals, needs, and paint points within each larger user group that may influence the scope of the app’s offered value. We came up with eight proto-personas: four “artist” personas and four “fan” personas.

This exercise helped us uncover complexity in defining the app’s users: for example, how an emerging artist might use the app differently than an established, mainstream artist, or how a young fan dabbling in music investing might differ from a seasoned investor looking to diversify their portfolio.

User stories

Finally, we closed out the discovery phase of the project by coming up with user stories with the help of the UX Research team, formalizing and distilling assumed user needs into specific, actionable statements.

Sprints 1-2 Key Takeaways:

Ideate (Sprints 3-4)

Goals

Method

Prioritization matrix

Sprints 3 and 4 were all about diving into the weeds and beginning to turn product requirements and user goals into cohesive, well-designed app flows. UXD began Sprint 3 by creating a prioritization matrix of all MVP features. Following this workshop, we decided to focus on artists’ sign up, onboarding, and campaign creation experience, given that all other app features more or less depended on defining this area first.

Crazy 8's workshop #1

In order to streamline our collective ideation process, our UXD team co-leads adapted the Crazy 8’s Sprint workshop methodology, which proved to be hugely helpful and efficient for us. This workshop entailed creating an affinity map translating potential user pain points into “How Might We’s” - rephrasing each problem into positive idea-generating statements - before setting a timer and sketching out 8 one-minute wireframes each.

Check out this example of how I took the proto-persona “Aiden” and translated their goals and pain points into design opportunities and - finally - wireframe sketches.

Crazy 8's workshop #1 takeaways:

User flows (artists)

Armed with these insights, we drew up user flows for artist signup, onboarding, and campaign creation experiences, allowing us to visualize the (often non-linear) order of users’ actions/decisions and providing a skeleton for wireframing.

Mood boards

During Sprint 3, UXD also held a branding workshop where we helped the client define key descriptors for the app’s desired look and feel - “trustworthy,” “sleek,” “modern,” and “fun” were some of them. We then created mood boards individually, compiling color swatches, typography, and screen shots of outside UI inspiration. Although the client ended up sticking to the colors and styles of their original app wireframes, this exercise helped us connect descriptive keywords to tangible visual patterns.

Hi-fidelity prototype (artist view)

To finish out this phase, UXD incorporated information from our Crazy 8’s workshops, low-fidelity wireframes created from user flows, and client branding workshop to create a full, first-iteration high-fidelity prototype of the app's artist signup, onboarding, and campaign creation flows, which we presented to the client in our 4th weekly demo presentation.

To view some design decisions I contributed to directly, see the annotations below:

Re-align (Sprints 5-6)

Goal

Method

Crazy 8's workshop #2

At this stage of the project, it would have been an ideal time to interview users and test our working prototype, but our UX Research team was unable to provide UXD with data insights. Given this constraint, UXD noted whenever we were making assumptions and set up A/B testing situations that could be tested for future app iterations.

Now that UXD had defined what creating an artist campaign looked like, it was time to turn our focus to the fans! We started Sprint 5 with another Crazy 8's workshop, this time focusing on our fan proto-persona, Sofia - the "seasoned investor."

In particular, we wanted to brainstorm what Sofia's goals and pain points might be while viewing artists' campaigns, choosing which artist campaigns to invest in, and tracking the streaming royalty revenue generated by her campaign investments.

Crazy 8's Workshop #2 Takeaways:

User flow (fans)

These insights in turn led to a user flow detailing fans' experience investing in an artist's campaign and tracking these investments in their portfolio.

Hi-fidelity wireframes

After working with the team to turn our fan view user flow into low-fidelity wireframes, I individually created a high-fidelity version of this flow, which was presented to the client in demo 6.

Execute (Sprints 7-8)

Goals

Method

Final MVP requirements list

Our final two Sprints were a rigorous push to produce a fully-fleshed out first iteration of the app’s MVP. At the beginning of Sprint 7, we received an updated MVP requirements list from the client and created a final prioritization matrix, which we used to delegate all remaining MVP flows amongst the UXD team.

Our task was to develop and finalize distinct artist and fan views of the app with the following flows and features:

Artist campaign creation flow

Of these features, I took ownership over the artist campaign creation flow, which proved to be a tricky design challenge to solve. The client was adamant that I find a way to fit song release information required by DistroKid into an already extensive artist campaign creation flow. My task, then, was to organize a great deal of information in a way that felt intuitive, made chronological sense, and didn’t overwhelm the user with too many screens.

For more information about how I created a solution for the app's artist campaign creation flow, watch this short demo video!

Design system

As we designed, we created a design system for the app on our working Figma file, including the client’s preferred colors and typography specs, as well as all UI components and variants.

High-fidelity MVP prototype

And then it was time to prototype! We decided to include single-screen mockups for non-MVP app features to be developed in future phases: artist profile, fan profile, and the artist view of the marketplace.

Handoff annotations

Finally, to prepare our designs for a potential handoff to developers, our team cleaned up and named all prototype frames on Figma, and made annotations on the intended functionality of each screen’s chief visual elements. We presented the final MVP clickable prototype at demo 8 and received rave reviews from the client - phase 1 mission accomplished!

Link to final clickable prototype

Reflections, Lessons, and Next Steps

This contract experience was a whirlwind (and a rollercoaster ride at times). Navigating the ins and outs of client management, cross-team functioning, and Agile workflows, I learned so much about myself, the way that I work, and how I fit into a professional, collaborative UX Design environment. In particular, I am so grateful for getting the chance to work with such a capable, dedicated, and positive UX Design team, providing me with a benchmark of what qualities to look for in future colleagues!

High-level Project Takeaways:

Next Steps

Even though this music investing app’s phase 1 MVP is complete, there is still a lot of work to be done in future phases to ensure the app’s value is clear and functionality is sound. Here are my recommendations:

Thanks for reading!