Veerle Pieters is not only a prominent member of the EE community (and one of its earliest advocates), but one of the finest designers out there on the web. She graciously contributes free material for designers, illustrators and EE folks on her blog. She was asked by EllisLab to redesign the control panel for ExpressionEngine 2.0, and we’re very fortunate to have her talk about it here. So, without further ado:
When were you first approached about EE 2.0?
That was somewhere around the beginning/middle of December 2007.
What were the requirements of EllisLab for EE’s UX? What were your goals behind the UI?
The requirements weren’t really specifically outlined or outlined in detail. It was obvious that they wanted to stay with a horizontal navigation and a stretchable layout. There was really a lot of freedom for us as they wanted something fresh in terms of UX design, a totally new approach. The structure of the site was totally rethought. They thought out a more logical structure, at least in my opinion My goal was mainly to make EE more intuitive to work with. Create a more inviting design, less overwhelming, certainly towards clients, who will use it to update their site. Another equally important goal was to create as much flexibility as possible in how to use EE. EE has a huge range of different types of users and so we knew that we couldn’t design one single UX design that would work for everyone. Our idea was to split things up into 3 major groups: beginners (people with limited access, who will update the site), advanced users and administrators. The 2 last groups would have a set of tools (preferences/options) they can access to set EE up the way they want e.g. the look of the homepage, the tabs at the bottom, the publish page etc. We only delivered the design for the beginner user, the rest wasn’t part of the scope.
When was the first hand-off materials and how did EllisLab respond?
We first delivered a set of wireframes, but we started with the homepage first. It took us a few revisions. This was early January 2008. The EllisLab team responded very well to our idea to approach things in terms of ‘tasks’ on the homepage with the 3 big boxes that divide these tasks. They also totally loved our idea to use tabs at the bottom of the page where certain content could be stored, such as the ‘Learning EE’ tab. They were really enthusiastic about this and they immediately saw new possibilities there.
Being a popular EE user, what experience or changes did you look to bring to the overall backend experience?
One of the things I really wanted to change was the overwhelming effect EE has when you first check it out, the homepage, together with easy access to learn about EE. The first impression is so important. I remember mine, but I’m a curious person and so I dug deeper to find things out. I wanted to drop the boundary there, make it inviting, look easy, etc. Secondly, there were a few things that bothered me like the File Manager, but for this I only provided ideas, not actual designs, as this wasn’t part of the scope of the project. Then of course I wanted a publish page where you can toy around with fields, and have it set up in a clean way so it is almost a no brainer for the client in how to use it. Another thing I had in mind was in the template area: have easy access to look up certain things like ids, variables etc. so you don’t have to leave the page and have it all at hand. Then there were also things that bothered me structurally, especially the admin section, but the EllisLab team took already care of most of that as they restructured the whole navigation.
You had initially completed work on a different Control Panel Theme than the current one, what were the motivating factors behind the change?
That might be a bit funny actually. The person who made the decision during our design process was Paul Burdick. He really preferred Autumn colors and so we came up with this orange and green theme, which is actually more Spring Summer, but he really liked it and we were happy with the result too. A few months later Paul left EllisLab. Also months later, I decided to deliver them an alternative theme by changing just the colors and use colors I would like to use or look at for a whole while. I was concerned people would get easily bored by the green and orange. I thought they would implement it as a second theme, but the team liked it better than the initial one, and so they decided to switch things and have the orange-green theme (I believe it’s called Fruity) as a secondary theme. Not sure what their motivating factors were exactly, but I think it was just personal preference.
You were brought on after the first beta to do some more touch-up, what did that involve?
I guess you mean right now? Because this is the first time they’ve invited me back into the process in terms of design. I’ll be going through all the pages and will advise them on improving the design where needed. One of the things is the use of the highlight color, namely the cherry red color is not used properly now. It’s overloaded with that color and that was not the case in the designs I delivered. Then there are other things like spacing, leading, typography etc. advice on form fields, buttons,... I’ll deliver them a specific style guide with (CSS) examples that will help them adjust things accordingly, plus I’ll also give them an overview of what items need special design attention.
How do you feel about ExpressionEngine 2.0 and the user-experience?
I think it has improved a lot. I’m also aware that each crucial change needs adapting, but this new version really feels good and I’m not saying this because I had my hand in the design part I think the EllisLab team did a really fine job with this new version. It is still in beta and it looks really promising. I’ve been using it for a bit now and I’m really loving it. I feel that I can do things faster because certain things are accessible quicker and are located in a more logical place. To me it feels more intuitive to use, more flexible.