ZURBlog is where we discuss product design, business and strategy.

Last week we talked about the importance of getting feedback and how it was applied when we built Verify. We want to go a little more in-depth and show you how we apply a sketch-based response tactic to client feedback.

Feedback: The Dreaded 8-Letter Word

For most people, feedback isn't the easiest thing to receive, even for clients. Their product is their foundation, and it's never fun to hear about cracks and weak spots in it. But when we think about designing for people, feedback is necessary to seal those areas and make the product stronger. That's why we like to use sketching as the universal tool to help everyone see the problems and opportunities of their product together. It lightens up the feedback process to make it more fun and productive.

Here are three examples of sketch-based responses we use while listening to clients.

Example 1: Opportunity Sketches

"Our new product takes e-books to a whole new level. People can highlight passages, write notes, add resources, and let it sync with select friends. It's the new way to do book clubs and group studying!

Our Response: Opportunity sketches! We can take each feature and provide a series of opportunities from it, as well as develop new ideas that the client may not have thought of.

Example 2: Workflows

"We continue to get support emails about adding a feature to upload a custom logo. Problem is, we already implemented it three months ago! Why aren't they finding it?"

Our Response: Sketch out a workflow and see if its current placement feels natural. From there, look for other places within the flow to introduce it.

Example 3: Low-Fi Wireframes

"I'm liking a lot of opportunities that we've generated, in particular these four for our logged in home. Now all we have to do is fit it all on one page while keeping with some the existing elements."

Our Response: A few variations of the page using low-fi wireframes. This will help the client start to see everything coming together while still staying loose to allow for changes.

Keep the Feedback Loop Going

Sketching works in a variety of ways, but strategically using it to respond to clients is a great way to keep the dialogue flowing and to let your clients know you're listening. Sure feedback isn't always the icing on the cake, but when done visually with the aid of sketches, it produces a sugar high that gets people excited. And once they're loosened up, the dialogue can flow and great work can emerge.

Anyone who presents their work to others knows that producing something awesome is only half the battle: the rest lies in communicating well with other people to push those ideas forward.

It's easy to think there's some one-size-fits-all solution out there, and if we could just find it we'd solve the challenge of communication permanently. But people are different, with unique viewpoints and motivators, and may respond very differently to the same approach.

We've found a few strategies, though, that help us understand the best approach to take with different clients, making sure we're all on the same page and working toward the same goal.

Do Your Research

A client contact may be representing their company, but that company isn't monolithic, and its employees aren't identical cogs. Going into a project, if you can pull up a contact's LinkedIn page, you're already a step ahead: this will tell you how they like to present themselves professionally, explain their background in both work and education, and will often even include their interests.

Knowing this background can help you gauge what level of technical detail you should go into about a project, what elements will be likely to interest (or bore) them, and what aspects they're likely to find most important. Are they new to the company or a ten-year veteran? Is the work you're replacing near and dear to their heart, or are they ready to chuck it out the window? Picking up on these details can help you avoid potential minefields, better understand what factors clients will appreciate the most.

What's more, this offers a psychological benefit, especially when you're communicating over an (often impersonal) phone: if the going gets rough, knowing that that stickler VP of Marketing used to be an artist, or that Product Manager spent eight years in the Coast Guard will help you see them as people, and hopefully understand their viewpoint a little better.

This is just a starting point - don't jump to conclusions or make rash assumptions, but instead try to better understand where your client is coming from.

Listen Between the Lines

We communicate with our clients every step of the way through a project, making sure we're on the right track, and that they've bought into the ideas we're proposing. When we walk a client through sketches, or wireframes, or a visual design, it can be tempting to just turn on autopilot and explain away.

But tailoring your explanation to your client and turning a careful ear on their feedback is hugely important. It can make the difference between a ho-hum meeting and high-fives all around.

First, keep their biggest concerns in mind: were they worried about that new user call-to-action? Emphasizing company branding? The wording of a particular link? Make sure you call those concerns out, explain how you addressed them, and why your solution is awesome.

