The full story of my ExpressionEngine 2 design involvement

The best part of ExpressionEngine is its great community. Proof of this is the well thought and written article A plea to Ellislab by Kenny Meyers. In this article Kenny voices some of the opinions that were formed during EECI 2010, Leiden, NL. One of the areas he touches on in this post is the UX problems in ExpressionEngine 2. Since I helped Ellislab in designing this I feel that I need to clarify a few things about my involvement.

The control panel needs a designer’s eye, not just a theme, especially for a CMS that is lauded by designers.

High time I guess that I wrote an article about the interface design work I did for ExpressionEngine 2. I've seen people jump the conclusion that everything that they see UX-wise is designed by me, or that I decided what it should be. Working with clients is a two way street and involves compromising and letting things go. I've touched on that subject last year when I spoke EECI conference in Leiden. That talk only scratched the surface. Today, there still is this misunderstanding, because people don't know or see which part I was involved with and what part was out of my hands. Hopefully this article will help clarifying this.

The 'brief' briefing and 'tight' deadline

I started working on this project mid December 2007, the deadline was around end of January 2008. With the Christmas season in between I had to come up with a GUI design in about 1 month and a half (between other jobs running at that time too), where the briefing was no longer than 580 words with some suggestions of how the structure should look. Just think about this for a moment. Talking about a challenge, right?

How I envisioned the new EE2 CP

One of the items mentioned in the briefing was to work with beginner, intermediate, and advanced. The way I envisioned this was to use a UX that has different levels. The starting point being the client. No matter what you say, it's the client that has to use ExpressionEngine. If he doesn't like it, chances are you aren't going to build many projects with it. In an ideal world, where time was no issue a survey of clients using EE would have helped a lot more. Now I tried to take everything out that confuses clients in EE1.6 (from my little experience in watching clients use it and asking me questions about it). I wanted to make the structure more logical for them too. In doing this I had to adhere to what was set in the brief. The structure was already largely defined so I couldn't make very drastic changes. I would have loved to make it adapt more to how clients think about the structure of their site, they think in pages and sections etc. That's why the add-on Structure is successful as it takes those principals to heart.

One of my initial EE2 CP homepage wireframes

The way I saw these versions of the control panel, was to have a different approach for each group of users. I divided them into: the client, the designer and the developer. The client is the one I tried to start from and where the current design is based on. That's why it looks 'pretty' to some, as it needs to appeal to the client so that he or she feels comfortable using it. For the designer I would have taken it one step back and for the developer it would almost look 'pale' compared to the others, in terms of skinning. The thing is, you just can't design one and the same theme or skin for these different groups and have everybody liking it. For example, a developer will not want the images I've used, he might prefer a smaller font, less rounded corners etc. Somehow the other groups never came to life and everything got built on top of my client starting point.

Besides the skin, I also saw a different CP in terms of structure and content for each of these groups. For example, the client has totally different tasks, than the designer or developer. He'll be editing and posting entries. He needs to see as less as possible. In other words the CP needs to be adaptable in that way. Maybe in a later stage it could go 1 step further with some kind of preference panel to refine certain settings. I thought this was something vital, as Ellislab suggested to have these groups too remember: beginner, intermediate and advanced. We both agreed, too bad that none of this really saw daylight.

The few pages I designed

Another important thing I should bring up is that I designed only a few of the major pages of the Control Panel. Those who know EE2, will also quickly realize that there are a bunch of pages. EE2 isn't what I would refer to as small. Considering the limited timing I only got to help the team, it's impossible to design them all. What follows is a list of pages I delivered a design for:

CP homepage

CP Admin page

CP Design page

CP Edit page

CP Publish page

CP Template page

As you can see the list is rather limited, but these were the screens I designed and delivered as Photoshop files. It was a start for the team to get the ball rolling and create a demo version for SXSWi 2008. Not everything what you see now in EE2 is 100% in line of how I envisioned it in these 6 pages.

EE2 CP Publish page template design in the color scheme of my choice. Notice the handles to indicate that the fields are draggable.

Suggestions that never got implemented

