Upfront is a Drag and Drop website building platform for WordPress. I have worked on the the project for over 3 years as a product design lead, and have seen it through from the initial idea, all the way to a fully functioning product.

A spec for UI componets & states was created to help maintain consistency and stick to DRY principles.

Smooth text editing experience is a vital part of Upfront. Pictured below is the evolution of the text editing toolbar from 2014 — 2017 (left to right). The UI is getting progressively smaller and less contextually obtrusive, as you can see in the last image, the formatting panel is re-designed so as to cover the least amount of text possible.

Upfront text editing toolbar evolution. Initial toolbar - 2014 (CK Editor), improved toolbar (Redactor) - 2015, re-designed toolbar (Redactor) - 2017

Over the 3 years, a number of complimentary icons have been created as a visual aide, in order to help users identify various actions / paradigms faster.

Image Element was perhaps the most challenging experience to design. It went through multiple revisions over the years. The main idea was to create a contextual image cropping experience where users get to art-direct their images right where they are.

Upfront image cropping experience wireframes

Image Cropping UX demo (22sec)

Pictured below are just 3 of the many popups within Upfront. Media Manager, Theme Fonts & Posts / Pages (left to right). All these are inside Upfront, so unlike traditional WordPress approach, users are able to navigate among their media, fonts or content without leaving the front-end of their site.

Media Manager popup. A means for users to upload and navigate through their uploaded media.
Theme fonts UI. A interface for users to add / manage google fonts across their theme.
Posts and pages UI, for navigating, searching and filtering through posts & pages.

Over time, Upfront blossomed with features and experiences, eventually spurring the Upfront builder which allowed users to start from scratch and create a fully functional Upfront theme that they can install on any site that uses Upfront. A detailed specification describing the GUI was created in order to maintain consistency across the platform and create code that followed DRY principles and could be easily re-used by other parts of the platform.

Component - post settings
Component - Element Transforms
Component - Gradient Backgrounds
Component - Element Transforms
Component - Linking Panel
Component - Element Padding
Component - CSS Shadows
Component - Color Picker
Component - Opacity
Component - Image Background

Thank you for reading. 👌🏾