You may have read my post about Chartbeat, and their great approach to real-time analytics, but this time I’m bringing you the results of some simple data mining from our Champion Sound email templates. Consider this a different kind of analytics.

When we launched our Champion Sound email template system, one of the first questions my co-workers and I had was: “Which template will the users like the best?” About a year later, I’ve got the answer to that question and I must say that the results aren’t what we predicted. Here’s where design meets usability, simplicity, and analytics.

When we looked at the Champion Sound users’ combined template usage, what did we find?

• Is the prettiest design is the most popular? – No.
• Was the most revolutionary design was the most popular? – Nope.
• Is the design with the best use of colors and texture the favorite? – Not even close.
• Did they like the design with boring colors, the least texture & a minimal approach? – Yes!

From the bullet list above, it’s obvious that Apple is on to something with their minimal approach to design, and the results from my mining support that. The graph above shows the usage spread for email blasts sent using Champion Sound. I only counted emails that used a template, sent between February 15th 2009 (when we fully rolled out our first set of templates) and October 28th 2009 (when we rolled out our 7 new templates that you can see below). Some of us guessed that the pretty sky-blue “birdies” template would rank super high in the list, many thought the “grunge” template would rank higher than 6th as well. The end result is that the template with the least amount of personality turned out to be the most popular.

The reasons for this landslide of template choice might be simpler than you think. Perhaps the authors of the emails did not want to detract from their message. Maybe the flashier templates did not fit the music style or the subject matter being written about. Another interesting aspect of the templates that I observed is user loyalty-the users who used templates typically used the same templates over and over. However, of the several styles of templates above, ranging from minimal and clean to grunge-inspired, bright colors to subtle ones, and  monochrome to photographic, all varying in complexity, the simple dark theme was chosen more often than all the others.

Here are our newest round of Champion Sound templates. Which do you think will be the favorite among these? Additionally, do you think that the designer of “dark” can be dethroned by any of these new designs?

From Left to Right: green, aged paper, vines, clouds, mocha, hanging, billboard

I’m taking unofficial bets in the comments area. If you’d like to see larger versions of the templates, create a Champion Sound account and try them out. My bet is that “mocha” and “hanging” will dethrone “dark” and rise as the new minimalistic template favorites.

Related Reading:
40 Killer Minimalist Blog Designs
70 Stunning examples of Minimalist Web Design
Email Templates are not Print Graphics

Very often I will try out an iPhone app and find myself asking the question. Whats it all mean? No not in some esoteric, questioning of life type of way. I’m looking at the app and asking what is it supposed to do for me. Perhaps it provides a fraction of the functionality that the website provides its logged in members, or its a really cool showcase of the iPhone interface capabilities. More often the apps are ridiculous throw aways that are about as useful as the gum that is wrapped in a bazooka comic strip (ooo, bazooka comics, now that’s an app that would be fun to have…but I digress). So when I find an app that is doing it right, I want to draw some attention to it and commend them for what they have created.

So last week I started to get excited about the return of snowboarding season as rumors of pre-season powder started to trickle in from various parts of the country. Wanting to keep abreast of the developing weather patterns and tease myself like a kid counting down till Christmas, I went looking to see if there were any new snow report apps available. Long ago I started using these apps with Powder Church, which was basically a link to an iPhone formatted website that had limited functionality for finding and reviewing the snow reports for most significant resorts in the US and Canada. Later came The branded free apps from REI, and CliffBar, and pay-for apps like skireport.com each with their own thematic differentiators, but all basically the same thing. Good apps that serve their purpose with recent accumulation, weather forecasts, community banter, resort information etc.

As I looked over the list to see what was new, one caught my eye. Now I am familiar with the Skullcandy brand from the slopes and the shops and perhaps have cursed their name a few times when someone glides obliviously by me on the slopes and I can hear what they are rockin’ out to from their Skullcandy headphones, but I am also aware that they have some of the most creative and viral ad campaigns in the action sports industry, and the fact that the app is free made it a must try.

That’s when the fun began. Skullcandy has really created a great app here. The features are too numerous to name, but some of the highlights are as follows (from their site):