Because of this short time line a lot of things never got implemented. In the whole process of designing this, there were a lot of smaller discussions going on about making things easier for the user. Things like less clicks to get to a certain area of the CP. There was for example the Admin section that I thought could use some work in terms of making things more logical. One aspect would be the way you manage comments on entries, something I deal with here on the blog. A lot of these suggestions all got heard, but because there was so much going in such a limited amount of time some of those got lost in the grand scheme of things. Some adjustments to the way you handle comments should see daylight soon in a future point release.

Being kept in the dark during development

The thing is, after I delivered the Photoshop files of these pages, I wasn't really involved anymore in their development process. The first glance of my design work was at the demo of SXSWi 2008. It's not that the intention wasn't there to involve me judging by this quote below.

On some level, you are going to be our compass on this design. Pointing us in a new direction to help us explore a new way of getting people to use and understand ExpressionEngine.

— Paul Burdick

Somehow it got side tracked by whatever issues popped up during development. I didn't get to see anything *real* until the first beta release, just like most other people who had access to the beta version. My first reaction was one of being overwhelmed. I finally got to see it in action and take it for a spin. What followed was a bag of mixed feelings, because I saw a ton of imperfections. Knowing that people knew 'I was the designer' it got me a bit frustrated because the designer that I am wants to make things pixel-perfect and a lot of things weren't. In a way I was proud to be part of it, but on the other hand I wish I had full control to go fix what I thought was still wrong.

During the beta period I spend about 2 full days going over each CP page using CCSEdit's Xray feature to track the specific CSS and trying to fix things. In some situations it was impossible because it affected things that were OK elsewhere. For example, I used 2 different types of buttons. There are the priority buttons which use the highlight color (cherry red), and there are the buttons with less priority who have a more subtle grey-ish styling. On some pages, all the buttons had this cherry red color, which wasn't the case in my design. When you use too much of that color you loose its hierarchy. The frustrating part was that it wasn't always possible to fix this as the HTML (class name) had to be changed. Going through the CP page by page like that was really a tough job. It wasn't my code and I really had trouble finding my way in the logic behind it, if there was any. I delivered a 16 pages PDF with things to edit, plus explanations. Working with somebody else's code is always difficult and if I had done the html & css I would have approached things differently. One thing I touched on was the big usage of jQuery in the CP. If I had it my way I would have used more CSS3 for styling, rounded corners and animation where possible. If you didn't have a more modern browser it would still have worked alas with less panache.

Another thing that frustrates me is that there are no handles to indicate that the template groups in the Template Manager are draggable. I didn't have any involvement in this, but it looks like I'm the person responsible for that decision. Guess what I'm not. When I delivered my templates nobody mentioned that this would become draggable in a working version. In fact, I only found out by accident that you *could* drag them. This is one of the many little things that people seem to misunderstand and blame me for.

Compromises

At the time I was working on the interface, the person in charge was Paul Burdick. Paul is a very nice guy that you can have great laughs with, but he's also very strong minded. Don't misunderstand me, I love working with people that know what they want, much more than with people who haven't the faintest idea. To give you an example, in my original design, I opted for a horizontal sub navigation, because I didn't want to repeat the annoyance of having the menu close again when you accidentally leave the click field. It's very annoying when the menu collapses and you have to repeat your action. The way I envisioned it was that the crumb trail would be temporarily hidden each time you go into the menu to reach the sub menu. This was my suggestion to go against Paul's argument of trying to save as much vertical space as possible. My argument didn't stand because Paul didn't really like the idea of a horizontal menu. He strongly suggested to go for a vertical menu instead. He wanted it to be like how desktop menus work. He was also very verbal on loosing pixels of screen estate. I thought it was better to loose some screen estate than to get frustration in return. I've lost this battle and eventually gave up on bringing it up. You know, you have to move forward. This is just one of the situations where you can't just do what you want personally.

Flexible CSS for custom skinning

