Overview
REVO is a Royalty Accounting Software aimed at small-medium sized businesses.
REVO is a RE-ENACTMENT of work previously completed for a client due to upholding confidentiality. My role as a Junior UX Designer was to redesign how the metadata for music royalty accounting would be represented in tables and explore different methods of uploading content to the table.
The Problem
Before an artist or rightsholder can be paid royalties, the music label needs to upload, import, reconcile, and commit statements from various sources that have used those sound recordings. These sources could be from Spotify, various radio shows, or video media. How the information is represented can be different for each statement.
My Challenge
My challenge was to design a table for REVO that would make it easier for the user to organize metadata information, navigate, and confirm royalty statements from various sources.
MY ROLE
UX Researcher, UI Designer
PROJECTION DURATION
2021 - One Month
TOOLS
Figma, Miro
Research
Heuristic Evaluation
A light heuristic evaluation was conducted for REVO’s current UI for their 1st generation product while performing the task of uploading statements and reconciling them for further tasks. I narrowed my focus to three main areas to focus regarding the table UI design:
Navigation
Ease of Use
Recognizability
Key Insights
NavigationNavigation within the software was difficult due to the lack of distinguished page headers.
There are no pagination options for the table, which is crucial when dealing with multiple rows of data
Navigating off the page does not offer any sort of “back” or ability to save pages to return to.
Ease of UseButtons are touching which are prone to accidents
There is no ability to reorganize the table data
Tables are crowded with unnecessary information that can cause cognitive overload for the user.
RecognizabilityThe table lacks iconography. Some of the functions are indistinguishable from others.
There are no system status indicators while uploading files.
Secondary Research
After collecting some basic insights from the heuristic analysis, I then conducted some secondary research on the best methods to apply solutions to Revo’s current table problems.
The ProblemRevo is a SaaS product, so discovering best practices with industry software was very difficult. I had to find similar products that provided similar solutions.
Ideation
Affinity Mapping
Once I reviewed other accounting software, I created an affinity map using Miro with ideas that could solve some of Revo’s current problems. I categorized some of the affinities based on the heuristic evaluation I completed previous to my competitive analysis. This allowed me to explore current design patterns and ideate on new ones that would be featured for the statements table
Insights
A majority of the navigation problems can be solved with a dynamic pagination feature
A review of the color hierarchy would help the user digest information more efficiently
User control of the tabular content can be addressed through the use of higher-level controls such as filters, hide/reveal, sorting, etc.
Expandible rows could help organize unnecessary metadata, but also be quickly available if needed
Sketching
I began to sketch out these ideas to see how they could work together. I focused on the table information, how it could be controlled through collapsable rows, and how uploading status could be expressed through indicators
Ensuring the rows could contain all the metadata that is associated with a statement as well as having the ability to expand/collapse was the goal of the sketching session
How the status of statement uploads was indicated was also a high-level goal for the sketching session.
Wireframes
I followed up my sketching sessions with a few more iterations on pagination and the toolbar. After that, I began wireframing some of the interactions to present how the table would look and function
Table Toolbars, Uploading Status Indicators, and Row Design
Pagingation
UI Design & Prototyping
UI Style Guide
The UI Style Guide was adapted from Revo’s 1st generation product. In order to complete the UI Design needed for the project, a remake was necessary with the addition of new elements, colors, and iconography.
Because the table would include various functions, the addition of a “Secondary Action” color scheme was necessary to build the visual hierarchy of the functions, as well as the addition of a greyscale for localized functions
Interaction Design & Prototyping
I created a short prototype using Figma and a screen recording to showcase the interactions for the new table. This focused on showing how the rows would expand to show additional information, as well as how the status for each file can be determined through the segmented circle located within each row. This will also give the user indicates that the file is ready to be reconciled for further accounting purposes.
I completed my project with a brief walkthrough of the new table for Revo. The goal was to indicate a user flow adding new statements, using the tool bar to organize and reconcile statesments. Additonal features such as the alert at the top was not apart of the original flow, but only added to give the product more depth
Moving Forward
I am excited to state that my “original” research and design for Revo’s table interface were accepted and implemented into their next-generation product. This case study only focuses on the table design and omits other features I had worked on with Revo. Also, much of the interface had been reworked or changed to protect my client’s confidentiality.
Due to the fast-paced environment in which this project took place, user research was limited to internal testing and reviewing. Moving forward, I would hope to work closely with target users to gain more user-centric insights.