• FREE
• Surf reports so you know when and where to rip.
• Up to the minute snow reports plus a 5 day forecast.
• A skate park finder for nomads who have to try them all.
• Free music player chock full of Skullcandy-approved tracks.
• Video from Skullcandy TV loaded with shorts featuring Skullcandy athletes and musicians.
• For those who want it all, a dealer locator feature will find the nearest shop for instant gratification.
• A mobile Skullcandy store that allows you to buy new headphones, backpacks or other Skullcandy gear.
• A fresh selection of continually updated wallpapers designed by Skullcandy fans that allow users to defy genericism.
• Access to all Skullcandy happenings through the Skullcandy blog.

The app also works with your phones mapping functionality to get you to any of the surf skate or snow spots you might find.

Basically it does it all. It gets you stoked via its music, video, and photo content. Keeps you informed with their blog’s connection, and subtly serves company goals via dealer location and direct shopping features, and the best part is it wraps it all in a beautifully designed interface that is simple to use and leverages the already established conventions of iPhone interface to be instantly  usable.

Are there features that are missing? Of course, but this app still rocks and does what it supposed to effortlessly.

So big ups to Skullcandy, You are doin’ it right and I look forward to what come next when I see a little update notification for version 1.0.2

A while back we started working with a team from AutoTrader Mexico to create a solution which will offer the optimal user interface design and user experience for their service. The project is still in the works, but I wanted to share an aspect of it that was a challenge for both teams. It offers a great user experience, while still maintaining the ability for the code to degrade if an older version of a browser is being used, thus being fully compatible to their dynamic demographic.

Focusing primarily on the search feature, you can imagine there is a lot of information to enter when you are searching for a car. You enter in a lot of data ranges for your search criteria, whether it be the price, year, mileage, etc. After adding multiple cars, entering the information manually by typing or selecting them from a drop-down can get tedious.

So, as a solution, we decided to add range sliders for the data ranges. Our final decision was using jQuery’s UI Slider library which offers a great user experience. Since we knew that some of the demographic we were targeting might be using older browsers, or might have JavaScript turned off, we needed the slider implementation to be able to degrade for those users.

We wrote our code so that all the sliders on the site are unobtrusively inserted into the DOM where any given <select> ranges are present in the HTML with a predefined class assigned to them. It grabs the min and max ranges from the values of their associated slider range, and when either of the handles are updated, the associated range <select> value gets updated. A text node is modified within the slider element for ease in establishing range choices. We can exclude the JavaScript object from firing on older browsers that would not be supported and the user would have the standard <select> to work with.

The benefits of using the sliders to the user are:

• It takes less time to enter your information, preventing the user frpm getting frustrated.
• It allows for a very pleasant experience to the user. Sliders are so much more enjoyable to manipulate than <select> fields.
• They were by far the best choice, given the context of the information being requested.
• They look good.

And with the the intention of building it to degrade, if an older browser is being used or JavaScript is disabled the search form still remains intact, thus not losing anyone to a broken feature. Instead of just hitting some of their demographic, they can get them all. jQuery gave us to opportunity to offer AutoTrader MX’s user the best option for user experience and design.

Cheers!

Related articles by Zemanta

• JQuery: JavaScript Library of the Future (slideshare.net)
• Single-Use jQuery Plugins (viget.com)

There’s a fine line in determining if a project deserves the attention of multiple workers.  In my time as a web designer I’ve faced the extremes of being overwhelmed from start to finish as well as having too many cooks in the kitchen.  There are a lot of factors involved such as site complexity, size and time frames.

The main argument is that teamwork burns more hours.  This can happen if people aren’t working well together whether it’s design style differences, communication, meetings or too many strong-opinionated workers.

But the point is that teamwork can lead to a better product!  There’s a thin line between the right amount of brains in a project and too many, but it’s obvious several minds hold more knowledge and experience than one.   Any given website may require strategy, planning, design, front-end code, back-end code, marketing and more.  Freelancers and small web design companies that assign one person to complete a project from start to finish can produce great work, but they can’t excel at every aspect, so the question is, which part of the site could improve and by how much?