As I mentioned earlier, it was also my intention to have different skins for each group of users. One of the ideas that I had was to create the skin in a smart way, so that people could easily use their own custom CSS for colors or typography. I learned this years ago while working on a Google Blogger skin. Each skin consisted of 3 stylesheets: layout, color and type which makes it very flexible for custom skins. I wasn't really involved in the coding part, but it would have been ideal for people to change the cherry red, or pink, for those that should learn colors :) The current default theme was entered by myself because 'I' preferred it, and I asked if they could provide it as an alternative theme. The initial default theme was green/orange (Paul's Autumn theme). I wasn't 100% happy with that theme but it was a compromise that I could live with. So I entered 'my theme' instead, one that I created rather quickly. Since Paul had left EllisLab by that time, the team preferred this version over the green/orange one, and so they decided to make that the default theme instead. It was never my intention to make this theme the default one.

On the topic of custom theming

The thing with custom themes like Leevi Graham's morphine CP theme is that you have total freedom to do what 'you' want. So it's easy to say 'it's nicer' or it 'tweaks the CP styles removing many of the "flourishes" and promoting a more professional image'. Leevi toyed around with the html and css via his own add-on, all things that aren't possible when you aren't involved in the coding part and when you work with a client. If I did everything my way, things would look and function different too. Some people don't seem to understand this when they judge the CP. A good designer works with clients and meets them halfway if needed, and gives up battles that they can't win in favor of finishing a project on time.

Conclusion

Hopefully this doesn't come over as a rant because that is the last thing I want. Just try to see it from my perspective that it is a little frustrating to see people say that EE2 has UX problems and make a leap in their mind that I was responsible for it. Believe me when I say that I am not easily satisfied or give up quickly when discussing UX or UI problems. However I was less involved then I would have liked and I tried to work with what they gave me. Do I know everything? Not in a long shot, I make mistakes too just like anybody else. However I feel that I needed to say this. Don't get me wrong I am still proud to have worked with the wonderful people of Ellislab and I would do it all over again but with the lessons learned in mind. I'm sure they think that too after reading Kenny's article. We all live to learn. Many of the points that Kenny touches on are valid. A full-time designer at EllisLab would certainly help improve things. I'm speaking against my own shop here, but it would be for the greater good. When there was such person there during the development of EE2, many of the issues we are having now would probably have been solved. A good in-house designer would have understood the path that I set out and would have followed that up better with questions towards me during the development stage. Design is now an afterthought most of the time. I'm still excited to see what the future has in store and I'm still convinced that Ellislab will guides us in the right direction eventually.

Filed under

You may also like

Comments

Thanks for posting this. I think it serves to reinforce the need for an in-house designer privy to EllisLab’s top secret plans and who will be heavily involved in the actual construction of the interface. A UX designer can only do so much if the end of their involvement is delivery of PSDs.

It was good to read your post about your involvement in the EE2 design. Anyone who has been involved in a project of this size knows that it will invariably involve strong opinions and compromise.

I would be interested to know what kind of usability testing was done by Ellis Labs prior to design and prior to deployment. Did they just rely on community feedback, or was more structured user testing done? Given the significance of the project, I would hope so!

I don’t even think it was necessary that you had to “defend” yourself. You did your job and the client changed things. That’s pretty much how it ALWAYS is. If people are blaming you, especially designer/developers, then they need to take a step back and rethink their hypocritical statements.

This was both informative and graceful- remarkable in light of the passions aroused by the situation and your disciplined silence (or nearly so) for so long.

I suspect a few (thousand) expletives on all sides have been omitted, but you brought across the key point: working with clients (in your case, EllisLab) must never become a zero-sum game. Compromise sometimes represents the height of professionalism.

I completely understand your position. This is one of the main reasons why I would never work as a designer for other people. I used to work in a printers when I was young(er), and got very frustrated at the amount of clients who did not want to take any advice from me. I don’t have the patience to explain to clients a thousand times why certain things should be. I love graphic design, but I hate losing control over my own designs.

I believe you should’ve written the HTML and CSS for your design, and then let the developers get it working. Also, you should’ve been working with them on the CP until the end and not left out of the game after you delivered the PSDs.

ExpressionEngine 2’s control panel needs some serious fixing, and unless EllisLab hires a professional UI designer, I don’t think that’s going to happen any time soon.

It’s great to hear the story behind this finally and know the constraints that brought about the current iteration and your involvement.

