Mood Media Monitoring App

Mood Media Client Request:

Redesign Mood Media’s backend client user interface monitoring web application for HTML5

Responsibilities:

Working with the development and visual team, research and gather information on Mood Media’s backend applications for improvements. Redesign monitoring application for HTML5 (replacing Flash), including new features to increase user experience and interactivity based on research. Review and test application, record and outline bugs, provide updated versions and assets to development team.

Execution:

Used Google Material as a basis, designed in Adobe Photoshop, custom designed icons and icon font using Adobe Illustrator, documented and packaged for development team- increased load-time, user experience and user activity

 

UX Research: 

(interviews with clients, internal sales, marketing, customer service, application trainers, and development team)

  • *need a new login page

  • keep panel system - like being able to tab panels and enable or disable panels from workspace

  • unable to tell which panels are enabled or disabled in workspace area

  • header bars are very thick - not efficient use of space

  • update and create new icon set - many are unclear as to what they do, need icons that are more intuitive and easily identifiable

  • keep tree system for workgroups and site list

  • gradients and "bubble" buttons make application look and feel very out-dated

  • increase default sizes of each panel and locations of each panel

  • replace pie chart with donut

  • keep thumbnail and list views

  • re-organize icons in main application bar

  • be able to easily identify player status in site list

  • combine panel windows: properties, description, activity, notes - create tabbing system

  • redesign preview of played content - be able to flip through all content and see more than one item at once

  • easily be able to find all player info in properties panel

  • should have a record of notes and be able to send notes to others in workgroup

  • update and create a better system for detailed view chart - difficult to group

  •  NEED faster loading times

 

Execution:

(limited ability to overhaul entire design and transfer all components and data)

  • updated overall look and feel by using solid colors, reduced heights, increased whitespace, updated icons and buttons

  • redesigned main application menu bar 

    • created new icons along with enabled and disabled states

    • condensed main menu items into a hamburger menu with a flyout bar

  • reduced height of all panel headers and made widths flexible for icons to flex with size of each panel

  • new cleaner and clearer properties panel

  • included tool tips for all icons

  • created a count of selected items in detailed view 

  • created new layout and function of properties panel by creating a "tabbing" system of the following panels: properties, description, activity, notes

  • custom icon font 

  • created new list and thumbnail view for main view panel

  • properties panel now displays last three thumbnails of played content - created a new system to view last played content with next, previous, skip ahead, skip backward

  • user tested and prepared detailed bug and error reports for product and development team pre and post production

  • significantly increased overall loading time, user experience and user activity

 

Designed in Adobe Photoshop, custom designed icon font using Adobe Illustrator, documented and packaged for development team

 

 

User Panels

Designed 70+ mockups including modal windows, previews, dropdowns, menus, navigations, etc. 

 

 

*all content property of Mood Media

 

 
 
custom icon font

custom icon font

 
color palette

color palette

monitoring_imac.png

Redesigned Mood Media Monitoring Application

 
monitoring_screens.png
 
Screen Shot 2017-03-26 at 5.33.41 PM.png
Screen Shot 2017-03-26 at 5.34.15 PM.png
 
 
description.png
 
Screen Shot 2017-03-26 at 5.34.26 PM.png
 
Screen Shot 2017-03-26 at 5.34.47 PM.png