The pulse of Alexander Interactive

As a junior designer the thought of “creativity” and “organization” even being in the same sentence seems counterintuitive. But I learned early on that you cannot be an unorganized designer at Ai.

If you don’t organize your work, your designs will suffer. You can’t afford to lose things or forget tasks or client requests. Every missing document or lost bug assignment is time lost. This sometimes can be a difficult task when you have four project managers approaching you at the same time.

Prioritize 

One thing I’ve learned at Ai is how to prioritize. There is never a task too small, but some are more urgent then others. At the beginning of the day I take a moment to gather myself, prioritize my tasks and let all the project managers know where my priorities are and when they should expect their tasks to be completed. It’s always better to let a PM know they might not get their design change till the afternoon than to leave them hanging. (Their jobs are hard enough.)

Make a List

Once my projects are prioritized, I make a to-do list. Now don’t get me wrong; I love the internet and all it has to offer (just look at where I work) but I love the simple joy of Post-It notes. Call me old-fashioned, but there is nothing better than a good old pen and paper for making a to-do list (and the satisfaction of crossing things off).

It doesn’t matter what you use for your list as long as it works for you. Besides Post-Its, I personally find the Action Pads really helpful. If you find it easier to organize your to-do list on the computer, there are lots of programs. A favorite of the Ai design crew is Teux Deux, a free minimalist web-based to-do list.

Name Consistently

Now my workload is assessed, my day is prioritized, and my handy Post-Its are in sight – a to-do list is useless if it falls beneath the pile of papers on your desk. The same applies for your digital organization.

When working on tasks, you should have a consistent way of naming files and folders. I use concise but descriptive names that can easily be found via search. Always use a numbering system so you can track which file is the most recent. This has been especially essential recently in our work with retailers whose products are changing constantly with the season.

Save, Save, Save!

Last (but certainly not least) the Golden Rule: “Save your files. Constantly.” Make ‘Command+S’ your friend. You can have the most organized file system and the best naming method, but none of that will matter when your system crashes and you’ve forgotten to save your last hour (or day) of work. I’m having a flashback of losing hundreds of resized images in a single computer crash.

Don’t let my nonchalance fool you. As a junior designer, I’ve had to learn some of these lessons the hard way. Organization is difficult work, but the more you work at it the easier it gets.

Tracking your tasks, prioritizing, keeping your workspace organized and constantly saving progress will give you peace of mind and save you precious time, allowing you to be more creative. While some new designers may think of the two as mutually exclusive, organization and creativity go hand-in-hand.

During an interview I gave to Alison Enright of Internet Retailer magazine about designing across an increasing variety of devices, and the topic of the current excitement in the web design community came up. It got me thinking about why exactly everyone is so jazzed about what’s going on in the web right now.

While the storm of talk about responsive web design and new technologies are definitely factors in creating a high level of buzz with design oriented techno-nerds like me, I found myself realizing that these things are just a small piece of what makes the future of web so exciting.

We are again at a point where designers and developers are equipped with both new devices and the technologies necessary to create truly exciting content for them. Five years ago today, Steve Jobs unveiled the very first iPhone. Since then we’ve seen smartphones (then tablets) go from newfangled to prolific.

Right now we are creating new patterns and trends that will shape and form the way the web is used for ages to come. The internet is evolving it right now, and we have the power to make it whatever we want. It’s a good time to be in the web industry.

The Font-Bot Project is something I started for a couple of reasons. The first reason was I wanted to design a site with new HTML 5 markup and CSS3 properties. The second was, as a designer turned full time Front-End-Engineer, I needed a creative outlet.

I didn’t really just want to markup a site for a fake company or a new design portfolio. I wanted to create something that people would enjoy, and visit and maybe even use. As the web is going through somewhat of a type renaissance with the adoption of @font-face, I have become increasingly interested in learning more about typography and how I could use it in my pages. I am also very interested in robots. I have no idea when this started but probably around the time of Transformers and Robotech.

This is where the idea was born – when I was in art school I remembered doing exercises where we would have to design things using only type. So I decided to make the world my classroom and ask my students to create robots out of type.

