We recently had the pleasure of working with HookUP Media to help produce the Web site for “March for California’s Future,” an online companion to an event going on right now in the Golden State. Organizers say that the 250 mile march, sponsored by the California Federation of Teachers and its diverse allies from labor, the faith community, and other civic supporters, is designed to draw attention to the underlying causes of the state’s woes as well as gather signatures for a majority budget initiative.

Visitors are invited to take action by signing the online petition, donating to the cause, and even joining the marchers as they travel from city to city across the state. A core team of marchers staff the roaming “Blogmobile,” and a Google Latitude map is updated throughout the day on a mobile phone.

Check out the site at http://www.fight4cafuture.com/.

Devastation. Tragedy. Hopeless. Those were the words used to describe the recent earthquakes that struck the island of Haiti on January 12 near Port-au-Prince. To a nation that that was already struggling with poverty and trying to meet the basic needs of its people, the earthquake magnified the crisis for the world to see. Like many companies in Nashville, CentreSource matched its employees’ donations to give $500 to the UNICEF organization to help with relief efforts.

Late last year, we were approached by Trinity/HOPE, a feeding program aimed at providing meals for school children and teachers so that they may be agents of positive change in their communities and help lift up a nation. Their existing Web site did not effectively tell of the mission trips, year-round campaigns and coordinated efforts of partnering organizations to sponsor schools across the island. The new site builds upon Trinity/HOPE’s reputation as a spirit-lead organization that makes a difference in the lives of Haiti’s children, one bowl of rice and beans at a time.

Visit their site at trinityhope.org.

Slide from Whoa! Creating Engaging User Experiences

What is Experience Design?

According to The New Everyday: Views on Ambient Intelligence, experience design (XP) is the practice of “designing products, processes, services, events, and environments with a focus placed on the quality of the user experience and culturally relevant solutions, with less emphasis placed on increasing and improving functionality of the design.”

The New Everyday: View on Ambient Intelligence

What Are the Components of Experience Design?

Experience design is made up of six key components:

• Psychology
• Market Research
• Brand Management
• Information Design
• Interaction Design
• Visual Design

As you can see, these components span a wide array of skills. Don’t make the mistake of assuming experience design is the sole responsibility of your designer, usability expert, strategist, dog trainer, mother-in-law, or significant other to handle. Experience design is an inclusive process that involves every person on your team. It is a collaborative process that needs buy-in from every person that touches your project. With that in mind, let’s break down these components.

Psychology

Seek to understand your audience. Who are they? How do they think? What influencing factors shape their decision-making? What types of things evoke emotions from them? Why do people do the things they do? These are all questions you should ask yourself when determining the direction of your experience design.

Market Research

Know your playing field. What are your competitors’ strengths? What are their weaknesses? What have they tried in the past? Identifying these things can save you time identifying potential pitfalls. More importantly, this market research will also help you shape a unique experience that sets you apart from the rest of the herd.

Brand Management

You must have a good grasp of your brand. In this age social media, it may seem like you are not in control, but don’t make the mistake of leaving your brand to chance. You have the ability to control your brand as well as the ability to shape the perception of that brand. I promise you, this is not going to be easy. There are countless books and blog posts written about this very subject, and I definitely do not have all the answers.

Customer service is one aspect of brand management that is easy to overlook when focusing on function instead of experience. Remember the last time you got off the phone with a company and were so mad you wanted to hit something? How do you feel about that company now? Manage your brand well, or you may end up on consumerist.com’s “Worst Company in America” tournament bracket.

Information Design

What information do you want to disseminate, and how will you organize it? Construct your information in a clear, easy to understand hierarchy. Don’t dilute your information with unnecessary fluff. Find the core of your message, and stick to it.

Interaction Design

How will users interact with your experience? This is your opportunity to be creative! I am extremely impressed with the influx of augmented reality on mobile devices. For example, if you have a compatible device, check out the Amazon Mobile application.

Amazon Remembers

I also consider usability design a part of interaction design. Without good usability design, your users cannot interact with your product or service and will ultimately leave with a bad impression of your brand.

Visual Design

