7D CMS

Design, UX

About This Project

The 7D CMS was originally created for one of the UK’s leading suppliers of luxury holidays, Inspired Luxury Escapes, allowing them to create and manage information on tens of thousands of holidays across more than 30 countries. It featured a page builder allowing them to create custom web pages using a drag and drop interface, as well as a content management system, that could automatically generate pages based on imported and manually inputted data.

7D Digital saw the potential to sell the 7D CMS as a stand-alone product, however as the CMS had been designed as a very bespoke system, it required a fair bit of work to make it more accessible to everyone. It was at this stage that I decided a large improvement was required for the overall user experience, which you can see in the below designs.

The Client

7D Digital is a development agency who’ve worked on projects across a variety of industries including networking & communications, pharmaceuticals, travel, social media and internet connected devices.

Page Builder

This is the main section of the CMS that features the drag and drop interface. A big improvement to the current interface includes a live preview of the site as it’s being built, with the ability to edit content inline. At present, each section of the page is displayed as a coloured box, with content being managed within modals.

Page editor

Layouts & Components

Page section layouts Components

Branding Settings

At present, any styling of a website created in the 7D CMS is handled by an external CSS file, which is managed by 7D Digital. To automate this process, and to help users avoid editing CSS if they have no experience, I designed a front end form that would allow the user to add a logo, set up colours and manage typography settings, resulting in the CSS being automatically generated. As an added bonus, a branding guide PDF could also be downloaded for offline use, showing all the settings.

Colour settings

Typography Settings

Typography settings

Branding Guide PDF

Brand Guide PDF