But what good are dangerous looking robots if they are just standing there?

I figured that since I couldn’t actually make the robots fight that a voting system with a damage bar would bars would be a great addition.  I built the site on WordPress and used one of the many polling plug-ins out there to create the damage system. I also added the comments section so people could talk about the robots they liked and why, or so they could just talk trash about the one they didn’t vote for.

For me Font-Bot is just an ever evolving personal project. I am constantly making small tweaks to it with the feedback I have received from other designers in the community as well as the participants.

It has given me a lot more than I ever thought it would. I get great emails from people who have visited the site and enjoy it. I just received one from a college student in Tennessee who said his entire typography class is making font-bots as a project. I have also been lucky enough to receive a pretty steady stream of submissions. I even get submissions from non-designers, which is great. Just recently I received a submission from a writer. It has also been linked to in several online publications, most notably the recent mention in Smashing Magazine.

I realized the importance of personal projects through this experience. The site was not only fun to build, but also a lesson in design and development for me. It was one of my first experiments with the Modular Scale by Tim Brown. (You can also read more about the scale and Tim Brown here) It was also the first site I ever built using HTML 5 markup, and it built completely on WordPress. Although it’s not the first site I have built on WordPress, each one ends up teaching me valuable lessons.

I encourage other designers to create something for themselves and give it to the world. Doing so keeps your skills sharp and keeps you on top of your craft.

Does this sound like you? Two or three generations into your ecommerce site, your business is decent but flatlining. You’re on top of your metrics; you know your RPV, conversion, AOV, and dropoff at each step in your funnel. But conversion and average order have stopped growing, and you’re ready to evolve.

Ecommerce is changing rapidly. Consumers are expecting more of your site, and embracing modern techniques can invigorate your business. We’ve outlined ten strategies you can use to supercharging your ecommerce efforts below. Be sure to come back in the coming weeks, when we’ll describing methods of implementing each of these concepts.

1. Dynamic Personalization / Collective Intelligence – Your site is collecting analytics data from thousands of visitors every day, and has been for years. How much of this data are you utilizing? Dynamic personalization puts it to use, immediately and with surgical precision. When a customer visits your site, even without logging in, within a few interactions a shopper’s persona is defined and business rules are applied to surface relevant content and functionality. Dynamic personalization providers include Baynote and RichRelevance.
2. Social Network Integration – Social networking isn’t exactly new, but social shopping imperatives are constantly evolving, as we described in our posts detailing luxury brands and iPad usage and possibilities for the new Facebook API. At the most basic level, integrating a “Share” button that allows users to share your content to their favorite social networking destinations is a good first step, as is integrating Facebook “Like” button functionality. At a slightly higher level of customization and effort, there are login integration and review/ratings integration tools such as Facebook Connect. Sites like Social Commerce Today stay on top of social shopping trends and provide more robust examples of retailers leveraging social shopping integrations.

   

3. Mobile Sites – Over the past year, Ai has seen massive increases in traffic and transactions completed at client mobile sites. The age of the mobile site is truly upon us. Mobile consumers have different needs than users browsing on the desktop, and mobile devices have their own set of capabilities and limitations. A dedicated, designed mobile site experience is a must for progressive ecommerce retailers.

4. Location-Based Tie-Ins -The GPS capabilities of mobile devices usher in a new era of exciting location-based cross-channel promotion capabilities. Examples include promoting products that were shopped-for online when the shopper is in proximity to a physical store, pushing promotions available at nearby physical locations, and providing interactive directions and pickup/availability notifications for shopped for items.

   Apps like FourSquare allow you to extend your reach by pushing promotions and specials and rewarding repeat shopping, all while extending your reach to a new customer base.

5. Experiential UI – Beyond simply being easy-to-use, modern ecommerce sites for innovative brands can be experiential and immersive, transforming shoppers into brand loyalists by evoking an emotional reaction.

   The Wrangler Blue Bell Spring/Summer 2010 site (warning: music/audio) is a great example of an immersive/experiential UI where the interactions are fun and reinforce the brand message. Lowe’s Sunnyville (warning: music/audio) provides a game-based metaphor for shopping for lawn and garden products and project planning.

   

