Design Tips from Lessons Learned in 2009

December 9, 2009

We had some fun and rewarding design projects this year.  Open Mountain has a new logo and Web site, and we executed a new ad campaign.  We also designed sites for our clients and were involved in many creative projects throughout the year.  I think it’s time for a little retrospective.  Before I take you through some of work, I thought I would provide some lessons learned from the year.  Assuming you are following a healthy design process, here are some tips to help you achieve success with your creative endeavors:

1) Start from a creative brief

A creative brief synthesizes the desired results or impacts of your project.  I recommend a single page brief that has 3-5 words that describe the emotion you wish to evoke, a sentence describing the impression you are trying to create or message you are trying to communicate, and then 5-10 bullet points listing everything that should also be considered.  We skipped this step a couple of times only to find out later that our lack of alignment was driving the design in different directions.  Resist the temptation to dive right in creating images before you collect your thoughts.

2) Use multiple visuals where ever you can

This one seems obvious.  Of course you are going to create visuals of your design.  We recommend using more than one as much as possible and use existing work for inspiration.  We started our logo project by creating a page of logos we liked from other sites and a page of logos we didn’t like.  Our Web site went through many prototypes before we started working in HTML.  Our design partners deliver 3 to 5 design choices per deliverable and that gives us plenty to discuss as we strive for something creative, intuitive and unique.

3) Plan to reset or start over at least once

All our best design projects hit the inevitable “we’re stuck” moment at some point in the project.  The current trajectory has run its course.  Where do we go from here?  Starting over allows you to dump the bad parts of everything you did while retaining the best of your brainstorming and thinking.  For our logo project, we liked the two-tone nature of the images but couldn’t converge on colors.  We realized that using brown to represent the strength of mountains was putting a damper on our brand.  Hills in California offer other choices such as green for spring or gold in fall.  The logo design direction was good but we dumped our color palette and started over.  You’ll see that progression below.  We recommend you embrace the set back as a healthy part of a creative process.  Try not to resist just because you are under deadline.  It may take you longer to make a bad design better than create a new design that works.

Here now is a trip down some of the design projects from our year and how we came to learn these valuable lessons.

Open Mountain Gets a New Brand

Our first project of the year was a new logo and Web site.  As I mentioned above, we did the logo ourselves starting from a creative brief.  Open has strong connotations for approachable and transparent but also open in the open source sense implying community and knowledge.  Mountains are strong, substantial and impressive.  The image below shows our progression from earthy colors toward what we have today.  This project benefited from all 3 tips listed above.  We used a brief.  We created mountains of visuals to consider different options, pun fully intended of course.  Our earth tones palette was replaced by something green, open and fresh.

We tackled the Web site next.  Below is our first attempt starting from our existing creative brief.  Do you see any major issues with this perhaps after reading our previous post about design?  You see a guy in a kayak against a mountain range exactly where the eye looks first on the page.  How informative is that?  We had hoped that the serenity of the lake we create a peacefulness when perusing the site.  One reviewer thought we were a travel Web site.  Furthermore, most people didn’t even look at the content at the bottom because it appears secondary to the overall page.  Time to start again.

Our new design started by utilizing our own advice and putting meaningful content in key positions.  We decide to use Flash animation to make the experience more engaging.  Below is our first shot at the flash panels for the animation.

Next we played with color and attributes to encourage the users toward different sections of a page.

In the end, we feel we created a site that is informative and engaging, and delivers the right message about our company.  Take a look and tell us what you think.

We Have Ads Now!

Our next project was creating advertisements for our business.  We procured several 250 by 250 spots on various Web sites through pay or partnership.  Due to timing constraints, we were forced to create something quick and dirty to meet a deadline.  This is what you get when you don’t follow good process or utilize any of the design tips we mentioned above.

Is there anything in this ad that is the least bit engaging?  What incentive do you have to explore this company?  What service do they really offer?  Right, you get the point.

We reset the entire project and thought hard about what were trying to do.  An expert gave us some advice on how to think beyond our current approach.  She talked to us about advertising and about how you create something like a “Got milk” or “Just do it”.

We have said from the beginning that we wanted to be different from what customers have come to expect with outsourcing.  We strive to overcome the separation between organizations and instead work to provide insight into what is really happening with the remote development team.  Working with Open Mountain should not feel like typical outsourcing.  It should feel like your own team.

Outsourcing never felt like this!

That was it.  We knew right away this was our “Got milk”.  When you outsource with Open Mountain, it should not feel like any previous experience you might have had.  Below is our first concept piece with the new approach.