• Collaboration is the key.  User interface experts and designers come up with effective and interesting interactivity.  Designers challenge developers to push web technologies to the limit.  Developers implement content management systems and solid code  so other developers can easily and quickly make additions and edits.
• Yes meetings take time that don’t involve production, but talking and planning about a design or code element before diving in often dramatically reduces the production time.
• Having multiple designers on a project yields more creativity, innovation and a better user experience.  It may not always be as efficient in terms of hours spent, but you’d be amazed at how fast it can go in terms of turnaround dates.
• If stumped on design or code, often the best and fastest solution is asking a teammate for help.

If you’re a web designer that hasn’t had the opportunity to work with others, I’d highly recommend giving it a shot.  Not only does it improve your end result, it also makes work more interesting and fun.  There are co-working offices and tons of web design community groups out there, so get to it.

The goal of SlideDeck, our newest digital product, is to make it easier for users to digest and understand the content of a website. We have developed a formula that storyboards a process, product, service or other subject matter and applies a simple format to best understand the content and make a decision regarding it. SlideDeck was designed to replace the web’s current model of text heavy services pages, unclear product tours and confusing process diagrams with a fun, quick and beautiful way to interact with websites.

Information Overload
Most websites are plagued with information overload in the form of titles, text, bullets and, if you are lucky, supporting images. They feature bloated pages with a footprint the size of Texas and require the attention span of Stephen Hawking. This is especially evident in web and desktop software product pages. Check out the Amazon S3 or the Nirvanix SDN product pages. Huh? With the DIY culture that the internet promotes, how is a moderately technical person expected to review those pages and make a confident product choice?

Some product pages are stark of content and assume that you know way too much to begin with. Take this Quickbooks product page as an example. Oh that page doesn’t have enough info – try their detailed product page. Come on!  They assume that a user knows exactly how their accounting software works and are only shopping for features. Most users shop for the whole experience of a product, not just a feature.

What About Videos, Screencasts and Presenations?
Easily produced video, screencasts and presentation slideshares have significantly helped this problem, however, allow me to point out what is missing in each medium.

• Videos are a risky use of time. There is no guarantee that the video will provide the answer I am looking for since there are no standardized interactive cues to easily access the content I need.  I personally limit my time to 2 mins or less on videos and find myself trailing off and multi-tasking due to the lack of control over the content.
• Screencasts are typically more topic driven, however they are usually presented by the geeky developer of the product with no marketing savvy or presentation technique.  This isn’t good for your product mojo and I still don’t know what type of content I am going to get out of the passive presentation.
• Presentation Decks are great when you are presenting in person.  In this case, the slides are designed as speaking points, not content. Reviewing a slideshare without the presenter is void of the story, intonation and purpose behind the idea.

Let’s be honest, today’s internet users have the attention span of an A.D.D. gnat, myself including.  I don’t want to take the time to watch a video, screencast or page through a presentation.  I want to scan the page for helpful information, proactively dive in at my own pace and quickly find the answers I am looking for to make a decision. That was our inspiration for SlideDeck.

Why SlideDeck
When viewing a SlideDeck, you can index the content at first glance by reviewing the vertical sliders. You can take a holistic approach with the SlideDeck by progressing through each slide in order to understand the complete concept.  Or you you can jump ahead to the topic you are interested in. Even though the slides was designed to build upon each other, a slide is also designed to stand on its own. You have the option to delve deeper into the subject matter of each slide by navigating vertically (up or down) into a deck that is dedicated to that slide’s content. Each slide can contain simple HTML text and images as well as rich content such as flash, videos, screen casts and presentations.

A SlideDeck can be custom designed to blend in perfectly on your website as a header or navigation system. It can also be contained within a button, waiting to be clicked and opened in a lightbox view.  Think of all the content you can express to your user in a simple, elegant and fun interface. SlideDeck adheres to web standards and is great for SEO as it is entirely indexable via search engines.

The Back Story
As a User Experience Design Company, we value digital innovation and are always looking for ways to make our websites more effective. We stumbled into the concept when trying to simplify our own message and process. We were inspired by the work that Common Craft had championed and wanted to create a simpler way to express ideas and concepts with code. The first SlideDeck can be found on our Services page.  We left the original services copy below to contrast the effectiveness of the SlideDeck versus text and images.

