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.
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.
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.
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.
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.
Thank you for reading. 👌🏾