Sounds like this project was approached far too much as a skin job in their heads and not what they really need, which is a UX designer to create a new model for the control panel and yes - lose some screen real estate - to get rid of this tedious current horizontal system.

There are loads of small details as you said and honestly, dragging the templates in a group or having a sliding sidebar is not nearly as important as a logical and quick system for editing your content. I think there was focus in many wrong areas that could have been simplified and the time better spent elsewhere (once again, outside of your control).

A good designer works with clients and meets them halfway if needed, and gives up battles that they can’t win in favor of finishing a project on time.

I think that’s the key phrase here and I’m sure each and everyone of us can point to a site design we did and say: this was a client request where I just gave in.

Again, Veerle, no one is assigning blame when critising the current control panel. Frankly, you’re designing a control panel for one of the toughest crowds: other web designers/developers, each with their own strong opinion on how this should look and behave. Respect!

Veerle, your portfolio speaks for itself. It was easy to see that you didn’t have 100% control over in the current CP. Anybody who has worked on a large project like this knows that the designer’s initial vision sometimes ends up being used just an inspiration for the finished product. Also, a majority of the issues are with the Javascript bling, which are more of the developer’s arena.

So glad you posted this, Veerle—it totally confirms my suspicions about how / when EllisLab involved you in their process.

As much as I would agree in principle with Kenny Meyers’ call for EllisLab to hire and in-house designer, the deeper issue is EllisLab’s relationship with UX altogether (including IA, IxD and end-user product design).

EllisLab is a great engine making company, and they are a company where the leadership care primarily about the engine. The engine is their competency.

What we all wish for is an EllisLab where UX is also their competency. And, that does not come about simply by hiring a designer, however great the designer is.

Veerle, I posted a comment on Kenny’s article and mentioned the need for a full time designer UX/UI person at Ellis Lab. That was not meant as a criticism of you at all. You’re definitely someone who inspires me to keep trying to improve my design skills.

We can see the care you have for your work in the articles you post here, the design of this site and the work you post in the Duoh portfolio. It’s fairly obvious that the same level of attention to detail and thought hasn’t been applied to the EE control panel so far. Let’s hope it is in the future.

Things you mentioned above like progressive enhancement with CSS, less jquery overuse, editable colours, handles for draggable items, etc. would all be very welcome adjustments.

Way back in the EE-1 dev period I recall having an email exchange with EL (probably Rick & Paul) and expressing the fact that they were probably a designers worst nightmare. Things haven’t changed I guess :-)

Like you, I prefer clients with opinions - even strong - and always listen and take it all under advisement. But most clients would be better served if they leave the final design/UI decisions to “the designer”, the “specialist”. Unless there is a really good reason to deviate.

Thanks for the explanation, Veerle. I think this is a great example of why designers need plenty of time for planning and research. And also that they should be involved throughout the whole project, not just at the very beginning or toward the end.

On some level, you are going to be our compass on this design. Pointing us in a new direction to help us explore a new way of getting people to use and understand ExpressionEngine.

This quote is truly starting to annoy me, Veerle, as I departed EllisLab prior to the two years of active ExpressionEngine 2.0 development. The entire process of how ExpressionEngine 2.0’s design was done, how development/design decisions were taken out of my hands, and my lack of control over my own development team are major reasons for why I left.

ExpressionEngine 2.0 and its Control Panel design are an incredible disappointment to me, to the point of embarrassment. That CP design you developed was never the direction I wanted. That quote is me trying to work within the situation.

And that cannot possibly be wholly true. I despise those colors. I have always preferred the blues and darks of the original CP. If I actually did say that, I was insane at the time and beg forgiveness.

I’m far from a designer. I’m sort of like an anti-designer. I could take someone else’s design and only make it worse with my additions. If a designer followed any of my suggestions she’d be wrong. This all said I enjoy reading about design and your site is one of the few design blogs I read on a regular basis. I think this is because you write about EE so often.

I hate how comments are approved in EE2. There no way that scales. If you have even a mildly popular site you’d spend all day clicking your own posts to see if they’d gotten new comments to approve. Add MSM into this mix and it becomes impossible. So I’m glad you expect this to change soon.

