Wonderlane Studios

1-206-850-4452 PST

CWR Asset Management Suite

Designed for music publishers, record labels, business managers, admins, & production music libraries.

Low & High Fidelity Wireframes | In progress Case Study

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. My task is to help design the PM's product vision that will help creatives get paid. This is the ethical aspect to the product that, as a creative person, I like.

Therefore the research I designed was based on interviews of the product managers who are the product owners. They also had some primary sketches from development. I designed wireframes and then iteratively covered them off with the PMs in increasing detail during bi-weekly meetings.

proposed final.JPG
figma.png

Information Design aids in advising in building an app from scratch. The site map I created to document the product 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. 

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.

My Process begins by interviewing team members about what the users needs are, because in this case they are actually a stand in for some of our customers. 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.)

After Lo-Fi Completion, Balsamiq to Figma
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.)

I began 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 I term "cards". 

The Main Functionality
A registration form for a song, has many requirements. It needs to be appealing to users so they can register their music, with a very appealing and easy to read interface. The user interface also needs to be useful by administrators to navigate horizontally and vertically as many as 50 rows of cards up and down the same page, to minimize rows. They need to be able to refer to different rows to input detailed unique data in 4 of the 9 cards.

This means that the interaction design is fairly complex but the user interface needs to be highly intuitive, and not easy to make an error without excellent recovery and ability to recognize mistakes. 

Many of these files would be created by administrators as part of their daily tasks. Making this enjoyable is critical to user experience success. 

Product Design Process

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 the information is distilled through analysis.

Value of Experience

But like many skills, with experience the UX practitioner increases and strengthens one’s 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.

Sitemap of an application with 5 hubs, multiple functionality
Graphic of applicatio functionality
Low fidelity wireframe image
choices.JPG
Single Song Original.JPG
Single Song Original2.JPG

Stack Ranking Users Needs

I research 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.

interactionwhite.JPG

Visualizing Wireframes for Functionality

The interviews and documentation to make wireframes allow me as the designer to create a mental model of the product needs. Because some of the functionality was already coded this helps the team explain to me how things might function, even if they change over time. For what I am working on now, having something on the canvas provided me 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 what? 50% done.

Multi-dimensional Functionality 

Consider things laterality and think about methods, designs, markets, competitive software, and how to improve generally. 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 and display users and the systems processes and needs.

Variations to Select Menu Designs
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.

acknowledgement parser.png
frozen menus.png
distribution.png

Dark Landing and Nav Page

Because we are on tight deadlines, some pages couldn't be as fully fleshed out as we would have preferred. But then after I created these dark mode landing pages and highlighting pages, everyone just liked them so much among our testers that the 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 is an easy and fun process. 

darkmode hamberger1.png

The 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 clear that the app is 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. 

darkmode highlighter.png
 

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 Administrators for several years, and create low fidelity wireframes in Balsamiq, then get those approved. 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, including to the developer teams. One of the issues here were too many sources, too much information without organization, and little or no access to it by employees of different units because large amounts of random information is segregated by groups behind security firewalls.

 

Also advised on a new corporate logo by selecting a group of typefaces to choose from for the logo designer, and helping to select a good choice, then editing the resulting 3-D file, and choosing a gray color for presentation on the app. 

Visually I used planes and surfaces as a dimension in mind mapping the information design being presented intellectually and emotionally; a kind of a "material plane" or curtain.