Design Lessons Learned Example

February 27, 2010 by bbenedict Leave a Comment

One of our top posts so far this year is our post about design lessons learned in 2009.  We provided suggestions that might help you successfully complete your design project along with examples of our work.  The key tips we presented were as follows:

  1. Start from a creative brief
  2. Use multiple visuals
  3. Plan to start over at least once

At the end of the post, we showed a hint of a work in progress.  We now can say the mock-ups were from our new product hinventory.com.  You can learn more about our launch in the hinventory.com blog.  We thought we’d go through the design steps in more detail to help illustrate the tips presented above.

hinventory.com started from a real need in my own life.  I had previously gone through the painful process of cataloging everything I owned in excruciating detail. The process was time-consuming and I soon gave up maintaining the list as do most people.  Late last year, I was thinking about the simplest way to get this done when it hit me that all I really wanted was take photos and mark the significant items in the photo.

First, we wrote some specs and did a creative brief to better define the product.  I can honestly say I am addicted to the creative brief at this point.  There’s nothing like collecting your thoughts to focus what you are trying to do.  I may even start doing them for house projects or working in the garden!  The graphic below is our proof of concept piece that went with the creative brief to help define the product.

Once we understood the direction, we set about developing the product.  The first version was intended to be a working prototype or beta that we hoped to get some users testing.  The interface is presented below.  Feedback on the product confirmed the market opportunity. But…

… the interface faced some challenges.  When developing functionality you sometimes make design compromises in the name of productivity you later regret.  This interface looks like it belongs on the TV show Romper Room for those of you who remember that.  The logo and banner are straight from a 3 year old’s bedroom.  It doesn’t work, I know.

Lesson learned.  Start over.  Get some fresh eyes.  Maybe hire a graphic artist.  We did.  We used one of our favorite artists in Costa Rica and she didn’t disappoint us.

The above interface is the one we selected over the examples in our lessons learned post.  The interface is clean, intuitive and aesthetically pleasing.  Putting the content inside boxes though can lead to problems later on.  If I had to list a fourth lesson learned from last year, it would be to design for functional expansion and page growth.  We did another round of mock-ups using less restrictions on the actual page content.

We selected number 3 as the final design and then moved on to the logo.  Here are the samples we created before sending a few select ideas to our artist.  Using multiple visuals proved key for illustrating to our artist what we liked and what we did not.

We ran into one final design issue during the course of development.   Take a look at our iPhone application mock-up below and see if you notice the issue.  We created the mock-up ourselves.  We’re launching the app next month so keep your eyes and ears open.

Do you see the issue?  The problem was the markers.  They are barely visible.  The same issue existed in the Web version, but we hadn’t noticed it as much until we saw the photos on the iPhone.  Marking items is essential to both applications.  We moved to a red marker inspired by what you see on a map.  The final interface markers and all is displayed on our product page.

You can see the product yourself by signing up on hinventory.com and using the product.  We hope you do.

Cheers.

Filed under Development Management Tagged with , ,

Design Tips from Lessons Learned in 2009

December 9, 2009 by bbenedict 3 Comments

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.

Filed under Development Management Tagged with , , , , , ,

Important Principles of Interface Design and Usability

November 12, 2008 by bbenedict 1 Comment

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.

Filed under Development Management Tagged with , , , ,