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. 

Sitemap of an application with 5 hubs, multiple functionality

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. 

Graphic of applicatio functionality
Low fidelity wireframe image
choices.JPG
Single Song Original.JPG

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.

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.

Single Song Original2.JPG
interactionwhite.JPG
acknowledgement parser.png
 

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.

frozen menus.png
distribution.png
darkmode hamberger1.png
darkmode highlighter.png
 
Intranet Site Design/IA Case Study 

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.
 

User Research 

Ethnographic Field Studies, Participatory Design, Interviews, Usability Benchmarking, Moderated Remote Usability Studies, Further steps are to get senior manager sign-off, and collect, or plan for the content for the hundreds of pages required to flesh out the site.

 

Those less experienced with delivering Web sites and applications may believe that a detailed and accurate Intranet site could be cobbled together from dozens of sources in 2 days. It is time-consuming to structure and organize the information.

 

Setting reasonable expectations is part of the communication process, designing and building software is a negotiation.
 

Other Content Created 
Editing a large sales presentation document that was part of learning about the company's depth of technical service offerings with SAP, I wrote sections of the presentation and designed simple colorful graphics illustrating human-centered design processes for use companywide. Sales content is part of the corporate identity. 
 

Highlights

As this corporation is an equal opportunity employer encouraging women and minorities to apply, the user experience and user interface designs were framed towards the goal of a more diverse employee population. We chose contemporary design which matches today's reality, and moved away from traditional images of IT workers as depicted by two Caucasian men shaking hands, usually just their hands and suit cuffs (sales still wear suits, but within IT generally, formal business attire is not preferred.) 
 

I suggested the suitable term "Learning Path" to the proposal for educating incoming new employees and creating savable learning paths that they can select classes and tests from to illustrate new knowledge. 

Results

The saturated color and versions of the main hero image and site designs proved very popular when tested.

 

The teams tasked with completing the work have the information architecture and a user interface that drives their goals towards human-centered design. Our choices move the company away from stock images devoid of color or energy which do little to motivate employees and managers to consider the site a great resource and learn from the materials intended for their use.

Graphic designers and corporate content specialists will work to provide extensive content based on the direction of the unit managers as time permits.

 

Our aim is that requests for employees to create their own case studies and add content will also increase participation and universal sharing of great customer success stories, with the technical knowledge to support that success.

Sitemap of an application with 5 hubs, multiple functionality