5 Tips for Differentiating Your Design Mocks

March 6th, 2009 by Ian Wilson

A designer’s greatest challenge isn’t necessarily in coming up with a good design, but in coming up with a good design that is different. When the client is expecting multiple design mock ups finding the balance between a design that is innovative and unique while also maintaining a high level of usability can feel like an uphill struggle. You really like how your first design came together and the temptation can be to borrow from and lean on those same strengths in your second mock.  This quickly turns the uphill struggle into a long fall down a slippery slope, and the next thing you know your two designs bear an uncanny similarity that is impossible to miss.  Ever find yourself in this situation?

Know your client

Try to get a solid grasp of your clients branding strategy and message (whether the client is able to give it to you or not) before you get too far into the design process.  Some clients invest more in defining their brand than others, but some research on your part of their market and competition can help you to grasp what they’re all about and what their expectations will be.  Once you’ve done your research, you can begin planning out your design strategy: for example, design one could focus on one aspect of their branding, while design two will focus on another, etc.  While planning out your strategy, ask yourself the following questions: can any part of their message be communicated through imagery?  Are there important pieces of information that need to be highlighted in the design?  Has the client made any specific design requests or suggested any similar websites that they’d like to draw inspiration from?

Start with a clean slate

Start fresh

When working on multiple mocks for the same client, start with a new file each time.  Beginning a design by deconstructing a previous mock may seem like a good idea, but you’ll likely be leaning on the crutches of your previous design, which doesn’t usually allow for a unique vision.  You should always try to start fresh without any preconceptions.  Sure, you may want to reuse a couple of the original design elements (text from the primary navigation, for example) but make it a point to start with a fresh canvas whenever possible.

Find Inspirational site galleries

Get inspired

Sites like Smashing Magazine and Pattern Tap can be a valuable asset during the design process since they’re are constantly compiling galleries of the latest design trends and showcasing unique and creative designs.  The highly innovative nature of the designs means that most of the sites they showcase generally tend to be blogs and designer portfolios, but just because the site your working on is for a lawn mowing service doesn’t mean that they aren’t relevant!  Observe how they manipulate the ‘standard’ layout idea and how that manipulation affects the site’s usability, how they use color and typography, how they arrange the page elements in the spacial plane, etc.  Bringing in an idea from an unrelated site and adapting it to fit within the needs of a completely different project can, if nothing else, give you a fresh insight that could lead to a break through in the design.

Take a break to clear your head

Take a break!

When you get to the point that you feel like you’re in a rut, your shoulders are starting to hunch, and you get that twitch in your eye, and it’s already long past time for a coffee (or tea!) break,  roll your head back and stare at the ceiling, touch your toes, take a quick walk outside, or do whatever it takes to get the blood flowing again.  This is one of the most common pieces of advice you can find on getting past a creative block, and for good reason!

Try a different starting point for your design

Try a different tool

Some designers swear by their pen and paper rough drafts. For others, the idea of starting anywhere other than Photoshop is completely out of the question.  However, if you find yourself staring at the same Photoshop document for an extended period of time with the same vacant expression on your face, it might be time to change mediums.  Concordantly, if your sheet of paper just isn’t doing it for you, try hopping into Photoshop or Illustrator.  The change of setting and tools can free you from thinking within the confines of your usual tool set and give you fresh ideas on a new approach to the design.

What do you do when you find yourself in a rut?

[Slashdot] [Digg] [Reddit] [del.icio.us] [Facebook] [Technorati] [Google] [StumbleUpon]

The Ultimate Ecommerce Reference Guide
Part 1: Maximizing Your Store’s Usability

October 10th, 2008 by John Paul Narowski

Over the last decade, Ecommerce applications have evolved into a highly competitive art form - needing more than just a simple product listing to succeed. Thankfully, years of experimentation have allowed us to analyze and distinguish the successful Ecommerce techniques from the not-so-successful ones.

This article is the first of a three part series dedicated to helping you maximize return on your Ecommerce site. This post will focus on usability and how to provide your visitors with a smooth, positive shopping experience. Part 2 will focus on search engine optimization and traffic building techniques, and Part 3 will demonstrate how bringing all of these tips together can increase customer trust in your brand.

Site Navigation

