Providing UX consultation and front-end build on a new in-line CMS editor for eCommerce sites

An Introduction

bluCommerce's admin is incredibly complex; providing tools to process orders, add SKUs, manage customer accounts, update store locations and more. All of these use-cases are best suited for a separated admin, one that is distanced from the front-end of our clients websites. However, with CMS content; we came to a realisation that clients should be able to edit their website like they were editing a document on their computer - in-line and instantly. Earlier this year a small team of developers and designers made it their goal to solve this issue.


A very early version of what became our CMS editor was built almost a year ago as a way for clients to cross-reference editable language with the database table shown in our admin, so we took that as step one. The second step was providing a way to edit all other dynamic areas such as images, videos and products; as well as improving the usability of editing language whilst we were at it. A first version was built in a few weeks by a back-end focused team - there were lots user experience niggles that I wanted to fix up, but the product and idea were solid. After this version was demoed to a few clients, I lead a team of designers and front-end developers to take on their feedback and improve the usability the back-end team had created. In those few weeks we fixed a lot of bugs and issues, as well as really bring the user experience in-line with more native apps/industry leaders we're all used to.


The in-line content editor injects extra elements around areas that are editable to provide a visual cue that you can click these to update your content. We know which areas are editable based on our front-end architecture already, so this was a natural progression of the feature we already had. We then add a bar at the top of the page that loads all necessary styles and functionality, such as the preview toggle and deployment popup/user interface. Ideally a future version would not inject elements but overlay some extra click areas that track position with javascript, as injecting elements can have a few adverse effects on styles.


The in-line content editor has been one of the biggest successes in recent history at blubolt - removing the barrier for our clients to add content to their sites (many exclaiming there were areas they'd never even known they could edit before this tool was built). I hope the team at blubolt continue to innovate on this tool as I see it becoming a great selling point for the platform. We managed to ship something I am incredibly proud of, and that shows how well our back-end and front-end teams can work together; given a combined goal.