Second, pay careful attention to their responses as you go. If they're excited about a particular feature, by all means, go into more detail about how great it is. If you feel like you're losing them, feel them out and figure out why. Propose solutions on the fly. You don't want to leave a meeting without knowing how to improve the situation, and they don't want to feel like you're not "getting it."

Keeping these points in mind means clients will be much more likely to feel like they're getting what they need and want out of a project.

Just Ask

Careful listening and mild sleuthing can be invaluable, but ultimately, if you need to know something, just ask. We always send our clients a set of "homework questions" up front, with questions about the background of the company, its product, what they're worried about, what goals they have for the project, etc.

Answers to these questions provide both hard facts, as well as insight into the person answering them. Are they detail-oriented or more big picture? How will they be defining a successful outcome to the project? Knowing these answers up front can help keep you focused on the right goals throughout the project, rather than scrambling to catch up at the last minute.

What's Your Strategy?

Just as each client is different, each designer has their own ways of communicating with others. What's your strategy?

We may hope that a great design or a lovely piece of code will speak for itself, but in reality, how we interact with the client, articulate our goals, and present our work makes a huge difference in how the client perceives us and the work that we do.

Sure, there are the dream clients who have nothing but praise and love everything we produce, and the occasional bad seed who can't be pleased, but the vast majority of people fall somewhere in the middle: whether they recommend you to everyone they know, or vow never to hire you again depends on clear communication, positive feedback, and critical listening. As well as great work, of course!

We all need to let off steam now and then, and ClientsFromHell.net gives designers and developers a place to vent about ornery clients - but the site is also rife with examples of inflexibility and missed opportunities on the part of the designers as well. Going the extra mile to turn a frustrated (or frustrating) client around can pay off big time in the long term.

Culprit 1: The Missed Opportunity

Client: I've spoken to my accountant, and he said you were too expensive, that he could find me another designer for half your price, but I want to work with you. Can we renegotiate?

Designer: How much are you paying your accountant? I'm sure I can find you a cheaper one.

In a perfect world, everyone would know how much work and effort went into creating a great website. But many people don't - that's why they're looking to hire someone like you, after all.

We'd like to think we can just focus on our work, and everything else will follow, but if we're expecting people to pay us and not Discount Bob, we need to be able to clearly articulate the value we provide. If we can't even explain why we're valuable ourselves, how can we expect the client to explain it to their coworkers or accountant?

This exchange is a perfect example of an opportunity. The potential client is clearly on the fence, and even leaves an opening to be convinced by the designer. But instead of taking the opportunity, the designer responds with a snarky comment, and the moment is lost.

Being perennially undervalued can be frustrating, but we're the only ones who can change that perception. Instead of giving up, explain where the chop shops cut corners, and what you can provide that will blow them out of the water. This is not only an opportunity to sell your work, but also showcase your professionalism and interpersonal skills.

Culprit 2: Obtuse Listening

Client: "That's the wrong shade of black."

Client: "Can you take the edges in and make it more roundy and less squarey?"

Client: "Can you grow the text a little?"
Designer: "Sure, but I'll have to fertilize it first."

Quite a few of the posts on ClientsFromHell illustrate people using metaphors or leveling criticism that sounds silly to a designer's ear. But we deal in these topics every day, and have an industry-accepted design vocabulary to fall back on.

Clients may not be trained designers or know exactly how they "should" give feedback, but their opinion is vitally important. Listening to not just the words they're using, but the meaning behind them, is crucial.

Yes, technically there is only one "shade" of black. But in practice, how many objects that we might describe as "black" are actually all exactly the same color? Maybe the client would be happier with a very dark gray, or a blue-black. Being deliberately obtuse or even sarcastic for the sake of pedantry doesn't help you or the client.

Think back to the last time you were out of your depth - maybe you took your car to the mechanic, or bought a present for a loved one, or had to do home repairs. Would you like to deal with a condescending salesperson or mechanic? People want to feel like they're in capable hands, but they also want to feel like they're being listened to and treated like a person.

Turning the Tables

You may not be able to win them all, but we've found that some of our strongest client relationships had rocky beginnings. If you go that extra mile to win a client over, they'll often have the enthusiasm of the newly converted, and sing your praises to friends and colleagues.