What is the visible face of your product or service? What will it look like? Don’t assume that a good logo is all you need. Keeping a consistent, well designed visual look to your logo, print collateral, website, packaging, etc. will help consolidate and unite your brand’s image. Visual design can help shape the perception of your product or service. Take a look at the visual design of any investment firm or financial management institution. Generally speaking, the design will convey stability and order, because they want you to feel at ease when entrusting them with your money.

What’s The Point?

You may be asking yourself, “why do I have to be concerned with all of this? My product stands on it’s own.” This may be true — your product or service may be so revolutionary that it rises to the top of our collective consciousness purely on the power of it’s own awesomeness. For the rest if us, we are going to have to invest a lot of hard work, time, and energy in making it to the top. Case in point: there are 187 million websites in the world. That means, if your site is an “one in a million” experience, there’s 187 other sites that are just as unforgettable. If you hope to rise to the top and elicit tangible customer interaction, you must constantly focus on the design of your product or service’s experience.

With all of that information, managing the taxonomy terms and categories could easily get out of hand. Working with his staff, we created a Symfony module dubbed “HyperWords” (the name is a work in progress) that scans the page content and recommends the appropriate taxonomy. Now, when a new page is created, it suggests to the author relevant categories and tags.

The new site is easy for prospective clients to navigate thanks to a clear strategy and professional design. The site is also easy for Dr. Biesman’s staff to manage thanks to innovations like HyperWords. We call that more than just a facelift.

Visit the site at http://www.drbiesman.com.

Which elements are necessary and which are fluff is itself a gray area as design is often concerned with creating an experience. Only a seasoned designer with a good grasp on a project can say whether a light sheen or gradient helps cater to the experience or is needless noise.

Why

People have strong emotional reactions to minimalism. I’ve found most people are polarized to either love it or hate it, but few discuss the deeper philosophical implications. A breakthrough I had years ago made me realize that loving or hating it is a moot point. The real question, the question that matters most, is “does it serve its purpose?”

To answer this question, one must first state the purpose to which the design is meant to serve. This varies within industries, as industrial design often has a specific purpose that differs from web design. But the concept that is shared despite the medium is interactivity, be it physical or emotional.

Famous industrial designer Dieter Rams spoke to this perfectly in his ten principles to good design when he said “good design makes a product useful.” Nearly 30 years later, has this become any less truthful?

It’s not just designers that need to appreciate the concept of enhancing usefulness and experience. This philosophy is only truly successful if everyone responsible for a product or service believes in it.

The next time you encounter something you would classify as minimally designed, I challenge you to place your initial emotional reaction aside and ask “does the design make this more useful?” The answer will often surprise you.

This isn’t to say that minimalism serves purely a functional purpose. By stripping down an idea to its bare essentials, you’re reaching the core from where your visual ideas can flow.

Noise

I’m tired of the noise of modern advertising. Everyone I know is tired of it. Yet the stream continues to grow, evolve, and find ways to dig deeper in our lives because, ultimately, it works. The more you spread (read: force) a message to the masses, the more it will stick. WhatI hope is starting to happen is a great example of diminishing returns, where people become disenchanted with the sheer amount of communication channels and become harder to reach.

This is where minimalism shines, as one of the core tenets laid out by Rams is pure honesty. We’ll never be completely free of the cheaper tactics designers use to sell products and services, but a clear and powerful aesthetic and message is undeniable. Why else is Apple predicted to surpass Microsoft’s net worth and yet they’re only half the company’s size?

Because elements in minimalism are more sparse, they become more important. The smallest decisions on typography and layout can make or break the piece. But when done correctly, the sheer simplicity and honesty of the message sticks out. If I see a cluttered ad with tons of color and type treatments, I don’t even care to see what it’s about. If I see an ad with a beautiful, carefully selected photograph and a single line of text set in an interesting font, I’m inclined to pay attention.

In other words: instead of being louder, be simple and useful. This will be noticed.

Sampling

Again, it’s hard to set a hard criteria for what is and isn’t minimalism. However, here are just a few quick selections from my bookmarks and why I think they are a good representation of the minimalist style.

Wilson Miner

Featuring a nice grid and beautiful use of Helvetica, Wilson Miner’s site shows that straightforward content can be fun. Interestingly, the base font size is set at 16px which, while much larger than normal, is quite comfortable to read.

