400 Bad request

Support is one of the most important parts of our service. The objective of the Help Center is to help customers as much as we can up front before they have to contact our support team.

How we approached the project

This was a great team effort utilising various expertise within the company.

• Identified problems with the existing Help Center by talking to customers and support.
• User tests on the existing Help Center.
• Looked at metrics behind the existing Help Center to see what pages users were using and looking for.
• Restructured the sitemap, user flows and information architecture.
• Put together a high fidelity prototype and ran customers through user tests to identify key issues.
• Ran a number of usability tests internally and externally.
• Reworded a lot of the copy and content to make it more readable and user friendly.
• Redesigned the UI with a fresh, modern look and feel.
• Marked up the HTML/CSS from scratch making use of SCSS, responsive design, HTML5 and CSS3.
• Better optimized the pages for search and included Google Site Search.
• Made lots of back end changes to help improve performance and user flows.
• Added more tracking for better metrics on how customers use the help center and what they search for so we can continue to iterate.

You can see the new Help Center in action here.

Old Help Center

New Help Center

This is the part of the project that I dislike the most. Presenting a new design then waiting for feedback, not knowing what is going to come back at you. Receiving feedback can be uncomfortable, but you know it’s part of the job. Getting useful feedback is the hard part.

Why designers hate feedback

Feedback during the design process is good. Early feedback is even better. It leads to iterations, which should lead to improvements and a better end result for your client and their customers.

The main reason designers hate feedback is because we don’t often get the right kind of feedback.

Why clients don’t give the right kind of feedback

It’s not your client’s fault. Remember, they’re not designers so they don’t know what type of feedback you’re looking for.

If you hand them a design and ask “What do you think?” they’re going to tell you what they think, which will more than likely focus on things like colours they do or don’t like, and whether their company logo stands out enough, instead of what really matters like users being able to find what they’re looking for.

We need to guide clients (and bosses and colleagues) towards giving feedback that will be useful to us as designers.

I’ve put together a few dos and don’ts below that will hopefully be useful to both sides of the party.

How to give feedback as a client

Don’t give subjective feedback

I’m not a big fan of orange!

Subjective feedback is opinionated feedback. There is no logic behind it, just your personal feelings.

Do say why you don’t think something works. If a colour doesn’t work, why not? Does it not stand out enough? Is it against your brand guidelines?

Don’t compare your design to other websites

That’s not how Groupon does it!

The designer should have done their research and gone through iterations of user flows, sitemaps and design guidelines. So at this stage they know your business and users better than any designer at any other company, therefore they should be able to come up with the best designsolutions for you.

Do mention at the start of the project what other sites you like and what you like about them so the designer can take this into account when designing your site. And remember that just because GroupOn, Twitter or Facebook does it that way, doesn’t it’s the best way for you to do it.

Don’t ask for multiple versions

Can we see one with navigation down the left and one along the top and we’ll pick the one we like best?

No, no, no. It’s not about designing multiple mockups and picking the one you like best.

Do let your designer design what they believe will work best for your project, then iterate on that design based on user feedback.

Don’t forget about the user

Can we have input fields for their age, address, email and phone number as well?

Don’t forget about your users, who they are and what their state of mind is when they use your website.

Do keep users in mind when you’re analysing the design and realise that they’re probably in a rush, don’t have time to do everything you want them to do and that they won’t be over analysing every graphic or pixel while doing so.

Don’t be stuck to what you have in your head

I was thinking that would be blue and over here.

If you’ve already designed something in your head then why did you hire a designer?

Do let your designer do their job and come up with the ideas using their own expertise and experience that you hired them for.

Don’t tell designers what your wife thought

My wife is a creative person and she thinks some sort of animation would make the page look really cool.

Your wife, or any other impartial viewer, may be creative at other things but unless they have experience designing websites then their feedback is probably not that useful.

Do keep feedback focused on what your users, your employees and you (the decision maker) think, and listen to what the designer has to say.

Don’t get hung up on what other people say

I showed it to our marketing department and they think everything should be above the fold!

Getting feedback from multiple people, or departments, is good but don’t think that every piece of feedback is gold dust.