Currently, the only way to get a SlideDeck is to hire us to design one for you.  We are working on packaging the code for distribution with a small license fee. We would also consider creating an app that allows users to quickly build and share SlideDecks. Ultimately, we want SlideDeck to become a medium of which people create and share their ideas.

Please chime in with your thoughts on the product as well as future forms of use.

Related articles:

• Simplicity in Good Web Design : Advantages & How -to (noupe.com)

Logo design is a strange bird. Some logos undergo vigorous $500k processes while others are simply sketched on napkins in seconds. Does it matter? Not really. What matters is that the logo is successful in achieving its goal and purpose. The goal of a logo is to identify and represent the owners intended message.

I am not here to talk about process, color theory, trends or typefaces. The point of this blog is to simply explain the different types of logo designs. This is so basic that it is often overlooked, but it can be a very helpful exercise in creating or picking the right logo design. Before you start sketching monkeys and dinosaurs, make sure the client actually wants a mark. Don’t know what a mark is? Keep reading.

There are 3 basic types or classifications of logo designs:

Symbolic

These are also known as icons, marks or ideograms. They focus on imagery, not text, to identify or represent the owner. This type of logo works well for established companies who are easily recognized. You will often find symbolic logos on things like cars, clothing and various other products. Symbolic logos can also be further broken down into letterform marks and abstract marks.

Logotypes

Logotypes are also known as wordmarks. They are characterized by their unique type treatment. They can stand on their own without the use of a symbol, icon, mark etc. Logotypes use typography, color, size and style to represent the owner or brand.

Combination Mark

A combination mark combines type and a symbol to represent the brand. These can be as simple as adjoining a logotype with a symbolic logo, or they can be fully integrated and fused together (commonly known as an emblem).  These often give the brand a more focused identity since the user is provided with more information therefore less room for interpretation.

So which type of logo is right for you? The good news is that you don’t need to necessarily pick one. Many companies have versions of all 3. The first step is to take a look at your brand, product, company etc. If you are a sports team, you will most likely want a logotype and a mark. A law firm may only need a logotype. Take a look at where the logo will be used. Will it be placed on clothing, billboards or stamped into a bar of chocolate?

The most important thing to keep in mind is the goal of the logo. Is your logo successful in identifying your brand and intended message? Creating a successful professional logo helps users/customers establish a connection, feeling and emotion to your brand. And if you succeed in that, your logo is working.

This is obvious, I know, but usability and user experience is everywhere, and lately I have been watching a lot of NFL Football. While watching and appreciating some elements I noticed some fun stuff to discuss that is related to user experience and usability.

Sitting back and catching a game with friends is always good, unless your team is the Titans or the Rams. Sorry. While watching the games, I have to appreciate the usability and improvements to the experience they have thrown into the game’s broadcast for all us viewers. There have been hundreds of articles written about the yellow line first down marker, so I won’t jump into that, but have you ever tried to watch a game without it these days? It’s difficult. Every season they come out with a new scoreboard for the top of the screen or a new feature on top of the little yellow line. For all of these helpful and cool things they have done for the game, they have designed a few “improvements” that should still be evolved and a few things that should be designed to help not just us, but the announcers. If they help the announcers it will improve the experience of watching a game. No one likes a bad announcer.

While watching the games these past couple of weeks, I have noticed those small little yellow dashes that jump in and out of visibility at the top of those nifty animated scoreboards at the top of the screen. These little guys signal remaining timeouts and are an nice simple concept that has been around for a little bit. The problem is… I can only see these new little dashes when they are on a background that contrasts enough with the bright yellow. When play is going on though, the dashes conveniently line up with the multicolored crowd and those helpful dashes disappear. Now I am sure they have already noticed and will remedy the problem soon, but it was strange to me that I was now unconsciously picking up on these problems and immediately looking for ways to improve them. I guess this is the curse of a user experience designer. Discover a problem and find a solution. I just need to learn how to bite my tongue when I am not in the company of other user experience designers.