A Magazine

A Magazine’s new site is simple, offering limited navigation options (found at the bottom of the site), which leaves the top free to showcase the product they’re proud and passionate of. The straight-on photography is nice, and the Flash that powers the sliding book showcase is unobtrusive.

Helveticons

I dig the way they put the icons they’re selling and the inspiration for them front and center. The typography is clean and they put their icons to good use as nice complementary imagery. Minimalism is more a concept of pure and direct communication, without extraneous imagery… the Helveticons site shows bold color and illustration can be used to great effect.

What’s Next

As people become more immune to communication clutter, designers can continue to promote clear and simple messages using all the traditional tools at their disposal: typography, color, layout, imagery, et cetera. I think this new decade will hold great things as we take a step back and pay more attention to the principles of design that have paved the way.

I’d love to hear from you. What is your gut reaction to the minimalist style? In what ways do you think it helps or hinders a product, service, or idea?

As such, Google has been busy releasing various tools to help with user’s experiences on the web:

Google Chrome

Ok, so this technically came out for Windows in 2008, but was released fully cross-platform in 2009. Chrome (and its subsequent big brother “Chrome OS”) is an open-source browser that borrows components from Apple’s WebKit and Mozilla’s Firefox (both open-source projects) and aims to “add value for users and, at the same time, help drive innovation on the web.” As of January 4, 2010, Chrome had officially passed Apple’s Safari browser to become the 3rd most popular browser behind Internet Explorer and Firefox.

Real-Time Search

As Twitter has grown in popularity, it has quickly become the first source for breaking news, mostly due to the ease and speed with which you can post information. In Q4 2009, Google signed a deal with Twitter, Facebook, MySpace, and FriendFeed (among others) to allow search results from each of their sites to be propagated into the Google search result page. The benefit of this is that one can get to-the-second results of what they’re looking for — all in one place.

Webmaster Tools

While improving the end-users’ tools can greatly improve usability and performance, Google acknowledged that individual site optimization is key to a successful user experience by releasing a variety of webmaster tools to help web developers identify slow parts of their site, and provide tips on how to improve those areas. One group of tools was added to Google Analytics under the new “Site Performance” section, that gives an analysis of your site’s performance relative to the rest of the web, as well as particular suggestions on improving page speed. This is particularly helpful in identifying over-arching tips and tricks that can improve the loading speed of your site as a whole.

The second tool is a Firefox extension called “Page Speed” that takes the analysis provided in the “Site Performance” section, and moves it to the browser, allowing you to view specific recommendations on a page-by-page basis. This is particularly helpful in identifying very specific ways to improve the speed of a particular page that might be loading slower than others on your site.

The third tool is a Chrome extension called “Speed Tracer.” This tool is more geared towards the performance of web applications, focusing less on the initial load time, and more on the strain that using the website itself puts on the user’s browser. Using Speed Tracer, you can pinpoint exactly what scripts, actions, or files are causing your website to appear to slow down.

Public DNS

The nerdiest most technical tool that Google announced was their hosting of a Public DNS server. DNS, or Domain Name System, is an essential part of the web that helps translate domain names (”blog.centresource.com”) into the unique Internet Protocol (IP) addresses of the computers where the website files live. By providing a Public DNS, Google plans to not only optimize the hundreds of DNS requests that the average user makes every day, but also to gather data about user’s browsing patterns “to improve the browsing experience for Internet users globally.”