I did cringe as I was reading the abuse the CP was getting on Kenny’s site. It seemed like a pile on. For the most part I like it over EE1.6’s. I’m not a huge fan of all the drop menus, but otherwise I think it’s easier to use and more logically laid out. Stuff is just where I expect it.

I don’t think this post comes off like a rant, but it does seem a bit defensive, and I can understand why. If people are hating something you had no control over that’s unfair. If EL let someone like me at your design before it was launched you’d want people to know that too.

Morphine was originally created to address issues I had with the CP HTML markup (not the design) and the inherited negative affect on third_party development. I found it much easier to create my own set of styles and markup to create a consistent look and feel in all NSM addons.

I started “tweaking” the CP much later in the development of Morphine and it still remains an optional part of the addon (not required for my addons). The tweaks are not meant to be an attack on Veerles design / the current theme.

Apologies to Veerle if they have been interpreted that way.

Personally I was hoping theming the CP would be much easier but without optimised and well thought out HTML it’s going to be impossible. As soon as you have to change the HTML templates there are all kinds of issues with keeping up to date with EE version changes. The only way to theme the CP is through CSS skinning.

Projects with the parameters you had to work within never work out well. I’m shocked that a company pushing out a product so revered by developers and designers would run one of the fundamental aspects of the user experience so poorly.

For them to use a pillar of the community in such a way is really unfortunate, as well. This is the kind of thing that could really hurt your reputation and business.

I expect that the control panel will improve over time, hopefully with some of your original goals in mind. It’s the least they could do.

This quote is truly starting to annoy me, Veerle, as I departed EllisLab prior to the two years of active ExpressionEngine 2.0 development. The entire process of how ExpressionEngine 2.0’s design was done, how development/design decisions were taken out of my hands, and my lack of control over my own development team are major reasons for why I left.ExpressionEngine 2.0 and its Control Panel design are an incredible disappointment to me, to the point of embarrassment. That CP design you developed was never the direction I wanted. That quote is me trying to work within the situation.

That quote Paul, was said to me in the very beginning on Active collab before any design was done. I had no idea you felt this way and you never expressed yourself in such a way that I would get *that* clue. As a designer I have no idea of what goes on internally and if nobody communicates this, it is impossible to for me to change the direction of its design. I’m not clairvoyant after all :D

The initial default theme was green/orange (Paul’s Autumn theme).And that cannot possibly be wholly true. I despise those colors. I have always preferred the blues and darks of the original CP. If I actually did say that, I was insane at the time and beg forgiveness.

Maybe you were a little insane at the time :) I still have the original briefing where it said “Like the current colors a great deal, but move away from the blue/green into the autumn range of colors.”. The funny part is that these colors were very though to work with. No worries I forgive you :D

How different things might be today if your talk at EECI2009 had not been about what’s so wonderful about EE2’s new design and how we got there, but instead a comprehensive checklist of your frustrations and disappointments. Such a presentation would have been electrifying—and very possibly transformative for the product.

Hey, it could still happen. Rather than giving you a month, they could come back to you and give you as much time as you need.

This time though, if cherry pink is still the default color, then we’ll know just who is responsible…

I rate you very highly Veerle, but I never really understood why the control panel is so overdesigned.

To be honest I can’t really see a notable difference between your design above and the end result? Not one that indicates they got it wildly wrong anyway…

Notice the handles to indicate that the fields are draggable.

The caption on your screen shot doesn’t make sense to me sorry? The drag handles look like they do in the shipped version?

Also, can I ask what the pencil icons were intended for along each item in the sidebar? Was some sort of edit field/tab functionality intended there?

I would love to see an admin that is quiet and unpronounced - that lets the author/developer/designer get on with what they need to do without it trying to wow them visually.

