At WooThemes we have 10,000 tickets a month. That's a lot. Like a lot a lot. When you're talking about numbers this big if we can redesign our products to make them more intuitive and reduce our support load by 5% that's 500 tickets a month! That's an entire ninja!
That's why one of the things I want to start looking into is the user experience of all of our products. If we can do less and make our existing products easier to use that will serve us better than adding yet more products that will increase our support load.
One of our products that I think could use work is Table Rate Shipping. It's one of our most configurable and powerful products. The downside of configuration is that it's also complex. It's not one of our top selling products but it is one of the products that needs the most support. Clear candidate for a redesign.
Shipping Method Page
The first page I wanted to change was to simple add some text explaining what the heck a shipping method is. It's not the most intuitive thing and a little explaining goes a long way.
Once you add a shipping method to the page it would be helpful to explain to users that they can interact with these shipping methods by dragging on dropping them. Savvy users will figure this out but we're trying to redesign this for everyone. I also moved the enabled option from the cluttered edit page (next mock up) and moved it to this page to keep things as clean as possible. I purposefully made the option an on-off switch which is a little more intuitive for something that can be turned on or off. 🙂
New Shipping Method Page
Okay – so our user successfully gets to the New Shipping Method page. Now they see a wall of controls and they don't know where to start. I've broken the existing page (which used to have 20+ controls) into a page with a modal to clearly separate the controls and how they relate to one another.
The first thing to do is get the user to fill out basic information. I've pointed out the required fields and very obviously let the user know which fields are optional. I also clearly described the two different options for the Calculation Type drop down.
As soon as the user selects a Calculation Type a modal appears which allows them to set up the rates. There's a lot of fields on this modal so I've circled them and added arrows explaining each section.
In my opinion there's still too much information on this page. I'm thinking about having the arrows appear step by step as you go through each section. Or I could make the page a bit longer and take screenshots of each section with a paragraph of text explaining what that section does.
Once you've added your first rate the arrows disappear. After you add your second rate I have one final helper that let's you know you can re-arrange the rates.
The thing you can't see in these mockups is that I've also simplified the language. We don't need to sound like a personality-free corporation. We have personality and we're going to show that through every medium – even the instructions to help you set up your plugin. A bit of personality makes everything feel warmer and more hospitable.
What do you think of the changes? Are some visual changes like this worth the extra work?