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


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

(interviews with development team along with potential users)

  • 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 



  • designed to coincide and work with Mood's MVision application -all component properties set by developers must carry over to the client interface

  • filtering abilities of templates incorporated: tags, alphabetical, list and thumbnail views

  • default thumbnail for when no thumbnail is 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

  • component options listed in left panel bar with space to add many in the future as more become available

  • properties of each editable component 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 a specific design

  • custom icon font 

  • created a drag and drop feature for user to sort and create a hierarchy of the components

  • 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


    Initial Proposed Layout

    by Development Team

    New Proposed and Final Layout

    by Corinne

    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