Above I mentioned the idea to improving the viewers experience indirectly by directly helping the announcer. I’m not trying to be a football snob, but sometimes I feel like the announcers have no idea what they are talking about or they are watching a completely different game. The problem is… they sorta are. Now, I am not making excuses for them, it just seems that they are not being given as much information about the game as they could have. We are watching the game sitting feet away from a big screen with multiple different angles, zoomed in shots, and slow motion replays, and these guys have to announce from a suite up off the field looking at those tiny little monitors that we viewers sometimes catch a glimpse of in the background.  Why don’t the networks help out the announcers a little bit with some of this awesome technology we, the viewers, get to experience?

So to NBC, FOX Sports, ABC, CBS, and to any of those other networks I may have missed, I have a few recommendations to help your announcers and improve your viewers overall experience while watching the next big game on the big screen.

1. Give your announcers big screens. Most of the announcers are older folk. Help out those poor experienced eyes of theirs with an over-sized image.
2. Show them multiple camera angles at once. They are probably smart people and can manage. When they are arguing about a completely obvious instant replay, it makes me think they are not looking at the same shots I am.
3. Last, I have seen that cool car tracking technology in NASCAR. Yes, I watch NASCAR sometimes. That gopher cam is awesome! Anyway, apply that cool car tracking technology to the major players and show a read out of their stats. When they claim LaDainian Tomlinson is in and it is Darren Sproles, it makes that frequently repeating rant about how LT is back, completely unnecessary. This would also instantly show off some interesting stats to the fans.

So, now that my random rant about football and the experience is over, keep your eyes peeled for usability improvements in different places other than the web. I am sure you know, but possible improvements are everywhere!

This is 2009, and email rules the world when it comes to business communications.  It’s powerful and efficient, but heartless and absolutely one-dimensional.  There’s no inflection, intonation, expression or visual queues.  With billions of emails being sent every day, it’s no wonder that so many are lost in the melee, and those that make it through are barely digestible. The signal-to-noise ratio (valid emails vs. spam) is incredibly low, and that alone can be damning to interpersonal communications.

Don’t get me wrong.  I love email, and could not live without it.  However, we’ve been using alternative methods of communicating our strategic and design work for quite some time now, with tools like BaseCamp, Axure RP Pro and Screenflow.  It’s time to add a bit more flavor to the day to day updates.  I’m going to do our clients justice with better communications through technology – video messages.  This isn’t cutting edge, I understand – but it’s the closest thing to a shout across the office or a quick, in-person update.  I want our clients to see my face and watch my expressions as they listen to my words…that’s what communications are all about.

I’m not talking about real-time videoconferencing – I’m talking about sending a personal message that can be saved, reviewed, fast forwarded and rewinded.  A file that is easy to reference and organize when you want to see it again.  Something much better than a blinking voicemail indicator.

Friends, partners and soon-to-be clients of dt, look out!  My funny-looking face is coming soon to a screen near you.

Click here to view the embedded video.

For some reason I always seem to end up working at companies where I am the only female on staff. Not just at dt, but at other companies as well. So after spending more than a few years in the all-boys club, I have learned a few things. These tips are not just for those like me in an all male environment, but for women everywhere who have to deal with men on a daily basis. Take it from me, there are some things that are helpful to know.

Many women go into a job because they are excited about the opportunity and the chance to make a difference. They want to feel good about their role and the contributions they are making to the company, and to society in what they do. Why do you think there are so many women teachers? If corralling snotty-nose little ones all day is not giving back, I don’t know what is.

Guys on the other hand are mostly at work to collect a paycheck and more often than not, win the game. Think sports. You don’t play to have fun – you play to win. Its important to realize this early so that when you share a great idea with your male co-worker over lunch about how to make the CRM system better, and the next thing you know he’s gotten a promotion because of YOUR idea, he’s just playing the game. And he’s there to win.

Don’t Expect to Find Your BFF at Work
Many women have a hard time when people don’t like them. And this is why some women are ‘soft’ in the workplace. We think – if they don’t like me, then how can I be in the same place 8+ hours a day with them? Thing is, you’re working and you have a job to do. If you are a boss, be a boss. You’re not at work to make friend, and some people just may not like you.

Respect and friendship are two different things. When you are doing your job, and doing it well, you will gain respect. Even if that means scolding an employee for a bad job. Just remember that you all have the same goal – and if you are working to make the company a success, no one can fault you for this.