Happy smiling people.  People actually enjoying outsourcing.  Exuberance.  Feedback from our experts confirmed this had appeal and communicated the right message.  We created 4 ads.  Here are the two favorites and we also used the one in the upper left corner above.

If you outsource with us, you’ll be as happy as a kid sledding or a crazy guy eating a huge lollipop.

These ads still crack me up.  They are quirky and unique and communicate our core message.  Of course, we rejected some ads as well.  Here are the two most controversial.

Outsourcing should feel like you are about to eat a huge hamburger, right?  People said he looked constipated or nervous.

Reaction to the woman eating cake was truly mixed across woman and men.  At the time we rejected the ad, one woman reviewer was saying this degrades our business while another said this would get the attention of our target audience.  Let’s just say that the ad did not fit well with our corporate values.

Clients Restart Projects Too

Design tips were learned working with clients as well.  Our client ThriveOn.com launched their site based on the design below.  As we added features to the solution, we soon realized that the design was creating some challenges.  This design is more consistent with a Web portal such as iGoogle or my.yahoo.com, and didn’t fit well with upcoming product changes.

The client went back to the drawing board and created a design more suited to the long-term growth plans of the product.  Below is an interim step from when we experimented with different color schemes.

The final site is presented below.  You can read more about our work with ThriveOn in our case study on the OpenMountain.com.

A Look at a Work in Progress

The year isn’t over yet and we’re designing new products all the time.  We strive to follow good process and utilize the tips mentioned at the start of this post.  Here now are two final mock-ups from a product we are working on.  The project is in stealth mode and some content is redacted.  Overall, the design process has gone very well.  Our favorite approach is not displayed below however.  You’ll have to wait until launch to see where we ended up.

3 Comments | Development philosophy | Tagged: , , , , , , | Permalink
Posted by bbenedict

Important Principles of Interface Design and Usability

November 12, 2008

When we design products with our clients, we seem to spend a lot of time talking about usability and intuition along with user interface aesthetics. You might be surprised at how many people focus primarily on look of their product and less on what the user is doing on the site.

My favorite example of usability gone bad is Amazon.com. Try finding your wish list or creating a new one. Try adding something to your shopping cart and then wanting to continue shopping in the same area you were at before. The only thing that says them is the usability of product search. But even then, the link to log in doesn’t even say log in. There’s simply too much focus on what they want me to do and not on what I am trying to do.

Take a look at these 3 legal Web sites quickly (10 seconds or less): Site 1, Site 2, Site 3. Waiting… Now, ask yourself, what do you remember? Don’t forget, you knew going in that they were Web sites having to do with law. I found one of these in particular that was clear and effective at communicating what was the focus of the site (do you know which one?). We often ask clients to send us links to sites they like to get a feel for their aesthetic values and design priorities. In the case of the law Web sites, the client walked in the door with one of these as an example of what they liked.

Web sites seem to be moving away from the crowded page like you might find on Amazon.com and moving toward the simple concept of “let’s get started.” This is a great trend. It worked pretty well for Google, if you compare Google to other early search engine sites.

Product interfaces should help the user answer 3 simple questions to be effective:

  1. Do I know what to do?
  2. Do I know what is going to happen when I do it?
  3. Do I like what I am looking at?

If your users are able to answer these 3 questions with a “Yes”, then you’ve done a great job. Let’s look at some examples.

Question 1: Do I know what to do?

If you compare www.avvo.com to www.nolo.com, you will see the difference between a site where the user knows what to do and a site where the user does not. Although, I think both of these sites could use a more informative name. Avvo has a search box in a prime location. The title says “Find lawyer”. I have no doubt than when I enter the name or location and click the button, I will get a list of lawyers.

Question 2: Do I know what is going to happen when I do it?

Have you ever really looked at the buttons on the Google home page under the text input field? You probably have not since hitting Enter works fine. Take a look and then ask yourself what does “I’m Feeling Lucky” mean. If you are not sure, click the button with an empty search field and you get a nice little explanation, “The “I’m Feeling LuckyTM” button automatically takes you to the first web page returned for your query.” How about naming the button something like “See first page” or “View first page found?”

Keep in mind that your users are generally trying to achieve something when using your product. They will feel more productive if they are focussed on that goal rather than clicking around to just see what happens. Use clear text for buttons that explains what will happen. Use text under icons to explain what the feature does just in case the user does not recognize the image.

Here is something you can try. Print your site, hand the copy to a friend who knows nothing about it, and ask them what the buttons do. You just may be surprised at what your friend is able infer from the image. We recommend of course that you fix anything they didn’t understand.

Question 3: Do I like what I am looking at?