6. Contextual Visualization – Shoppers increasingly expect to visualize how a product will fit into their life and style. Retailers who allow shoppers to visualize how products look on them and match with other products they are shopping for and already own will have a significant leg up in the ecommerce marketplace. The aforementioned Lowe’s Sunnyville site (warning: music/audio) allows you to “create your own yard” and see how various products will match your custom needs. The Laudi Vidni website allows to shopper to see their products on a virtual model, and takes the concept one step further by allowing robust product customization to suit a product exactly to your lifestyle and needs.

   

7. Dynamic Grid Expansion / Liquid Layouts -Ecommerce sites are typically designed to work in 1024 x 768 resolution in order to support users with older technology. Trapping your product display in this “fixed width” doesn’t cater well to the increasingly larger percentage of users browser your site at resolutions of 1280, 1440, 1600, yet most current e-commerce sites employ fixed width layouts. Utilize liquid layouts to dynamically size your product display based on the shoppers’ resolution. Alternatives include showing more images/product at once, and dynamically scaling to larger images on both category listing and product detail pages.As a corollary, Ai has found that the “view all” link is the most clicked link on the most ecommerce category listing pages. Shoppers don’t want to page through screens of products – they want to see all of it at once. Consider an infinite scroll metaphor in order to display large sets of products in a scrollable list, rather than asking shoppers to jump page-to-page. Ai implemented an infinite scroll on the PexSupply.com category listing pages. As you scroll down, you’ll notice the number of products on the page automatically increases, with no performance penalty.
8. Minimize UI Cruft – Shoppers come to your site to see your products, not your fancy navigation systems. Yet most ecommerce sites spend a majority of screen real estate dedicated to navigation and ancillary functionality, and a minority of real estate dedicated to product. Modern ecommerce websites will reverse the trend and dedicate 75% of screen real estate to show product, with 25% for supporting navigation, not the other way around.
9. Rich DHTML and AJAX - Dynamic HTML and AJAX technologies have been a boon to shoppers the world over. Instead of having to reload a page every time the shopper clicks, these technologies enable a world of rich interactions that are nearly instantaneous. While not new, most sites are still just scratching the surface of how to use these technologies in a robust manner. Here are some examples of how to take your DHTML into the modern era:
   • Mega Drop Downs – Mega dropdowns offer large panels that are easy to access, break navigation choices into logical groupings, and can feature dynamic or interactive content. Check out the Jakob Nielsen mega drop down article, featuring Ai-designed mega-drop pioneer Action Envelope. Also check out Ai-designed PexSupply.com and BizFilings websites.
   • Robust Wizards & Comparison Tools – Guiding shoppers to products that are relevant to them based on their needs and providing detailed, interactive comparisons between products can be taken to the next level using DHTML and AJAX. Check out Ai-designed Bizfilings Incorporation Wizard and Comparison Guide.
   • One Page Checkout – Why make your shopper click through multiple page reloads, when you can let them complete their purchase all on one page? Ai-designed Steiner Sports and Cache.com websites feature one page checkout.
   • Product Option Selection – Showing product availability in different option combinations (for example colors and sizes) is a common UI problem. Check out how Ai used DHTML and imagery on the Chelsea Clock website to display options availability by clicking change product options from the page linked above.
   • DHTML Kung Fu – Individually, DHTML techniques like promo carousels, tabs, scrollers, and other DHTML widgets can be powerful merchandising tools individually. Combined, they can allow you to take your site to new heights. Check out the Action Envelope home page
10. Get Textual - Designers have been limited to a handful of “web-safe” fonts since the dawn of the web, and have had to hardcode anything else into images, slowing downloads and making custom messaging and personalization difficult and time-consuming. Not any more. With the advent of HTML 5 and font serving technologies such as TypeKit, the web designers’ typographic palette has been opened up as never before. This isn’t just a design nicety, but rather a critical innovation that will allow savvy companies to deliver targeted, personalized message in brand-consistent ways for the first time. The impact doesn’t stop there – not having to use images for any custom fonts leads to faster page downloads and great accessibility of type to search engines and disabled users. Ai has used these technologies on sites such as General Atlantic and Internet Retailer (not yet launched). Alternatives include sifr, cufon, and TypeKit

