UI-patterns.com

Content Teasers collection: www.bpazoki.com

Sun, 08 Nov 2009 22:05:59 +0000

Product pages set: www.jules.fr

Sun, 08 Nov 2009 22:01:37 +0000

Product page showing color options, size options, and extra thumbnails in a well presented manner. Also notice the “Complete the look” section with related offers in the bottom of the page.

Image Zoom collection: www.jules.fr

Sun, 08 Nov 2009 21:58:11 +0000

Image zoom in a modal window.

Error pages collection: impactideas.be

Sun, 08 Nov 2009 21:55:45 +0000

Displaying data collection: www.dailymile.com

Sun, 08 Nov 2009 21:53:51 +0000

Great display of data at dailymile.com.

Lists set: djyura.com

Sun, 08 Nov 2009 21:50:32 +0000

List of songs for download at djyura.com

Product pages set: www.whatisblik.com

Sun, 08 Nov 2009 21:43:40 +0000

Well designed product page that rates and describes the product in various categories: installation difficulty and color combinations. Furthermore the page allows for user-submitted photos that could help generate a sense of social proof.

Thumbnail collection: arkitip.com

Sun, 08 Nov 2009 21:40:11 +0000

The diagonal orientation of each thumbnail creates a great looking pattern.

Pagination collection: www.whatisblik.com

Sun, 08 Nov 2009 21:37:21 +0000

Pagination that uses icons to illustrate paginated thumbnail pages.

Displaying data collection: visualdesigner.be

Sun, 08 Nov 2009 21:20:58 +0000

Typography set: kylestanding.com

Sun, 08 Nov 2009 21:19:21 +0000

Great typography setup and layout at kylestanding.com

Pricing Tables collection: mailchimp.com

Sun, 08 Nov 2009 21:14:40 +0000

Subscription pricing table at MailChimp.

Search collection: www.customtoronto.ca

Sun, 08 Nov 2009 21:08:00 +0000

Product pages set: www.customtoronto.ca

Sun, 08 Nov 2009 21:06:18 +0000

Product page with image zoom and well made call out to action (Place order).

Thumbnail collection: www.customtoronto.ca

Sun, 08 Nov 2009 21:04:40 +0000

Product thumbnails

Horizontal Dropdown Menu set: customtoronto.ca

Sun, 08 Nov 2009 21:02:00 +0000

Navigation collection: customtoronto.ca

Sun, 08 Nov 2009 20:59:17 +0000

Navigation collection: thebeastisback.com

Sun, 08 Nov 2009 20:56:24 +0000

Fat Footer collection: hyperxlocal.com

Sun, 08 Nov 2009 20:54:35 +0000

HyperX Local uses its fat footer to link to the social services where they are active.

Fat Footer collection: events.carsonified.com

Sun, 08 Nov 2009 20:53:01 +0000

Giant fat footer at the carsonified events section.

Blog post: A good design is measurable

Thu, 22 Oct 2009 00:00:00 +0000

How do you know if your design is a success? Simply, that it will be better than the old design?

A good design only makes sense if it is measurable. In order to make the success measurable, you need to lay down what metrics you are trying to improve.

Web design is no longer just about making stuff look good, but has undergone a radical change from being just about aesthetics to being a strategic tool to improve business. Successful design is aligned with the business. Successful design metrics are aligned with business metrics.

At Benjamin Media, a lifestyle magazine company with significant accompanying websites, we measure our projects against a series of KPIs. At project start, we decide what metrics are appropriate for measuring its success and lay down what level we should aim for. While the project is active, we can then keep an eye on the metrics and see if we’re on the right path, or if we should adapt another path.

To be able to measure success rates, we’ve set up a system, that continuously collects data about our system and economics. We can then look at how the profile sign-up rate, newsletter recipient sign-up rate, or how much of the budget we’re using on maintenance.

So instead of just making a design that will look better than the old design, you could choose to set the goal of “improving brand recognition”, “decreasing the number of support phone calls”, or “increase the number of job inquires”.

Examples of other design metrics are:

Pageviews. Websites relying on banner impressions would love to increase this metric.
Unique users. Websites promising a broad share of market reach would like to increase this metric.
Sign-up. Number of new sign-ups.
First-time use. How many users do actually start using what the sign-up promises.
Engagement. How many users are engaged over time – beyond one-time use.
Newsletter sign-up. Newsletters can be a good tool to sell, make users come back, or make money on affiliate marketing.
Products sold. Product conversion rates are the mother of metrics for many online businesses.
Money spent. A controversial metric for many designers is to build something with the least money possible.
Development time. Can we increase the development time compared to past iterations?
Traffic sources. Do we want to increase the amount of traffic coming in from Facebook, newsletters, referrals, etc.?
Amount of work. Is it possible to decrease the amount of support calls, or any other form of manual labor that wasn’t fun anyways?

What metrics have you recently designed for?