Product Customization Application


The PCA Application is a web based design software, expected to function much like a light version of Photoshop or InDesign. The target demographic was core customers of a large restaurant supply company, and it’s primary use case was to design menus. The product was built in HTML/CSS and Fabric.JS as well as several proprietary CMS systems. My role in the project was UI designer, User Experience manager, project manager and HTML/CSS expert.


The PCA is a menu and marketing customization application for small business and restaraunt owners. Its primary goals are to be accessible to the average restaurant customer, and produce engaging marketing materials without the need for a graphic designer.


  • Application must be entirely web based, with no need to download plugins or drivers.
  • Demographic is Males and Females Ages 35-60.
  • Some advanced designers must use the app to generate the base templates for customer use.


An in depth look at one of the key features of the PCA Creative Editor is outlined in the help video below. For the video I provided the demo script, the voice over and the video editing.


When I joined the project a Scope Of Work document had already been established, but the approved wireframes were very sparse, and did not cover placement for all of the agreed product functions. It became my immediate priority to liaison with the development team to discover what the possibilities were for UI interactivity, and confirm with the client their UI expectations. The project scope was large, but my focus became the Creative Editor’s Toolbar, as it had the most direct impact on User Experience.

I developed a persona for the two types of User that the client planned to target. This became the basis of all design and functionality choices to to strike a balance between the two personas. The client was particularly concerned about “scaring off” the Average User with too many complicated features.

I then built several variations of the toolbar in Low Fidelity Wireframes. These were collaborated on with both Development and the Client, ending with an elegant solution that hid advanced features by default, but allowed them to be easily accessible for the Advanced User.

This final wireframe was signed off, and the product was built around these designs. We conducted extensive user testing with positive results in the accessibility and use in the toolbar. The below examples were all created within the PCA Creative Editor.


It was a joy to watch such a difficult endeavor come to fruition. Having had a hand in almost all aspects of the PCA – from concept to help videos – it is something I am very proud to have helped ship.