More than a year ago we began a comprehensive redesign of TinyPic.com, sister site of Photobucket. As a free image and video uploading and sharing service, we faced a unique task of handling several requirements in our redesign. After several iterations, we ended up very happy with an improved two-column layout for viewing images.

Our layout for TinyPic created a great balance between ads, tools, and the media itself.

Imageshack, longtime competitor of TinyPic, recently redesigned their full view page, too. And it looks just like TinyPic—save for a few "changes" their team made.

Imageshack copies the layout and adds tabs, lots of inappropriate "related" images, and poor negative spacing.

When we designed this page, we went through several different layouts including different columns, ad placements, image/video sizes, and most importantly the calls to action. That's where this design really took off for us. We had three goals in mind for the page when we started:

1. Continue to monetize the page by serving up ads
2. Ensure that the media (image or video) comes first and foremost
3. Encourage sharing and uploading

We nailed each goal with this design. In our experience (with TinyPic and others), we have had a lot of success using med recs on ad-driven services. Even better, the large size of the images and video player, along with the "quick browse" at the bottom of the page, makes sure we're always thinking about your stuff. And with the unique toolbox area in the left column, along with an inline uploader for signed in members, sharing and uploading is our priority at all times.

TinyPic has some great minds behind the scenes, able to constantly improve the service, which is exactly what we've been helping them do. Their related images, the fast servers, unique tools (sharing, links, actions, etc) the cross-browser support, and much more give them the tools to pull this kind of layout off. However, Imageshack isn't able to create a sustainable environment on these pages. Tabs, ads, and random images make it rather dull, literally not what I want to see when looking at images online.

The fact that one of the other heavyweights in the same market as TinyPic has virtually duplicated our design shows that we did something right and—dare I say—revolutionary with our work. Moreover, our client's competitors are now trying to play catch up :).

We recently launched 5MinuteConsult.com for Lippincott Williams & Wilkins, a business unit of Wolters Kluwer Health (say that five times quickly). The 5-Minute Clinical Consult is in it's 17th edition and is the medical professionals leading choice for trusted clinical content. It's a honor to work with a company that has a rich history- Lippincott is one of the oldest publishers in the United States and was founded in Philadelphia in 1792.

Social tools like Twitter and Delicious are typically associated with blogs and personal sites, but we decided in our project planning that they would be great for a number of business reasons:

1. We we're able to quickly integrate a few publishing tools without having to rely on their engineering team- this reduced the costs and overhead of bringing in another person.
2. The microsite can stay fresh with new content without much effort (5-10 minutes a day). It's a marketing site to drive clicks and centralize links in one location, so heavy content building is not necessary.
3. Using social tools instead of a custom CMS has the added benefit of creating inbound links on social websites (an SEO win). It also makes it easy to integrate these feeds across their other health related publishing properties.

Social tools are a simple way for businesses to get up and running quickly.

TinyPic is an image and video sharing service with a no-frills (registration-free) uploader. We've worked with TinyPic since last year and have had tons of fun working on great projects with their team. The latest feature to launch was themed member profiles. We had the pleasure of designing and coding the six starter themes.

Little Background Info

TinyPic first launched registration for their members several months ago and have since had much success in new sign-ups. Long time unregistered users were huge fans of the easy uploading process, simple sharing, and even vanity URLs. Many signed up in short order and were quickly enjoying enhanced features like editing, deletion, and even albums.

Although members loved all those features, they clamored for more. Profile themes was one of the most popular requests. We decided it was an easy to implement feature and pushed forward on it. So far, people seem to love it!

Themes in Action

You can check out some of the new themes for yourself by visiting the TinyPic team's pages.

Mike and Tony are in the dark and Alex is busy playing in the grass. If you use TinyPic already and aren't registered, sign up today and get your own themed profile. All your pages—Home, Uploads, Albums, and more—get styled when you set your theme. It's pretty slick!

Stay tuned. We're launching more and more exciting features with these guys in the coming months!

It's not often that your work gets covered on network television, so we were ecstatic when britneyspears.com popped on Entertainment Tonight. It's fun to be able to show family members something everyone gets (never mind that our work probably touches three times as many people every day on the internet!).

