CWR Asset Management Suite
Designed for music publishers, record labels, business managers, admins, & production music libraries. Research, design, and advise on extending an application for creative rights management and registration of music & performance rights to be used by musicians, composers, and performers.
Case Study
by Linda Lane
UX Design Director
Introduction
The product managers leading the creation of this Common Works Registration (CWR) and financial application have deep experience in the domain of creative asset and rights management which is today mostly a manual process. The design of this product is unusual in that the product managers are also primary users.
Those large firms, called societies, that do CWR management and rights registration are concerned with the largest music producers and have little incentive to ensure that every composer and musician gets paid for the license and use of their works. Our task is to help design the PM's product vision that will help creatives get paid. This is the ethical aspect to this product that encourages greatest enthusiasms.
Therefore the research designed was based on interviews of the product managers/product owners. They began with a command-line process for business processes. They had drawn some primary box sketches and had started developing the product. Represented simple wireframes in Basalmiq and then iteratively covered them off with the PMs in increasing detail during bi-weekly meetings. Soon we moved to Figma to flesh out the look and feel - with clearer colors, and more refined panels.
Moving from command line to outline wireframes using Basalmiq and existing industry colors for a core page
Design moved to Figma - refining colors, adding panels on a grid
Information Design aids in advising in building an app from scratch. This is a version of the site map created to document the product that evolved over time - this aided our team in determining the next process to create new functionality and to design and create new pages or code interactive processes.
Site Map driving the functional groups and menus
3 Categories of Functionality with central hub
Center of the World AXIS View
Created a view of the overall functionality for PowerPoint presentation to assist in angel fundraising. This also added to the Information Design goals, by helping to clarify the organization of three major functional groups of related user needs.
Illustrated a presentation to illuminate the processes by groups, to show investors the relationships between different kinds of product components. As we iterated this overview it underscored the processes and clarified their relationships. The center of the product is the Axis, all the other functions and pages are accessible from this central axis.
Clear ideas documenting the admin's user journey
Moving designs to Figma for interaction design - as many as 50 subpublishers
Our Process begins by interviewing team members about what the users needs are, because in this case they represent users. Our lead PM had clear ideas about the needs for twin product lines. Their needs I used to create the main page design, and all the other components of the products. We documented aspects of an administrator's user journey.
Using Balsamiq, which has a cleverly assembled set of standard web UI components, speeds up the wireframing process. (Balsamiq is a low-fidelity UI wireframing tool that enables the designer to rapidly outline designs by focusing on structure and content.)
Making baseline design decisions:
-
Font Awesome Icons, preferring Pro Light for menus, functional indicators and buttons.
-
Open Sans and Open Sans Condensed for the typeface.
-
Color choices are broad due to categories of design needs that we term "cards".
12 unique wireframes in Balsamiq finished, UX design moved to high fidelity wireframing in Figma. Cloud-based Figma is a collaborative interface design tool that allows design and development teams to collaborate and see the design work live realtime and in action.
Figma works on any operating system that runs a web browser, including MacOS, Windows, Linux, and Chromebook.
After Lo-Fi Completion, Balsamiq to Figma
Product Design Process continued ...
Product design at its most basic begins with research — by gathering all the requirements for the product functionality, and user experience design.
UX design means collecting information centered on the users' needs in the product ecosystem — ecosystem means everything that surrounds it in the environment it comes from and will be deployed into. Such information may be gathered many ways. Then this information is distilled through analysis.
The Value of Experience in User Experience Design
But like many skills, with experience the UX practitioner increases and strengthens their ability to anticipate needs through analysis - which aids the creation phase of design; if you have been constructing software for many years, research, documentation, representation may be very instant, alive, and intuitive.
Versioning of interaction design of the main pages in Figma
Stack Ranking Users Needs
Researched users’ needs and the sponsor’s needs — the stakeholders, then stack rank the lists of needs and group them with similar requirements. The collection of information can be different when designing a product from scratch, as my current product is, instead of renovating an existing product. My main approach is conducting research for samples, asking a lot of questions, conducting interviews, collecting user feedback, polling, product comparisons, documenting via lists and text, then wireframing to gather more feedback in order to make decisions.
Visualizing Wireframes for Functionality
The interviews and documentation to make wireframes allows the designer to create a mental model of the product needs. Because some of the functionality was already coded this helps the team explain how things might function, even as the UI designs change over time. Having something on the canvas provided an easy place to start. This is always true - find something to start on the design, even if it is just a rectangle with some labels - getting started gets design kickstarted - to what? 50% done!
Multi-dimensional Functionality
Consider things laterality and think about methods, designs, markets, competitive software, and how to improve the product overall. I think of product design as an array, based on experience - for example, time is a dimension in software. Considering this globally you can consider as you are working how to both expand or contract the functionality, how to display to users systems processes and needs.
Exploring possible menu interfaces
Variations take time, determining with some surety what needs to be designed, tested, rendered, and tested again helps to trim resource needs. Keeping an eye to what other concerns will arise - helps now and in the future. Planning for versions is part of design and a key function of a skilled product manager and product designer.
Variations to Select Menu Designs
Distribution agreements, can have many different parent agreements, handle different writers and publishers: business rules, split 100%, for territories worldwide, in a variety of combinations, over time.
Because the teams are on tight deadlines, some pages couldn't be as fully fleshed out as we would have preferred. After creating these dark mode landing pages and highlighting pages, our testers aye's won!
Our users want colors, bright colors - so we used Font Awesome Icons to show off these bright colors around which the axis of the product is built. The processes are really different for each section but we plan for any user to feel like this as an easy and fun process.
Dark Landing and Nav Page
Dark & Light Highlighter Page
This is the dark version of the list view so that administrators can scroll through all their updates and check to verify that everything is going through batch processing as expected. Where it is not, the files can be edited directly here. Likes, feedback, and ideas are always available.
The background graphics change onload so that it is clearly loading - it also maintains visual interest. We keep it simple yet clean and focused on the music as the mission, to help performers, composers, writers, and rights holders be paid for their works.
Navigation to the open batch files are tab-like headers. Navigation to all main levels and any sub-level are all readily available.
A Few Low Fidelity Project Wireframes
The smartest advice in UX Design - "Keep your project in low fidelity wireframes as long as possible."
We made many functionality decisions in lo-fi. If decisions can be represented in Balsamiq, we presented them here because Lo-fi wireframes are faster, it is cheaper to make major changes, therefore it takes less time and costs less for the overall product.
The team wanted to move quickly past the low fidelity, and start using medium-fidelity wireframes as part of the design, such as the header, to provide more of a real website feeling.
Some pages we discovered we wouldn't even need before they were fully fleshed out. But some pages we should have worked on longer in low fidelity because too many changes in high fidelity became costly.
Low Fidelity in Balsamiq
As I documented and perceived, and created requirements different needs of end-users became immediately apparent. The main user group is the admin, someone who grows increasingly and quickly familiar with their stable of performers, composer persons.
A contrasting group is the profile of an individual creative creator, someone who isn't that interested in doing paperwork of any kind, colorful, easy to use forms, with functionality that enables this user to move around on the same page, and stay interested, entertained with the ease of use. The contexts are accountants and those working in concert with intellectual rights attorneys.
Small mistakes are commonly made at several levels of related systems - this system is designed to allow users a facile set of methods to detect and fix these errors swiftly and surely, thus allowing payments to go through at one time and from then on.
Music Performance App Design
Clients
The client is a rights management and music supervision company. They handle music publishing administration, YouTube ad revenue monetization, neighboring rights administration, brand alignment and strategy, and music placement. Based on their experience and the lack of required software applications existing in the market today, the lack of automation or AI in the global music industry, the owners decided to create applications to serve the industry in an in-depth, user-friendly, thoughtful set of related functionality. Much of this application replaces labor-intensive processes currently conducted by hand, or by sifting through large amounts of data manually.
In addition to registering works, the company monetizes musical works through partnerships, for example, a partnership with YouTube, so that composers and players collect advertising and subscription revenue for the use of compositions and masters. They deliver metadata that YouTube uses to track the performance of works, which identify composers, publishers, and sub-publishers as the registered rights owner, to collect payments for performances. They place YouTube ads. They identify and correct errors related to rights ownership, so that the true rights owner can collect revenues.
Users
Designed for music publishers, record labels, production music libraries and business managers, the primary users are music industry administrators that do such things as register rights with and for music societies, from where composers and musicians and other performers earn income. Besides the stand-alone application, some interactive functionality with other applications will be available in future versions. Interactive payment of accounts based on the collection of revenue from use of registered rights, no matter of the scale or location.
Scope of work
Design a personally engaging Intranet application that users at all levels can use to register rights, learn about rights registration, make claims for rights payments, pay clients for rights use, collect rights payments, correct information about who the rights owners are and calculate rights percentages, track bidding on proposals, request payments, make payments to bank accounts. Advise on logo, marketing, propose uses of the application and integration with other existing software.
Process
Research needs gathered requirements via interviews of the two owners who have worked as music administrators for several years. Then create low fidelity wireframes in Balsamiq which are approved. Low fidelity wireframes are converted into high fidelity wireframes in Figma to document designs.
Conduct interviews of the managers responsible to build the site, based on the owners wants and needs for the site, logos, marketing ideas, and brainstorm ideas with the team about additional functionality which may be used in future versions as we go.
Originally the meetings were scheduled to take place twice a week user interface variations, with the information architecture wireframes, and documentation.
Information architecture here meant categorizing diverse information into bite-sized chunks that people can understand, assimilate, and which is therefore made useful.
Visually using color planes and shaped surfaces as a dimension in mind mapping the information design being presented intellectually and emotionally; as a kind of a memorable "material plane" or curtain of related information.
The foundation of this functionality, for CWR Conversion and the template only, is shown in beta versions only.
