Mood Media HTML Template Editor App

Mood Media Client Request:

Design a new web application for Mood Media’s internal backend user interface – app will be used by the development team when creating new client HTML5 template designs and establishing editable properties within the client facing interface

Responsibilities:

Working with the development team, research and gather information on necessary features. Design HTML editor for HTML5 with user experience in mind. Review and test application, record and outline bugs, provide updated versions and assets to development team

UX Research:

  • dev team proposed one screen layout with many panels; however, not the best use of space and wouldn't allow for a large workspace or a constant preview or library view especially on smaller devices
  • instead of separate panels, multiple screens would allow for more space and usability especially when selecting a template from a library
  • template library - search feature and ability to filter by tags, alphabetically, list or thumbnail views would be great
  • incorporating pagination instead of scrolling
  • workspace with preview, ability to add, remove, or copy editable properties 

Execution:

  • designed to coincide and work with Mood's MVision application since all properties set by developers must carry over to the client interface
  • filtering abilities of templates incorporated: tags, alphabetically, list and thumbnail views
  • default thumbnail created if no thumbnail available 
  • pagination used instead of scroll - increase navigation and allows for quicker load times
  • each screen guides a user to the next instead of having a single screen application with multiple panels
  • preview options include zoom, rotation, open in new window, and view code
  • feature options listed in left panel bar with space to add many in the future as more become available
  • properties of each editable feature has ability to be locked from backend by developer - disabling a client/user from editing it from the client-facing, MVision, application
  • every editable property has been accounted for and designed for clear functionality
  • created a custom icon font 
  • increased productivity for Mood's development and design team for creation of HTML5 client template libraries and ability to edit each template and push updates into production

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

 

Editor Windows

Designed 40+ screens including modal windows, previews, dropdowns, menus, navigations, properties, etc. 

 

*all images and videos property of Mood Media

     
    Screen Shot 2017-03-26 at 5.44.49 PM.png
     
    •  
    Screen Shot 2017-03-26 at 5.49.41 PM.png
    Screen Shot 2017-03-26 at 5.45.40 PM.png