Harmoney is a digital startup that offers a straightforward marketplace to buy and sell shares of music royalty rights. The founders came to me to design the app in order to help them secure their next round of VC funding, at which point the app would be developed.

The Process

The process for the project incorporated standard best practices for UX. The founders had an email list of prospective users and we sent an email asking prospective users to fill out a survey with some questions about their demographics, goals, pain points, concerns, and understanding of the app. From there, I created user personas, which informed the user flows. Equipped with that, I moved into wireframes. The wireframes were turned into a figma prototype, and then tested on a selection of prospective users were asked to accomplish certain tasks in the app while I was on a video conference with them. The wireframes were then updated based on feedback, and then the project moved into UI.

User Personas

After the user surveys and user interviews, three main personas developed. Each of these three groups had different needs, desires, concerns, and levels of familiarity with investing. “Music Lovers” were less interested in the nitty gritty of share analysis and big returns, and were more interested in being able to own small shares in music that they enjoyed. “Novice Investors” approached the app concept from an investment perspective, and were driven primarily by wanting to earn money and have another new place to diversify their investments. The “Retail Investors” were much more skilled in stock analysis and much more experienced than the novice investors. And because of this, they were more skeptical about the reliability of dividend payouts in the app and their ability to make good returns with it.

User Flows

With the personas in hand, the next step was to flesh out the user flows and task flows for the app. Specific task flows included: Onboarding, Browsing, Analysis, Buying/Selling, and Monitoring their portfolio.

Sitemap

Next, a quick sitemap was created to establish the basic architecture for the app, including where every key actions would take place.

Wireframes

From there, it was time to start mocking up the wireframes with all of the necessary content and functionality. The wireframes were then turned into a simple Figma prototype for testing.

User Testing Insights

A selection of changes that were made to the wireframes after user testing. I am always surprised by how getting a prototype in front of users helps bring to light UX functionality that I had not thought of beforehand.

Moodboard

Moving into design, I thought through the visual language for the app, based on what it needed to communicate. Trust, usability, and information hierarchy were more important than completely pushing the envelope stylistically, and I chose a color system that felt very in line with fintech.

UI Designs

During the final phase, I converted the wireframes into polished UI, making sure to be diligent about legibility, information hierarchy, and balance. Moving into UI is always a fun and rewarding process, and it was fun to see the designs come together.

User Flow Overview

What I learned

This was a rather unique project for me, as I was working as a solo freelancer directly with the client. Normally I work in conjunction with a design studio or agency. It was a challenge to not have another set of eyes on the project, or anyone to bounce ideas off of, but it was also an opportunity to step into other roles that I don’t spend as much time in, like creative direction.

One crucial learning for me was that it was very important for me to understand, in very granular detail, exactly how the financial and trading aspects of the marketplace worked. As I started on wireframes, I realized that I had some misunderstandings about the functionality, which caused me to have to backtrack and refactor some of the pages. Overall it was a minor setback, but it gave me a deeper desire to make a point of understanding the client’s business in detail in the beginning of the process, rather than making assumptions and asking questions later.

Credits

Jackson Montgomery (Development Feasibility Advisor)