June 25, 2017

How we think about design at WP Media

Hi ! I’m Matthieu Bousendorfer, Art Director at WP Media since June 2015 (yay!)
I’m the only designer at the company (at the moment) and my job is to imagine, design and maintain the look and feel of all our products and plugins.
Today, I want to give you some insight on how we imagine and design our products, websites and WordPress plugins and share with you my experience.

A bit of context

I came to the company to provide something more than just features, but also a great user-experience. It has remained that way since and we get praise from our users about it.

We want to put our products in everybody’s hands, from a small personal blogger to a big corporation, from a tech enthusiast to a total newbie.

Ease of use and design is one of the keys for this.

But, how do we even tackle this vast subject? There are many ways to achieve this, and it’s very much a team endeavor. I’ll try to show you through my thought process!

You have to solve a problem first.

What is the goal you’re trying to achieve ? What is the problem you’re trying to solve? These are questions I ask myself every time I’m designing something. Keeping your goal in focus will guide you through and prevents you from getting lost.

Focus on the real problems

Solving a problem can be trickier than you may think, especially when it comes from a user’s feedback as this feedback can hide sometimes bigger problems than the one highlighted.
I try to think deeply about it and always stay focused on the real problem in order to address a proper and future-proof solution.

Design in WordPress Admin

We think that users shouldn’t have to tweak things in our WordPress settings pages for hours to achieve what they paid for.

Users pay you for a solution to their problems, not for getting more problems with your solution.

Showing your brand in WordPress admin is tricky.
Don’t forget that the WordPress admin is not yours, as a plugin creator, you’re a gentle guest who is invited inside it.

I like to think of it like it’s your new girlfriend’s/boyfriend’s flat. You can’t just go in and put all your awesome posters and gadgets on the walls without raising any sort of anger from her/him.
In order to be welcomed, you have to gently put some of your things in small corners.

On the Right Column, Imagify’s plugin additions

Designing in WordPress admin is the same.
That’s why we try to be subtle when adding things in admin.
We try to blend in seamlessly, focusing on not being too invasive.
The only part where you should feel free to show off your branding is your plugin’s setting page.

Imagify’s Settings Page

One way to blend in is to use the native UI elements WordPress provides and perhaps adding your own colors to them. Like changing the color of the links added by your plugin from WordPress blue to your primary color.

Keep it…

While designing and maintaining a product with many pages and elements, I try to keep in mind some basic things when I design.

Keep it clean.

Being the only designer doesn’t mean I don’t have to keep my files clean and tidy.
Keeping things tidy is a great way to achieve good product design. Don’t hesitate to delete stuff.

Being a designer is about making choices.

In fact, keeping it tidy also helps with design consistency too, as you aren’t overwhelmed with things.

Keep it consistent.

Great product design comes from many things, but comprehensive and consistent branding and styles definitely helps. The users will perceive it unconsciously.It will help them get attached to your brand and remember it through your products.

Sketch Symbols and Styles are very usefull to help consistency

Creating symbols and styles in Sketch, a style guide and actually using them helps you keep your design consistent.
Think thoroughly when creating a new symbol or new styles. Can’t you just use another existing one ? Can’t you just tweak the existing one to accommodate the new one needed?

Keep it scalable

I always try to think about the future. Your 5-artboard file will someday have 30, perhaps across multiple files. You should be prepared for it as the product will grow, but don’t think too deep into the future either as it will distract you from your present mission.

Imagify’s Desktop and mobile Website, plugin and app artboards

Design has to evolve and iteration is the key . I try to keep this in mind as I design in a platform agnostic way. This will help you in the future and you won’t feel “blocked” in an unpredictable situation.

It’s not enough to be a good designer

Design is not just good looking UI

Being a good designer alone won’t be sufficient to design a great product. Sure you can make great looking UI, awesome Dribbble Shots material, but that’s not enough.

Design thinking

Something I learned is that you have to understand the business, marketing, technique side of what you are creating in order to be more than just an artist painting nice looking UI.

Listening to the needs of marketing and embracing them will greatly improve the overall design of your product and lead to growth.

You don’t have to be an expert in that field, but understanding how it basically works will remove many friction points and will greatly improve teamwork and overall design of the product.

Iteration

This last point has been more of a difficulty, but getting there. Iteration needs to have a precise vision on how your product should evolve in time. As your product grows and changes, you need to adapt. Having this vision is difficult and doesn’t just come from the design.

Setting overall business goals, marketing milestones and priorities is important. Measuring their impact and iterating on top of the results is a good way to improve your product as it grows.

Comments 0