I appreciate what you mean about the html/css in there, it’s impossible to work with. I actually modified the view files for my own theme but then found out the hard way how dependent the cp is on jquery. Move a div and boom, some core functionality is gone and there goes the afternoon debugging compressed js :(

Over 2 years of development and one month of rushed, poorly managed creative is an epic fail by everyone involved.

I rate you very highly Veerle, but I never really understood why the control panel is so overdesigned. To be honest I can’t really see a notable difference between your design above and the end result? Not one that indicates they got it wildly wrong anyway…

I think you missed a few key points of the article. I know it’s long :) I didn’t say that they went wildly wrong. The point of the article was to explain that some of the UX problems are out of my control and that they implemented some items differently than I imagined it. I’ve talked about what you call overdesigned in the article as well as I had 3 groups of users in mind and it was my intention to take stuff out and re-arange per user group, but that never happened. I suggest that you re-read that.

Also, can I ask what the pencil icons were intended for along each item in the sidebar? Was some sort of edit field/tab functionality intended there?

I envisioned those to be a quick way to access the custom fields settings and options instead of going through admin menu now…

The caption on your screen shot doesn’t make sense to me sorry? The drag handles look like they do in the shipped version?

You also missed the part where I talk about that there are no handles to indicate that the template groups in the Template Manager are draggable. The screenshot has handles because I knew there that fields would be draggable. I did not know for template groups, because if I did I would have used the same handles…

I would love to see an admin that is quiet and unpronounced - that lets the author/developer/designer get on with what they need to do without it trying to wow them visually.

I describe something similar in the article but for me it was, client, designer, developer.

Heh, I actually read the article several times to try and figure out what I was missing.

I find it interesting because if the cp was initially designed for the end client I would have envisaged the cp home page wireframe you posted to be quite different.

How many of your clients have access to the template manager, channel management, have permission to create a new site, or would find anything of benefit from the EE wiki, or even arriving on the EE user guide?

Seems to me like that view includes design elements for the sake of design… Remove all the elements that the end client wouldn’t actually find useful and there’s not a lot left.

I find it interesting because if the cp was initially designed for the end client I would have envisaged the cp home page wireframe you posted to be quite different.

That wireframe is just *the* wireframe that closest resembles of what is there now. I didn’t say that it was *the client* wireframe. I said everything got built *on top* of what I thought was the client version. Due to the very tight schedule I never got around to create how I saw those groups of users in wireframes. But it is obvious that the create, modify/Delete and view would have contained less items and even a different lay-out.

I just read the following lines straight after the screenshot and made the presumption that you were thinking of the ‘client’ user whilst creating them - which of course is completely contradictory to your design.

The client is the one I tried to start from and where the current design is based on.
...
Somehow the other groups never came to life and everything got built on top of my client starting point.

I just read the following lines straight after the screenshot and made the presumption that you were thinking of the ‘client’ user whilst creating them - which of course is completely contradictory to your design.

The wireframe phase went so quickly so that the process was all over the place and things blurred together. I lost track as I needed to move on fast and EL asked me to wireframe the most complex situations, which collides with how the client version should look. They didn’t have client, designer, developer in mind but beginner, intermediate and advanced. Fast is never good for ideas and letting things evolve…

Veerle, you’ve very nicely told the story here, and as someone said, with grace. That’s well done.

I had personally discovered an old image floating around the web a few months ago, of your more original design, and that told what it needed to, about the completeness of thought I felt you would have had.

The further explanation of the intended user experience layering gives a very nice perspective of what might have been.

We are all trying to be understanding of EllisLabs, but whatever their internal matters, you didn’t get any kind of fair chance to build a design with them in what actually happened.

That’s all we need to know, and so we watch and enjoy as you go forward with all your projects, as we long have.

Thank you for this post. I believe people can simply look at this site, and see what you are fully capable of when you are given time and full creative control. The attention to details on this site are like a prime piece of A-Grade meat marinated slowly in a sauce that makes your tongue tingle.

Give Picasso a canvas, a brush, and Edward Scissor hands though and clearly the result with be less ideal. You learned a lesson about the client, and time will tell if EllisLab’s learned a lesson as well which will be evident by hiring you with more freedom or enlisting a full-time designer.

Working with clients is rarely simple and always requires compromise. It’s even more rare that we get to share our side of the story, usually when presenting my work I find myself secretly cringing at one element or another, always the result of a compromise, either by me or by my clients.

Thanks for clarifying your role in the EE2.0 design, it’s a reminder to all of us that what we see is usually only a small part of the total story.