Aesthetics still do matter. Function is more important. But after that, people tend to use products and Web sites that are pleasing to them in some way. I know that this is common sense. Surprisingly, from my own personal observation, companies that are really good at the first two points tend to fall down on the third. Which brings me back to our new partnership! Our teams work with clients to create intuitive work flows. And our friends at Luma are here to make sure the interface “pops”.

In addition to asking ourselves these questions, we also have some good tips to help with usability. Here are two of our best suggestions.

A great deal of research has been done with eye tracking to understand how people evaluate Web pages. Take a look at the blog by Eye Tools, Inc. The heat maps are very interesting. Another study to look at is done by the Poynter Institute in Florida. Click this link and scroll down to the section At the core: Homepage layout. We quote this information often when discussing design approaches with clients.

Eye tracking tells you where the user is most likely to look first. We suggest to clients that they put the primary focus of the page where users look first. You also use this to then determine where to put navigation, additional links, related information, etc.

We also own and reference several books by Edward R. Tufte. I recommend buying as many of these as you can, but be prepared for ideas that are part aesthetics and part design with hints of philosophy and history in between. What impressed me most was the power of data when presented in a way such that the images draw the conclusions. I am sure you will walk away with your own insights after perusing a few of his books.

1 Comment | Development philosophy | Tagged: , , , , | Permalink
Posted by bbenedict

Users Really Don’t Want To Think, So Don’t Make Them

October 9, 2008

I am reading Don’t Make Me Think by Steve Krug. His book discusses an interesting philosophy for creating simple and effective interfaces for users. The basic premise is making users think too much is a bad thing. Makes sense to me. I recently had my own encounter with being made to think which helped me appreciate the salient points of the book. And from there, I had a better understanding for how to make my own projects more intuitive. This is something you should think about too!

In reading the book, I was struck by how much of a simpleton the author thinks the average user must be. If the user can’t reach a conclusion quickly, the book presents, he is more likely to move on than continue looking. Users won’t read a paragraph of content. Count yourself lucky if they read to the end of the first sentence.

I am a big fan of creating interfaces that don’t require the user to hunt or guess what will happen. But should I really design a site the does not force the user to think? Isn’t it insulting to users to assume their attention span is that short? That users are that impatient? Will I truly draw active users to my site if I target the lowest common denominator so to speak?

Boy was I surprised to find out I was in this very category of user. Here is my sad tale.

I live in Napa where I belong to a number of wine clubs. I agree to buy a predefined shipment of wine every other month in exchange for discounts and other benefits. I got the following email from one such club a few months back:

Your July Wine Club shipment is set to ship or is available for pick up on July 14th. For those of you scheduled to pick up your wine, please note that we will also send an email and post card to let you know that it is available at the winery.

I read the email and drove to the winery the next weekend, on July 6th, to pick up my wine. What do you think happened when I got there? They told me that my wine was not ready for pickup. How can that be, I asked, I got the email saying it was time. We brought up the above email. Any ideas where the mistake was made?

You see, once I read “is available for pickup”, I didn’t read any more. I assumed the rest of the email was filled with marketing fluff or up sell or something else unworthy of my valuable time. I didn’t THINK to read anymore.

OMG, I am one of those users who doesn’t think!

The real issue here is the email. The tense is all wrong. If they simply had changed the words “is available” to the words “will be available“, then I would have kept reading to see when. I get hundreds of emails a week that I have to process while doing real work. Once I know what the email is about, a conclusion I am forced to draw rather quickly, I take whatever action is needed and move on. Plus, sending me an email in advance is useless as I am not likely to create an Outlook reminder for something like this. Would you?

I spoke to people at the winery about the issue after realizing that I would not get my shipment. They indicated I was not the only one who had done this. They did not give me my shipment early while I was there, which to me is just plain bad customer service. You see, it was my fault not theirs, right? I misread the email.

What I can tell you is that Steve Krug, the author if this book, is right on the money. We are all potentially users who do not think. You should keep that in mind as you develop your software. I’d recommend you get the book and then see how your work measures up. You just may be surprised.

UPDATE: After publishing this post, I received the follow up email from the wine club that my shipment was ready. This email was received on July 9. Here’s the email:

Your June club order has been processed and will be ready for pick up on June 30th at the winery.

Once again the tense is wrong. How can they say my pickup will be ready when the date referenced is in the past? Plus, if it was ready on June 30th, how come they didn’t give me my wine when I was there on July 6th? Truthfully, this is the downside of making users think. If your force them to really think about it, maybe they will conclude something other than you expected. I think I will email them and tell them to just email me when I should come over. Think they will listen to me?

Leave a Comment » | Development philosophy | Tagged: , , | Permalink
Posted by bbenedict