Sit at the Big Boys Table
So many times I hear women afraid to position themselves in a place of power at the conference table during meetings – client or internal. We fear “If I sit next to the CEO then people will think I’m a suck-up.” But when Bob or Doug sits there does anyone think anything other than he took an open seat? Point made.

Speak Up and Speak Out
Why do women feel that they can’t speak up and take a stand in business? I know that we, as women, have come a looong way over the past generations, but I still hear some of my friends saying that they are afraid to speak up in concern that they will look too mouthy or will appear to be a b@$*h. You are smart. You have ideas. If you don’t share them and take credit for them, someone else will. And it will most likely be a man.

Laugh at Yourself
During a tense meeting one of the guys on your team cracks a stupid joke. Everyone laughs… except you. You feel like you need to be serious – this proposal is due in three days and you have 10 days of work to do!

Don’t take things so seriously! You’re at work with your co-workers more time than you are any place else. Have fun! You don’t need to be a stand-up comedian, but you can take things lightly and have some fun. You’ll likely make more BFFs this way anyway.

Be a Woman and Be Yourself
Just because you are in a male dominated workplace, it does not mean you need to join their fantasy football league and down burgers at lunch with the boys. If you join their ‘league’, don’t watch sports and ask your husband or brother for your picks, you will get picked on. No doubt. And if you start to beat them… oh boy…

Just be yourself! Wear your jewelry. Don your favorite pink sweater. Don’t think burping out loud and talking about bowl movements will earn you friends (unless, of course, that’s how you are naturally. I’m lucky to have a pretty gross sense of humor, so I may be different).

And be a woman. What I do, naturally, is offer an open ear to the guys once in a while. No one listens like a woman does. And we don’t judge or try and ‘fix’ the problem for our guy-pals. We just listen and let them vent. This is something that they can’t get from the guys and will definitely earn you points.

I just got back from a brief vacation to the Northwest to visit my father-in-law and had a couple hundred emails to go through. Along with the waiting emails I had to get back into the swing of things in the middle of the week. I can tell you that today has been a bit more rocky than a normal Wednesday for me would be. I have not quite hit my groove and there is a lot of work to get done, and sometimes I wonder if there is enough time.

I have found in the past, and was reminded of it today, that it helps to plan my day expecting my work flow to be interrupted. It happens most everyday, and I have learned that as much as I would love to be able to stack up the calendar with back-to-back time slots that sometimes it does not work out according to plan. There are too many variables in any given day: a client does not respond in a timely manner, or my local environment runs everything smoothly and when I push it live the whole thing falls apart, etc, etc.

I can only plan for so much and the rest I need to be able to adapt to. I have found that if I plan on at least 1 hour a day of flex-time I will be on schedule, my stress levels will decrease and I will more often be better off for it.

I have made it a habit to schedule my time using Google Calendar, I admit I have not been doing to well as of late, but it is about time to kick it back into gear. If someone has a task that I think will take 45 min. of dev. time, I will typically schedule an hour in my calendar. I know it takes 45 min. to develop it, but then I have to email the client, attach a document, or talk to someone else in the office. And all of that plus the time it takes to transition into the next task might take me an extra 15 min. If it does not, now I have a 15 min. chunk of time I can flow the next task into.

I also find that instead of blocking off a whole day to work on “Mr. Smith’s” site, it helps to break it down into achievable and flexible chunks. Homepage – 3 hours, internal layout – 2 hours, contact page – 1 hour, etc. Now I have chunks of time I can move around if needed. Instead of just a general task I now have specific goals.

When my day has been going as planned or better than planned I can slide some blocks forward and continue on with my groove. If something is taking more time than anticipated, or that beloved IE6 is being its grand’ol self, then I can more easily slide my blocks around or have that time accounted for.

When I try to stack up tasks, I get overwhelmed when one thing goes wrong. Based off my experience, if I schedule in some flex-time, I find that I am less stressed, I can meet my goals and deadlines better and just enjoy the day more.

I would love to hear what our readers do to plan their schedules to make them more flexible. What they have found works to relieve some stress and help their productivity increase.