WordPress Backend Design Study

Good software includes an intuitive and accessible User Interface(UI) with a user-friendly design. I’ve been thinking about the WordPress back-end UI lately and come to the conclusion: this can be done better! So I turned on Photoshop and created a new Dashboard for WordPress.

preview

Prologue

WP Version 1.0 / 2.0 / 3.2
WP Version 1.0 / 2.0 / 3.2

The WordPress back-end has experienced a number of redesigns in the past, and significant ones sometimes. These days, however, redesigning the back-end seems sort of out-fashioned. Why is that?

First and foremost, I think, it is because the current UI has proven itself to be reliable and user-friendly; secondly, it might relate on a dramatically increased number of WordPress users.
A new UI design always challenges users to embrace the unfamiliar. Humans are creatures of habit and for most people accustoming themselves to something new is challenging.

Does the effort pay off?

Getting used to something new can be less pain for when the new actually makes the existing more accessible and intuitive. As users we want to experience the advantage.

WordPress 3.8 will hit the ground in December, changing the design of the backend once more. Awesome! Isn’t it?

I can already hear developers cry: “Waste of time! Let’s rather work on performance and improve core!”. In one way, they may be right. However, I think it is important to refresh a design every 2-3 years and even implement a couple of possibly daring, yet useful innovations.

Prominent examples of a complete UI redesign are Microsoft with Windows 8 and Apple with iOS 7.
Windows and Apple are of course two big examples. In both cases users were surprised, in a shocked or charmed way. There haven’t been any two products from the same segment that have been discussed and analyzed to a comparable degree.

It is exciting to look at that development. Let’s see what the future has to offer.

WordPress a.k.a. 3.8 MP6

WordPress has a working group named “Make WordPress UI” working specifically on the back-end. Their blog is a wonderful place to watch UI development unfold and discuss new contributions.

I’ve been running the prototype of the new design on a test system for a couple of weeks now. With the new design, I can say, my workflows have improved a little. Just a little? Yes, because the new UI is more or less “only” a fine-tuning.

The contrast of the sidebar is a lot higher than before. The sidebar now comes in a dark gray with gray icons and a white font. To me it is lacking harmony a little. The contrast between background and white font is just too much. It should be a little softer and more pleasant for the eye.
In the content area contrasts have also been changed as well as some specific colors and fonts.

All in all I still feel at home in the back-end. What bothers me personally, however, is that the back-end still (or even more) looks kind of frumpy.

WP Version 3.6 / 3.8 / Case study
WP Version 3.6 / 3.8 / Case study

Why frumpy? Margins are way too small for my eye. Writings are partially too gray, too bold and too small. The entire font style just seems old fashioned. Icons look disproportionately large compared to copy. Everything somehow looks locked up and old.

Alternative WordPress back-end UI

The idea of an alternative UI design for WordPress isn’t new, of course. Many dedicated developers have created new designs and made those accessible to the public via a plugin.

Unfortunately, developing your own back-end design and integrating it with WordPress isn’t that easy. The only way is writing a plugin which then even might interfere with WordPress itself or other plugins.

Nevertheless, here are two nice alternative UI designs for WordPress written by other developers: the beautiful Retina Press and the DP Dashboards Plugin.

The implementation of my design

Since I love working with Photoshop, HTML & CSS and know something about responsive web design and mobile user behavior, I thought to myself, let’s make it better!

So I wedged myself behind the computer and rocked Photoshop. After six hours I had something tangible that might have a lot potential to be worked on, given an appropriate amount would be dedicated. At least it should be sufficient as a first prototype.

At first, I looked at the proportions and orientations of individual elements to optimize their alignments without changing the UI significantly. The user should find those elements in their usual place.

After alignment, I went into individual elements and asked myself how they could be designed a little more “modern” and clear. I implemented a few things I’d also love to see in WordPress: a bigger sidebar, more padding for each menu item, a clear font and font-icons.

The content

The dashboard is the least used and yet most needed page in the back-end. Why?

Maybe because we hardly find any relevant elements on that page? I for once would stop by more often in the Dashboard and stay longer if I’d find some well-updated statistics here that would also be visualized in a way pleasing to the eye. Or if Quickpress would allow me to also create new pages or posts in custom post types.

Generally, I’d like to see a certain prioritization in the Dashboard:

  1. Sidebar
  2. Info/event widgets (Quickpress, statistics)
  3. News widgets and warnings
WordPress backend case study
WordPress backend case study

It’s just a raw concept. I hope that I can inspire you with it. Feel free to use it as a source for other exciting projects. I appreciate your feedback!

The future of the WordPress back-end

Watching the steps currently taken by WordPress developers you can already see some evidence that the back-end will more and more move into the background and most of the changes will take place in the front end. I for once am very excited to see more of that!

Bonus

This is how it could look in a mobile version:

WordPress UI case study on mobile devices
WordPress UI case study on mobile devices

Post Sharing

Author Avatar

Nick Jantschke is the artdirector and proprietor of the MarketPress GmbH and Stil-Etage GmbH. He likes to drink Hot chocolate in his spare time, next to fixing bicycles and experiencing everything that has to do with music. Nick is excited and passionated about every Design themed topic.

Also Interesting

WooCommerce can be this chic: 11 examples of successful shop design

by Michael Firnkes

Whether playful or minimalist, traditional or more off-beat: There are many options for designing an online shop. We're presenting 11 very special design v ...

Read more

Adventskalender Day 18 – Amazing cool WordPress Wallpapers

by Nick

We live and we love WordPress! WordPress is open-source. It is a give and take, and today we give something back! Is your desk lame? Once again, nothing ...

Read more

Flat statt Platt - An Interview with our theme developers

by Manuel Schmutte

There is a new shop theme in the WordPress ecosystem, and it carries an auspicious name: Hamburg. We spoke with the two theme authors Nick Jantschke and Ca ...

Read more