Do keep a note of all feedback, highlight any that are important and pass that onto the designer to let them decide what to do with the feedback. Remember if you ask for peoples’ opinions you’ll get a lot of feedback for feedback’s sake. Most of it is probably negligible and you can never please everybody.

Don’t ask to make your logo bigger

Our logo is a bit small, can you make it bigger?

As much as you love your shiny glossy 3D logo, making it bigger isn’t going to help anyone.

Do tell your designer how great the site is looking. We like positive feedback.

How to ask and prepare for feedback as a designer

Ask for specific feedback

Don’t ask “What do you think?”. Ask specific questions. Do you think the call to action will be obvious to your users? Will users know what this input label means? Does the overall mood and tone match your business and branding?

Do as much research into your client, their business and their competitors as possible

Right at the start of the project investigate what matters to your client, what matters to their customers (users) and what they think of competitor sites. Create mood boards of screenshots from different websites to see what they like and don’t like. You’ll be better prepared for feedback if you can relate back to this research.

Do user tests early on

The best way to prove your design decisions is to base them on scientific feedback. Develop prototypes for user testing, upload your screen designs to sites like Five Second Test and Usabilla to see what other people think and use this to justify your decisions.

Ask “Why?” 5 times

For each piece of feedback continuously ask why to get to the real issue. “Why do you want to change it? Why don’t you like it? Why do you not like red? Why do you not think your customers won’t like red? Why do they think red is evil?”. Once you find the real issue you’ll be able to come up with the best solution.

Include the client throughout the process

Always keep your client in the loop. Show them results of research, show each iteration, and ask for feedback at each stage. This will help avoid a “I don’t think it’s working” email just when you thought you were about to get paid at the end of the project.

Respect each other

Most importantly remember to have respect for one another. Clients know their business better than anyone. Designers know what works well for better experiences and results online. Both parties are experts in their own way so always listen to what one another has to say and try and see it from their point of view as well.

Have you any feedback advice?

This is advice based on my own experience. How do you ask or prepare for feedback? How do you give feedback? This article is designer focused but I’d love to hear any advice from developers also. Share your comments below.

Further reading

• Why design by committee should die
• Give your clients a wee nudge
• How a web design goes straight to hell
• Asking for feedback

Back when I was starting out as a web designer, I undertook some work for a design firm. I too remember at the time being asked to come up with 2 or 3 mockups for each project that went my way, then the sales guy would show them to the client and the client would pick their favourite.

Never supply a client with more than one option

You should have final decision based on your expertise. If you show a client two mockups and one has navigation down the left and one along the top and ask “which is your favourite?” you’re degrading your expertise. You should know what the best option is and be able to back up your design decisions.

Choice paralysis

There’s a good story in Yes! 50 secrets from the science of persuasion about jars of jam for sale in a supermarket. Give the customer too many options, they’ll get confused and walk away. Narrow the options and they’re more likely to buy it.

Same goes with design. Presenting too many options over complicates things and the customer thinks about it too much.

They’ll also pick the option you didn’t want them to pick. Trust me, it’ll happen.

More work for you

Why produce more work for yourself? If you’re spending a number of days researching, wireframing and mocking up for one design, why would you want to do that all over again? Put all your effort and attention into one design, the one that you believe, as a professional, works best for your client.

If you split your workload in two, the outcome is going to be two half-assed efforts, rather than one full-ass.

Client isn’t getting the best

If you have to come up with more than one design it undoubtedly means that your first design isn’t the best, or your second design isn’t the best. If they were the best, there would be no need for another design.

One mockup allows you to focus all your expertise and attention to what you feel is the best solution for your client.

But what if my client doesn’t like it?

You can’t always get it right first time but you can take on board their feedback and reiterate.

Make sure you encourage good feedback. Good feedback includes a good reason as to why they don’t think something will work.

e.g. “I don’t like blue” is not good feedback. “I don’t think the blue works because it’s very corporate and we want to show our customers we’re fun and creative” is a lot better as now you know the reason behind their thinking so you can work with this, plus they’re keeping their users and target market in mind instead of letting personal preferences get in the way.

You can then go and make the necessary amendments to satisfy each of the feedback points.

What do you think?