[ To be continued ... Part II will include our findings on particular areas prone to slow down your website and what you can do to improve your website's performance from small sites to enterprise applications ]

I say that because of what other numbers tell us. Outside of our wonderful tech-filled bubble, only a small percentage of Internet users keep their browsers up to date with the latest releases. A significant number of them still use Internet Explorer 6, a browser released on August 27th of 2001. Let me repeat that for emphasis — there are Internet users with an eight years old browser. We as a society typically do not keep our cars (or spouses; see ‘divorce rates’) around for that long, why on earth would we hang onto something that can be updated for free?

There are two reasons for keeping “old” browsers around. The first is “because we have to.” Some institutions bought in so whole-heartedly into the nifty-yet-proprietary features that IE6 brought with it that it is cost prohibitive to test and fix their systems to work with any other browser, even Microsoft’s latest offerings. The much maligned “box model” that IE6 uses in its rendering engine can turn normal Web sites into useless piles of text and images. Web designers by and large despise* fixing IE6 issues. The outlook for this group is a bit bleak: until money is invested in freeing systems from the IE6 shackles, an eight year-old browser will continue to be one that we have to contend with and work around.

The second reason for keeping older browsers around is simply not knowing an alternative. As I said earlier, an Internet browser by its very nature is supposed to sit quietly in the background while you interact with the Web sites that it retrieves for you. The only time you are reminded that there is a browser there at all is when something goofs up. Keeping the browser updated is a lot like organizing the garage or taking down the Christmas lights — sure, it needs to happen, but what is it hurting right now?

The answer: it can be hurting a lot. Older browsers are no longer supported by the companies that made them, and are often the target of malicious attacks on the Web. It follows a simple pattern that shows that the longer a browser has been available, the more susceptible it is to thieves exploiting security holes to steal your personal information or otherwise use your connection as a cover for other attacks. You will see a lot of debate over who has the fastest or most secure browser. We will save that for another time. More importantly than whose browser you use is whether you have updated to the latest version.

Add it to your list of New Year’s resolutions. It will probably be a lot easier to do than some of the other things you have put on it.

Popular browsers:

• Microsoft Internet Explorer (Windows)
• Apple Safari (Mac, Windows)
• Mozilla Firefox (Mac, Windows, Linux)
• Google Chrome (Mac, Windows, Linux)

* Editor: The decorum of this blog does not allow us to run the first string verbs and adjectives that came to mind.

Ozburn-Hessey Logistics (OHL) specializes in third party logistics (3PL) services, meaning that they partner with other businesses to meet their supply chain demands on a rapidly scalable platform. Our goal for the site was to communicate nearly 60 years of experience in a way that appeals to logistics decision makers. One of the ways that we achieved this is by producing a video that you can view right on their home page. The video features two people representing very different businesses, but one shared need — a partner for their global distribution network.

The OHL Excellence and Media Center sites were created to cater to the specific needs of different segments of visitors to the site. Excellence highlights OHL’s mission and values, corporate culture and awards with which they have been honored for being a global leader in their marketplace. The Media Center serves as a central location to find out about news and events for the company.

Visit the site at http://www.ohl.com.

What makes this site different? We had the pleasure of working with photographer Carrie Vonderhaar to really bring the nautical look and feel to the Web. Our strategy from the beginning was to let her photography shine throughout the site to help create a unique user experience. The older site lacked a CMS and was spread out over several domains. Now, updates to the latest environmental news and information comes at the click of a mouse from anywhere in the world.

The site also tracks the OFS team on their expeditions around the globe, and a new Live Events section will bring the experience right to you through an integration with Ustream. Registered members can also download ringtones and wallpapers for their mobile phones. Users that register on the site are simultaneously added and updated through the Democracy In Action’s Salsa supporter management platform.

Visit the site at http://www.oceanfutures.org

fontcapture
http://www.fontcapture.com/
Create a font from your own handwriting. No software required. All you need is a printer and a scanner – and it’s free!

Gliffy
http://www.gliffy.com
With Gliffy online diagram software, you can easily create professional-quality flowcharts, diagrams, floor plans, technical drawings, wireframes, and more.

HTML to PDF
http://www.htm2pdf.co.uk/
Free online tool that allows you to convert HTML to PDF. Also includes a free “save as PDF” option for websites.

Thinkature
http://thinkature.com/
Real-time collaboration/virtual team workspace for the web.

MyStickies
http://www.mystickies.com/
Sticky notes for the web. They let you save the web for later – like bookmarks on steroids.

feedly
http://www.feedly.com/
feedly organizes your favorite sites into a fun, magazine-like start page.

Adobe Browserlab
https://browserlab.adobe.com
An easier, faster solution for cross-browser testing.
Preview and test your web pages on leading browsers and operating systems – on demand.

Fliggo
http://www.fliggo.com/
Build a video blog, the next YouTube, or just a private place to share videos … in seconds.