Muzit
Overview
Muzit is a data analytics startup that monitors global peer-to-peer (P2P) file sharing of over 372 million households who have downloaded over 28 billion movies, music, video games, TV shows, software applications and other digital media. The Muzit platform enables their clients to analyze each houshold’s category specific torrent traffic, downloads and meta data allowing them to build targeted IP lists for direct advertising and marketing campaigns.
Role
- UI Design
- Rapid Prototyping
- Interaction Design
- HTML Email Design
- QA Testing
Tech
- HTML
- CSS
- SASS
- Bootstrap
- JQuery
- Jira
- GitHub
- Middleman
- Design integration into Rails
Challenge
I was engaged by Muzit through a former co-worker to provide expertise in redesigning and improving the usability of the first version of the Muzit platform. The project began with an evaluation of the current site design to identify any issues impacting the user experience, overall user interface design and functionality. Based on my assessment I made recommendations to the management team identifying the critical revisions and enhancements that needed to be implemented in order to improve the design and usability of the platform.
Audience: Record labels, Entertainment companies, Companies that manage music festivals and tours, Small companies that want targeted advertising for their sales and marketing.
Evaluation
My evaluation focused on the following criteria. My recommendations also account for the adaptation of the mobile experience in the final design.
Criteria
- Navigation & Information architecture
- Search
- Visual Design
- Page Layout & Visualization
Navigation
Assessment
- Clicking the logo or "TRACES" directs the user to the same page which is redundant and not a standard navigation design convention.
- Other than the icons and labels being misaligned the Muzit admin navigation is accessible from two areas of the navigation bar. Not to say sidebars are bad but in this case impacts the visual hierarchy principle of proximity between the sidebar and the dropdown.
Search
Assessment
- The icon is misaligned in relation to the search input field and background color makes it appear disabled.
- The search results dropdown width causes the "Exisiting" label to wrap if artist has a long name.
Visual Design
Dashboard
Assessment
- The Artist Traces header and filter input do not expand to the full width of the viewport.
- The options button background color appears disabled, misaligned in relation to the icon and visually separated from the aritist image. The button is repeated for each artist on the dashboard, which is in the hundreds, and contributes to visual clutter and cognitive overload.
- The artist options dropdown list items directs the user to the artist details page (see below). This requires the user to use the browser back button each time they need to perform a specifc action within the dropdown.
- When an artist image in not available the image appears broken.
Artist Details
Assessment
- Clicking "Follow" button toggles the state to "Following" as plain text. This is an affordance issue. The "Following" state should also appear clickable to the user.
- The header statistics Total Downloaded Songs, Potential Reach and Torrents are misaligned in relation to the icons. The text size is inconsistent causing hierarchy and legibility issues.
- The date range filter dropdown is applied to each metric. Being able to change the date range for each individual metric would improve the user interaction.
- Clicking the Traffic Origins map allows both macro views and granular views, down to a given state/province. Being able to click the Top Countries list text to drill down to each state/province would improve the visualization.
Plan
Before the redesign officially commenced the management team decided the business model needed to pivot away from delivering targeted email-based advertising campaigns and instead move to providing targeted IP Address List capabilities that will better leverage and monetize the data.
I worked closely with the CTO, who was also the Chief Architect and Lead Developer, to develop a strategy to accomplish the goals of the site redesign and to establish a new nomenclature needed to leverage the IP Address List offering.
We established a timeline of deliverables broken into specific phases. Some of the existing page layouts and concepts could still be used but new designs and functionality were needed so that users could easily generate, download and purchase the IP Address Lists.
Redesign
The design process started with the creation of a high-fidelity prototype using the Middleman static site generator to derive the page layouts and components. This method enabled me to quickly iterate the designs and also provided the team with a very realistic representation of the design and functionality during the review process. Furthermore the underlying HTML/CSS/SASS/JS code can be implemented directly into the Rails application environment saving a significant amount of development time.
The following is representation of the first 4 of the 10 phases that encompassed the scope of the entire redesign taking 26 days to complete. I used Drake for the example as he is the most downloaded torrent artist/title.
PHASE 01
Navigation
With the nomenclature decided I consolidated the Muzit admin sidebar into one dropdown simplifying the navigation and added headers to organize the related navigational elements.
Search
The search input width was increased to accomodate long title names. The search results "Existing" label was removed and title descriptions were added to differentiate titles with the same name.
PHASE 02
Dashboard
The dashboard design needed to reflect two user states. One for users signing in first time and the other when they are following a title. A video was also created to show first time users how to follow a title.
PHASE 03
Title Details
The title image was changed to a full width hero image with title meta data icons and figures designed to respond to viewport widths. Worldwide Stats date range functionality is applied to each module. The Traffic Origins Countries were made clickable so users can drill down to a state/province. The Recent Torrents and Details sections were incorporated into the page instead of a separate tabs.
PHASE 04
IP Address Lists
Based on the following specifications I created a user flow to identify the required page designs and functionality.
IP Lists Specification
- Lists are collections of IP addresses based on titles, countries and regions.
- Users can add their own list.
- A list needs to be generated first because the number of IP addresses associated with a list changes by the second depending on download trends and real-time geographic data.
- When the list has been generated it is added to the Download Lists section and can be purchased using a credit card and an email will be sent with the purchase details.
- After a list is purchased it can be downloaded by the user.
IP List User Flow
Add List
IP Lists on mobile utilize segmented controls so users can readily see and view the IP lists and Downloads. An alert and Help Center were designed to inform users how IP Lists work. Iconography is used to add lists and view the full lists.
List Purchase & Download
After adding a list the user can then purchase and download the list for their targeted marketing and advertising campaigns.
Results
The design and functionality for the new IP List offering increased client targeted ad campaigns click through rate (CRT) overall by over 5% above the industry average.
The management team was thrilled to have launched a professional looking platform that was creatively designed and provided a user-friendly, responsive, mobile experience which generated significantly increased traffic and click through rates.