The ExpressionEngine CMS control panel existed and worked for 10 years prior to having a full time designer working on it. This meant that the design and user experience of the control panel was less than ideal, and really required a ground up rethink.
Every section, feature and UI element needed to be rethought, redesigned, and redeveloped.
My first step was to see what the customers, and daily users of ExpressionEngine thought about the system they had been using for years. How did it work for them, and how did it work against them? What features would they like to see added, which features could be removed?
I set up a mini site with a questionnaire, a general feedback form, and a way for customers to add feature requests and vote on them. I gathered a tremendous amount of data from this, and it gave me an excellent starting point for rethinking the control panel.
In some ways, this mini site was also a failure. It gave a larger voice to a smaller group of customers, and it didn’t give me a 100% full picture of the needs and wants of the whole customer base, which I didn’t learn until later.
The next step I took on the journey was to wireframe, sketch, and plan control panel views and features. This included individual UI elements, and full page layouts. At the end of the day, ExpressionEngine has two main view types. Content listings, and Forms. I focused the UI plan around these two types of views, which allowed me to cover 80% of the control panel redesign quickly.
For individual UI elements, like specific form fields, navigation, and pagination I used design unit testing and a nine states paradigm to make sure I wasn’t repeating myself too often, and was covering all possible states of each element.
I approached the entire project with these key concepts in mind.
- Modular, and consistent
- New but, familiar
- Iteration, and improvement
Keeping these tenants at hand helped guide all decisions made for the UI.