Content Editor

Goal:

Create a customizable & mobile friendly WYSIWYG content editor.

Overview:

A flexible text and media editing tool featuring a pop-up editor which was to be the centerpiece of a new live editor content management system, as well as an inline version to be used in several other applications.

Functions which this content editor needed to be capable of included image cropping, accessing and editing source code, creating and editing tables, and many different forms of text manipulation.

Wireframes

Research/Design:

I started with some basic user research and once that was complete began the preliminary design phase, which consisted of wireframes and icon design.

Following stakeholder approval I took those designs and created a fairly robust prototype which became the main tool in a series of usability studies. I took my findings from those studies and wrote out a detailed test report outlining what worked well and which areas could be improved on.

Test Report

Style Guide:

After updating the product design based on my findings from the various usability studies, I put together a 20 page style guide featuring detailed diagrams and descriptions of all the various functionality and design elements. This would be used by developers to make sure there were no inconsistencies with the design and the finished product.

Style Guide

Development:

Finally I created a static version of the product and passed off the style guide and all of the front-end code to another developer who would provide the logic behind the product. This included configuration to allow developers using the product to personalize the editor for whatever product it was being used in, who could choose which tools to include, as well as cosmetics such as border and background coloring.