Mood Media MVision App Redesign

Mood Media Client Request:

Redesign Mood Media’s backend client user interface, MVision, for HTML5

Responsibilities:

Working with the development and visual team, research and gather information on Mood Media’s backend applications for improvements. Redesign MVision 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

 

UX Research: 

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

  • *need a new application selection home page

    • new icons that make sense as to what each application is/does

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

  • new loading screen - remove spinning squares

  • 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 to a user's media exposure (tags, playlist, design, and channel libraries, publish, force update, etc.)

  • *incorporating pagination instead of scrolling - scroll feature especially on the editors do not work well and users are unable to select a specific item

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

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

  • still allow a user to save their workspace layout

  • keep thumbnail and list views

  • reduce and organize icons in main application bar

  • redesign properties panel components

  • keep media tagging capability

  • *generate thumbnails for playlists & tags - last three? - currently only shows a large icon with no previews of what content is included

  • playlist library and editor should share the same color so a user knows they work together - same with the design library and editor

  • *add a loading icon for media - give a user a better idea of the wait time

  • each media and panel has property options attached

  • include media types - icons across all panels

  •  *re-design layout and functionality of the design library - zones get distorted and not a lot of space for selecting templates or content  

  • update category selection bar

  • NEED faster loading times

  • be able to drag and drop/reorder content in editor panels

  • media library

    • keep search feature and increase filter options - tags, media type, folders

    • *create folder system for organization

    • *be able to share folders/content down to other workgroups

    • *be able to select more than one template at a time - up to 5?

    • *have templates and media load as a user scrolls for quicker loading times

    • *when adding a template, allow a user to set all properties immediately - instead of having to select it again from the library then set the properties from the properties panel

    • *when adding a template, have more filter options especially by zone size

    • *unable to delete an item from media library if being used elsewhere - would LOVE a list of where the item is located with the option to delete from each or all locations at once instead of having to search through every panel it may be located in

  • channel editor

    • *should show next set of thumbnails instead of scrolling uncontrollably and jumping through all of them - makes it nearly impossible for a user to select a specific item (pagination)

  • *event channel playlist

    • be able to schedule specific content to play - option to wait for looped content to finish playing or interrupt current content

    • *create a designation in the playlist library for event channel playlist - specific content 

*designates a new feature option

 

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

  • updated panel category filter menus

  • media library

    • designed a folder system

    • created sharing capabilities of all media

    • default images for all media

    • new icon loading sequence for menu items

    • ability to select multiple templates at a time

    • new filter options for template library

    • created a modal window to allow a user to delete media from specific locations without having to search for it in every panel

  • new cleaner and clearer properties panel

  • included tool tips for all icons

  • pagination used instead of scroll - increase navigation of panels and allows for quicker load times

  • created a count of items for editors to identify number and location

  • created new layout and function of design library panel

  • locations panel has updated icons and user abilities for sharing content with different sites and members

  • custom icon font 

  • last three media in playlists and tags displayed as content identifiers

  • indicator added to playlist library to distinguish between loop and event playlists

  • event editor created as new feature

  • drag and drop feature added to all editors

  • 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 over 200 screens including modal windows, previews, dropdowns, menus, navigations, etc. 

 

 

*all content property of Mood Media

 

 

 
 
old_mvision.png

Previous Version of MVision

(Flash)

 
 

New Version of MVision

(HTML5)

 
 
custom icon font

custom icon font

 
 
 
new flat color pallette 

new flat color pallette 

 
Screen Shot 2017-03-26 at 5.28.06 PM.png
 
 
 
Screen Shot 2017-03-26 at 3.33.30 PM.png
 
 
 
 
Screen Shot 2017-06-24 at 9.43.36 PM.png
 
 
 
Screen Shot 2017-03-26 at 3.36.22 PM.png
 
 
 
Screen Shot 2017-03-26 at 3.32.48 PM.png