Our focus thus far has been on strategies that are modern, or next generation. These assume you are building on a solid foundation of ecommerce best practices and test-based user interfaces. Consider the two “bonus” strategies below as necessary pre-cursors to the items listed above.

“Boring” Best Practices - Ecommerce best practices are a hot topic for a reason – they work. Ai has evolved a custom set of best practices for ecommerce over our past 8 years of experience, and applies these as the baseline of every site we work on. Yet some clients we’ve spoken to consider them “boring” and would rather skip right over to the sexier stuff. Our message is this: best practices work. We’ve seen far too many sites where the focus was too heavily on brand innovation or winning awards, and where conversion tanked. Make sure your design efforts are based off well-articulated and understood best practices for the site as a whole, and for each discrete stage in your funnel, from home page down to the checkout receipt.

A quick Google search will reveal an abundance of ecommerce best practices. Some good places to start looking are Jakob Nielsen’s Ecommerce User Experience book, and the Marketing Sherpa and Marketing Experiments web sites.

Test, test, test – Designing a best practices-based web site based on a deep knowledge of your customers and products is a great start. Integrating A/B and multivariate (MVT) testing into your process can take your site to the next level. At Ai, we have integrated testing into all of our design projects for the past few years, and have always seen measurable lifts in conversion and AOV. The kicker is that testing actually saves time and money by short-circuiting lengthy debate and review cycles.

If you are just starting out with testing, try Google Website Optimizer, which is a free tool with limited functionality. For the more ambitious, Omniture Test & Target provides a robust suite of MVT testing and reporting capabilities.

Integrating the ideas above into your ecommerce strategy will take your site to the next level. But how? Let Ai do it for you, or come back in the coming weeks as we delve into each topic above in more detail.

In my back-at-home SXSW Interactive rehash, I’m enjoying the slides from Chris Fahey’s talk on sketching and UX innovation. The big takeaway for me isn’t on forging creativity but encouraging pragmatism. Chris preaches a lot of what we practice at Ai: thinking about personas and uses to create clever solutions to design problems. It’s a smart mindset for any web project.

Chris’s slides give a nice insight into just how thorough the design process can be. A well-thought-out initiative considers everything from individual end users to the tone of the site’s calls to action. Most importantly, Chris admonishes UX folks to try. Try things, see what works, and ultimately strike the balance between concept and execution. Indeed.

Did you know Google’s Chrome browser already has 5 percent of the global browser market? That it’s bigger than Safari?

And are you aware that, despite your (or your designer’s) disinclination toward it, Internet Explorer 6 still commands roughly 12-15% of the space?

These figures–and the specifics of browser traffic on one’s own website–matter, a lot, when new projects get underway. Google’s 5% market share means it’s officially a player in the browser wars and not just a side project. That means adding it to QA plans and considering some of its innovations, like proper use of HTML5.

At the same time, the continued prevalence of IE6, however sad, means that cutting-edge site design still needs to degrade gracefully to support the many corporate web surfers that can’t upgrade their browsers. Certain b2b or enterprise-positioned websites may have an even greater percentage of IE6 traffic, just as sites with a more academic or creative bent often have an outsize share of visits using Safari.

All of which just serves as a reminder that multiple browser testing and compatibility remain crucial in web design in 2010. The same hurdles the industry faced when balancing Netscape and IE in 1999 exist today, perhaps even more so. Expect the cries for standardized code to get louder this year and next as the market shifts and fragments. And in the meantime, don’t forget to give your site a proper run-through.

Or four.

Ai’s Devin Ikram and, er, yours truly were interviewed for an eMedia Vitals article on web design and content sites. It’s a good read, and covers both the high-level strategic perspective and the hands-on designer’s view of the same topic.

Check it out: What’s SEO without engaging Web design? on eMedia Vitals.

