CMS interface design refresh
CMS / Eventsforce
What
Eventsforce is a Content Management System where clients can build and maintain websites and booking systems for their events, such as conferences and meetings.
It has a public-facing front-end and a client-facing admin backend, so it has two very different interfaces.
Why
My first task at Eventsforce was to update the new version of the Eventsforce platform’s admin back-end CMS (X5) look and feel - the older Classic version was quite dated.
Aside from making the system looking more modern and interesting, it also served the purpose of differentiating between the older Classic version of Eventsforce, and the newer X5 version.
How
- I was asked to make sure that my suggested changes could be done with CSS and by overwriting images only - no code or structure changes
- I set about removing design motifs which aged the interface, such as textured backgrounds, gradients and drops shadows
- I placed a pattern into the header background - the idea being that we could update it seasonally (we never did).
- I updated the colour scheme to that of the Eventsforce brand (after some experimentation with other colour combinations), and changed the fonts
- Later, we updated the navigation system from horizontal to a left column - this was just a visual change, the sitemap remained the same
Result
- The design is quite different from that which you’d ordinarily see in an admin back-end! The pattern and the colour combination makes it quite distinctive and brighter than most CMS interfaces
- The new menu appearance and position did a lot to change the visual page design and make the page seem more modern - I purposely based it on the Wordpress menu system becuase that would feel familiar and less intimidating to users
- I created a new Figma component library each for the public front-end and admin back-end, with additions and updates made every time I add something new or refine our page and form components
Design
Home page - before and after
Properties page - before and after
Sessions page - before and after