We've been catching up on our case studies over the last couple weeks. Here is a case study from a recent client, Britney Spears. Go Britney!

Britney Spears Needs a New Website... in 2 Months

When the world's number one pop princess needed a new website to coincide with the upcoming release of her new single--a mere 8 weeks away--Britney Spears' team turned to ZURB.

Britney's team was emphatic about getting the site completed before the album was released. The ZURB team understood the time constraints, realizing how important it was to be able to visualize the site immediately, focusing everyone's efforts and attention on the quick wins that could be achieved throughout the process. We also understood that what we created should not be 'just another "artist" site'--it needed to reflect the energy and star power that Britney Spears uniquely brings.

Quick Decisions Facilitate the Design Process

With a project as fast and furious as this one, you've got to have someone inside the client's organization who can tell you 'yes' or 'no', if you are going to keep things moving and meet the deadline. So, prior to accepting the project, ZURB made sure that we would have access to the folks who could make decisions--and make them quickly.

Once we confirmed this direct connection to the top, we had several group work sessions with the entire team (including both Britney's management and members of Team ZURB) to share information and ideas on how to create 'something different' for Britney.

Building on Early Steps Eases the Process

By relying on our early surveys and interviews and keeping the entire team focused on achieving a specific set of goals, we were able to quickly drive the decision-making process forward. After delivering multiple designs, we were able to work with Britney's team to refine several potential visual options down to one.

We decided on a cool and simple Britney aesthetic that complimented her personality and stood out among a sea of other artists' web sites. We also employed a set of XHTML/CSS style guides to help manage the site and make future additions and updates easy to seamlessly integrate. ZURB was able to create a user experience that encouraged repeat participation-giving visitors a reason to return again and again.

1 Million Visitors in 24 Hours

Britney's team was happy over the results--the site was completed on time, and positioned Britney's brand to stand out within the music world. "I think I've visited the new britneyspears.com more times since its relaunch than I visited it during any of its previous incarnations...I find myself reading the posts, watching the videos, and checking out the photo galleries," said Lauren LeGarde a long time Britney fan. "Good job, Team ZURB! Eveyone who worked on this deserves a bonus!"

Lauren wasn't the only one that took notice--in the first 24 hours, the revamped site received more than 1 million visitors. And the site's message boards were lit up with posts as Britney's fans clamored to connect with her--and each other.

Visit BritneySpears.com

CyberRead is a "socially responsible ebook retailer providing outstanding customer support for today's book lovers." They offer over 55,000 ebooks in a variety of formats for hundreds of devices, including your PC, Blackberry, Pocket PC, and more.

We helped CyberRead integrate a new look and feel while ironing out the architecture and spearheading the addition of new site features like reviews and recommendations. Having begun our work with redesigning the product pages, we had a renewed sense of direction and focus for the rest of the site.

We focused our efforts on the product pages, homepage, and browse pages. By doing so, we addressed the three methods of accessing and purchasing ebooks, improving each one along the way.

We're excited that this has finally gone live. It was a joy to work with Clint and his team of developers while moving this forward. We can't wait to get back in there for some more!

And if you like ebooks, visit CyberRead and be sure to let us know what you think.

We've been working hard with the TinyPic crew over the last several months, and it's really paid off. We've seen more uploads, more browsing, more sharing, and had a great time seeing it all unfold. Today, TinyPic has launched their new Categories feature, an updated way to browse for images and videos.

The homepage saw the most changes with this push. We removed Featured Images & Videos in favor of Featured Categories and added a new Categories tab to the main navigation. Categories will be a nice addition to searching for images and videos on TinyPic, providing better SEO and showing the wide variety of content TinyPic has to offer.

What's really cool is that for each category, we have a featured image to represent it. Note the little magnifying glass in the bottom right. Clicking that will take you to the full size view of that image, but clicking anywhere else on the image will take you to that category. It's a neat little UI feature that we've taken from the TinyPic Plugin we've been working on.

The other changes are the most obvious: Categories and sub-categories. We've gone only one level deep here to keep things as simple as we can. For instance, you want to find People, and we've got that and more: Kate Beckinsale, Michael Phelps, and more.

Go forth and browse Categories!