Some designers can’t help it and are told to produce 2, 3 or 4 mockups. Some maybe prefer to do it this way.

What’s your approach? Do you present more than one mockup? Is it your choice or are you made to?

Overview

I was recently hired by Newsgroup Direct (NGD), a leading Usenet newsgroup service provider, to revamp their website, make it more modern and improve signups.

Here is their previous design.

Planning

The first thing that happens when I get an enquiry is I send the potential client a website planner. The website planner, a series of questions I have listed in a Word document, will gather requirements for the project.

The key objectives of the planner:

• Find out who the client is and what they do
• Who their target market/user is
• Who their competition is
• What deliverables they want from me
• Timeframe and budget

In a nutshell, NGD require a makeover with a modern & easy to use interface. I am responsible for the XHTML/CSS templates for the main pages (they already have a development team in place for the back-end programming & integration).

Research & Ideas

Current site

I start by going through the current website and list things that can be improved.

Various issues raised for NGD include non-semantic markup, no defensive design, markup was invalid, poor Google ranking for keywords, no signup enticement, overload of available sign up options and several usability issues.

NGD had over 40 packages to choose from, which can be too overwhelming for the average user.

Competitors sites

The next stage is to analyse competitor websites; what is good or bad about them. If I can take on board what is good and eliminate what is bad, then there’s a better chance of coming up with a successful solution.

Ideas

I suggest several improvements that can be made to the current site, showcase various features of other non-related sites that I feel can be integrated into the new site.

Several ideas I have for NGD:

• Clear instructions on how to use NGD and setup newsreaders for novice users
• New logo to reflect new branding
• Narrow down the packages (introduce a free package for trial)
• Clear call to actions
• Highlight the key features of NGD with a slide reel in the header

Logo

Depending on the project new branding may be necessary including logo, stationary, company image and the website.

To help with their new online branding, I recommended NGD have a new logo designed & I suggested a couple of professional logo designers I know or have worked with. They went with Graham Smith, a well respected and well known graphic designer from the UK.

Graham did a great job with the logo and this was the final outcome.

Information Architecture & Sitemap

I should mention here that at each stage I get feedback from the client and discuss it. It’s important to make sure they’re involved the whole way through the process.

For IA I jot down every section of the website on post-its and arrange them (on a wall or fridge) in order of importance. This is an great technique (that I was first introduced to by Front) that allows you to easily change and rearrange your order. In the end you will end up with various levels of importance, which will help with your sitemap and wireframes.

Once I settle on the IA I produce a sitemap. I usually produce the sitemap in Illustrator. The reason I use Illustrator is it allows me to move pages about (unlike using paper) and it also produces a professional outcome that I can pass onto the client, but there are various other tools you can use.

Wireframes

I start by sketching wireframes and then move onto Illustrator to produce more professional looking wireframes that I can pass onto the client and depending on the project I could produce 1, 2 or 3 wireframes.

For NGD I only produced 1 that was the homepage as this is the most important page while I kept the other pages (pricing, info pages etc.) as paper sketches.

Mockups

Once the client is happy with the wireframes it is time to open Photoshop and start with a fresh canvas. The good thing about this process is that I now have a wireframe to build the design over.

Some key things to keep in mind here:

• Branding – tying in with the overall brand, colours, mood
• Target audience – NGD’s audience are 20-35yr old males so it has to appeal to them
• Grid – keeping the elements structured and to a grid system is important
• Development – bare in mind this has to be produced in CSS so don’t make anything too complicated and keep graphics minimal

Homepage mockup

Implementation

All good to go, the front end development process starts and I produce templates for:

• Homepage
• About Us
• Pricing
• Sign Up

I also produce a template that has various other styled elements that the NGD developers can use if need be, which includes tables, forms, buttons, alerts etc.

Completion

The project is complete and the templates are then passed onto the client (in this case NGD’s development team to integrate into the framework).

After launch I will still monitor the analytics and make suggestions on how to improve the site and conversion rate. It’s hard (or impossible) to get it perfect first time, there are always things you can learn from how the users use the site and make improvements based on this.

What’s your process involve?

Insights are always interesting and useful. Even if you’re not a web designer, it’s good to hear how projects develop.