Site navigation is key to a successful Ecommerce solution - you want your visitors to be able to find what they're looking for as quickly and easily as possible, otherwise they may lose interest and leave the site entirely. The following techniques will help to keep your visitors from getting lost in the product labyrinth.

Page Headings and Breadcrumb Navigation
Clearly identify where your visitors are on the site by providing easy to read headings and subheadings. Use navigation breadcrumbs to help your visitors visually understand how deep they are within the site structure. From a search engine standpoint it also provides additional keyword references, and allows search bots to more easily crawl your site.

Include Category Headings
Adding headings to your categories makes it easier to quickly scan through the menu without having to read each item.

Show the Search Bar Above the Fold
Having your search above the fold allows visitors to always have quick access to find what they want. If the search bar is on every page, your visitor can easily locate products, without having to browse to a separate dedicated search page. If you don’t have a search (and you have enough products to justify it), you should seriously consider adding one.

Browsing the Product Catalog

Like site navigation, the way in which you organize your product results will determine the ease with which users will be able to find what they want. A well structured product catalog can also lead to increased sales margins by pointing users toward other relevant alternatives or components.

Let Me Narrow Down My Results
Give your visitors multiple ways to narrow down their results. Ecommerce shoppers have a very short attention span, so it’s critical to provide a quick and direct path to the items they are looking for. This will help the users who know what they want find it quicker, and provide the users who don’t know what they want suggestions that might help them make a purchase.

Show All Products
Provide users with the option to see all products in a category. It can be frustrating to force users to page through results unnecessarily.

Product Recommendations
List products that are similar to the product being viewed. Frequently you will see product lists with headings similar to “Customers who bought this also purchased…”, “Recommended Products” etc. If you are a customer purchasing a microphone, it could be very helpful to know that your store also provides the cable, or a discounted bundle package if you purchase them together.

The Checkout Process

The checkout process may not seem like an important Ecommerce usability concern, but if a user begins to feel confused or overwhelmed with the process - they may leave the site out of frustration or fear that their private information isn't in the safest of hands.

Break it Up
This helps the user tackle one section at a time without being overwhelmed. Typically users must enter billing details, choose a shipping method and confirm their order. Having smaller steps ensures that there is less information to enter for each step.

Where am I in the Checkout Process?
Use well defined text and imagery to provide your visitors with a clear understanding of where they are, and how many steps remain before they complete their order.

Allow Shopping Cart to be Edited During Checkout
If a user is unable to make a change to their cart during checkout, you may risk shopping cart abandonment. If it is not clear how to change their order, the visitor might become frustrated and leave your site.

Don’t Wait Until the End to Calculate the Shipping Cost
Some stores wait until the end of the order to show you the shipping cost. Customers want to know what they are committing to before embarking on a lengthy checkout process. Trust and transparency throughout the checkout is critical to ensuring the order is completed.

A Few User Friendly Ecommerce Examples

Amazon.com

Amazon utilizes many of the above tactics to ensure a productive shopping experience. With their sophisticated product filtering and recommendation engine, you almost never have to leave the site to research a product. Once you are ready to purchase, the checkout process is simple and intuitive. It's no surprise that they are one of most popular internet retailers.


Shoes.com

Shoes.com provides an enjoyable and interactive shopping experience. A drop down navigation menu provides easy one click access to the stores categories. While browsing through products, you are provided many options to refine your results further. The product detail page is clean, and multiple perspectives of the product are available. The only downside we found was that the checkout process didn't identify how many steps were involved.


AE.com

Shopping for clothing online can be a frustrating and ineffective process. With AE.com, we were able to easily locating clothing that matched both our style and size preference. On the product details page, we were able to zoom into the product image to see fabric detail. AE often provided images of alternate colors to match your preference. The checkout process was clear, with progress indicated at the top of each page. I would certainly shop for clothing with them again!

Conclusion

While often overlooked, Ecommerce usability can certainly make or break a sale. With so many stores to choose from, the visitor has a very low tolerance for clunky navigation, or a confusing checkout process. The longer you keep your visitors comfortably browsing your store, the more likely they are to place an order.

In the next installment of our Ultimate Ecommerce Guide, we'll show you several techniques for optimizing search engine results and increasing traffic to your site. Check back soon for Part 2, or subscribe to our RSS Feed to receive instant updates.



[Slashdot] [Digg] [Reddit] [del.icio.us] [Facebook] [Technorati] [Google] [StumbleUpon]