Ai’s fundamental strategic principle revolves around transactional intelligence. We take the basic truth of ecommerce–that every customer is a potential sale–and apply the same theory to each user that may visit a site.
On a high-performing ecommerce site, roughly 10 percent of users complete a purchase. What, then, of the other 90 percent? A portion of them may be lost sales, but the rest surely came to the site to achieve something.
Our goal, then, is to achieve as high a rate of successful transactions as we can, regardless of whether those transactions are financial. Should a user just want to know a company’s phone number, or to find out color and size options, that goal will be easily achieved and considered a success if the user leaves the site satisfied. Those moments create brand awareness and lead to long-term sales and customer relationships.
This theory readily applies to our non-ecommerce projects, too. Users visit sites to read, learn, get contact information, send emails, look at photos, download files, socialize with others. … Each site has its own set of achievable goals. By defining what these goals are, we can apply the same transactional sensibility to them, ana aim for high success rates across the board.
Ai has a full slate of projects right now, ranging from ecommerce to hybrid sites (content and commerce, community and commerce) to sites without a financial component at all. Our approach works across the spectrum, bringing transactional intelligence to each of them. Defining the opportunities makes each project unique while leveraging ecommerce best practices to make a website as effective as it can be.

Today’s item is a guest post by Ai fender Skottey Forden.

The visual components of a website are, quite obviously, the primary impact on a user’s impression of that site. Ai takes pride in creating visually compelling sites while taking an immense amount of care with the gears grinding behind the scenes. One aspect of the visualization that is often overlooked is the shortcut/favorite icon, more simply referred to as the favicon.

This tiny 16×16-pixel icon shows up in the address bar of nearly all modern web browsers, and is generally also visible in tabs when using tabbed browsing. One might notice a favicon, but chances are good that users never dwell on it or consider it to be of much use.

When a website does not make use of a favicon, it is potentially decreasing usability and a branding opportunity. That little 16×16 symbol adds value. It is a branding element and a visual component to which a user can associate a favorite website. This holds true especially when a user opts to bookmark that site. When applied to an e-commerce website, a favicon is a crucial element.

Online businesses want customers to access a site with as little effort as possible. If a favicon has not been set, the site it will show up in lists and browsers with a generic icon, or none at all. If a user has multiple sites with a generic favicon in the list of personal bookmarks, a site will fall into a pile of other “generic” sites. This may seem mundane, but it can limit accessibility as well as brand.

Over the past month I have performed a spot-check of Ai’s client sites to validate if a favicon has been implemented. If one existed, I checked to see how up-to-date it was, based on the most recent design of the website itself. If it needed an overhaul, it got one. If there was no favicon present at all, I created one. It is not a difficult process (and it’s fun!), but one must also consider that a favicon essentially sets a brand for a website, so it’s not a trivial item, even within the confines of that tiny square.

To date, a large percentage of Ai’s client sites, as well as our own internal sites and browser-based applications, have favicons. All future Ai sites will have a favicon implemented before the launch date.

This morning we gave a first-round design presentation to a client. In order to accommodate all participants and scenarios, we used three computers, four screens, one projector, and a GoToMeeting remote setup, all to show a series of visuals.

Unsurprisingly, every screen looked different. The projector washed out lighter colors and gradients; the widescreen LCD’s robust color was dwarfed by the projected image; the folks watching via remote had a smaller screen area with a too-high “fold.”

All of which serves as a reminder that visual web design remains an incredibly difficult medium. Colors wash, screens change length, text rendering shifts, scripts and cookies disable: any number of challenges stand between a designer and the effective presentation of designs.

Ai’s developers pride themselves on pixel-perfect page outputs that stay true to our visual comps. But even perfect execution does not eliminate the vagaries of millions of users’ screen resolutions, color depths, and personal settings. The level of user control that we celebrate online also creates an incredible set of scenarios that, despite 15 years of advancement, still requires clever compromise and broad acceptance.

The nascent mobile revolution will only add to the complications surrounding online presentation. It’s a tough job, but fortunately a fascinating one.