The About page is one of the highest trafficked pages on a site. People look here to see if your company has the talent to meet their needs. If they’re not satisfied with who you are, they may not navigate to additional pages and you’ll lose a conversion. So brag a little…toot your own horn…have others toot your horn and don’t be afraid to get a little personal.

When bragging, I mean describing the accomplishments of your organization, make sure that you tie these accomplishments to what you can do for prospective clients. If the journey of how you got where you are today is impressive, briefly inform your visitor of that history and its key milestones.  Include awards and acknowledgments your projects have received and don’t forget to update these as they come in. If you haven’t received an award since 1995, it may be best to not include that one. It will look as though you were great last century but haven’t kept up with the times. If your organization is involved in the community this is a good place to show off your big heart.

Have you worked with some big players in your industry? Let them tell prospects how amazing you are too. Other people reinforcing your accomplishments will boost your credibility in the marketplace. Testimonials are even more effective when they come from recognizable names. If the person or company name may not be recognizable, add a photo or company logo to help personalize the statement.

Last tidbit of advice: Stop the snooze-fest by showing some personality! Humanize your company by deformalizing the copy. Use attention grabbing adjectives and verbs to make your information fun to read.  Many corporations may be leery of moving the tone to a personal feel. If that is the case, A/B test and take note of the difference in conversions as well as time spent navigating to additional pages. Showing personality is especially important if you are the brand (i.e. web designer, consultant). Having a video for your About page is a unique way to speak to your audience if you are the brand.

Whether you are a large corporation or working from your garage, people still want to know why they should pick you. So, be sure to use pizazz while substantiating your expertise in order to stand out from the crowd.

Heather Schmidt, Account Development Executive, W3i, LLC

Heather provides value to W3i’s partners by continually focusing on optimization and growth strategies. 

Have you ever made a download or install decision based on the quality of the app icon? I’ll be the first to confess that in a time where apps are becoming more and more abundant, where you have the choice of hundreds of thousands of apps, it is becoming increasingly difficult to stand out and find a useful app. Much like in speed-dating, users will make decisions in a matter of seconds, especially considering the mobile context and our increasing demand for instant gratification.

Arguably, the quality of your app icon will increase the chances that users will give your app a fair shot and (hopefully) fall in love with what it offers behind the scenes. In other words, if you put together your app icon without much thought and effort, the chances of a user choosing your app versus skipping it for the next one are close to nil. Does that mean a quality app icon equals a quality app? Certainly not. The same is true for the inverse. However, it will most likely make users at least explore your app in more depth and lead to an install for further evaluation.

So, what does a quality app icon look like? There are plenty of app icon tutorials and resources out there on the net, some better than others. Michael Flarup (on his PixelResort site) has put together one of the better set of guidelines for app icon design (even though it’s a little dated) and I won’t rehash any of it here. The only thing I would augment is the “Stand out from the crowd” section. While Michael shows some good examples, we can push the envelope a bit more. I’ve seen some great concepts come through on Dribbble, a site where some of the top designers hang out and show off their latest works. Here is a small sampling from some work featured on Dribble of how your app icon can stand out even more:

Examples of App Icons that Stand Out

Unfortunately, there is not much, if any, data on what types of icons actually work better in the various app stores. It would be nice to run some A/B testing and get a better understanding. Regardless, making your icon look great is likely a step in the right direction (don’t skimp on the value the actual app provides either). Remember, first impressions matter.

What are your favorite app icons?  Feel free to post in the comments.

David May, Director of Creative Services; W3i, LLC
David has been working in the design industry for over 9 years and carries a fancy B.F.A. with focus in Graphic Design. He’s a native of Germany and loves peanut m&m’s. about everything related to the web and design in general.

What are your favorite app icons?

With the recent news of the bucket load of funding W3i is investing in developers’ applications there is a lot of interest in the AppX service. One of the features of the service is the free production support. Sounds awesome but what do you actually get out of it? I am one of the Producers at W3i’s Recharge that offers this free “production support” so I’ll let you in on what goes on in what I’ll call “Recharge Studios Freemium Playbook Sessions” where I’ll present a brief example of one of the playbook elements. Here goes:

Social Freemium Playbook Session 1: Envy  

Your game should allow for the purchase and display of content to create envy between players. The best way to apply envy is to set high price points to special items in your virtual store for customization of a player’s character or world. These special items should have an outlet to display this character to other competing users and friends. These friends see your high priced item and know that you paid big money either by playing a lot and earning your way to purchase or by making a premium purchase.

Much like a leader board that encourages players to “beat” their friends, this will create an opportunity for users to try to earn enough currency to purchase the high-priced item to compete with their friends. Additionally, this item could have a modifying affect on your game such as increasing income by 10% during an income cycle or it could have no affect other than visual stimuli.

Here is an example from SkyVu’s Battle Bears Royale, a Recharge partner.

Users begin with a basic character skin for Oliver. He looks pretty good here, but this is the character everyone starts with. The user wants to differentiate themselves.

Users Want to Differentiate Themselves - Start with a Basic Character

No here is an impressive look that will stand out from the crowd.  It is a little spendy so opponents will know how serious the user is about Battle Bears. Since the user already made a premium purchase, he has plenty of joules to spend.

Personalized Characters Indicate the User is Serious About the Game

Battle Bears Royale offers an obvious outlet for displaying this envious bear design to opponents in the live online battle arena. Even if the user doesn’t run into every player, since he disposed of an opponent, his icon appears on the right hand side of the screen for all competitors to see.

Icon Also Shows on Right Hand Side of Screen

At the end of the battle there is another opportunity to see who just dominated the competition with nine kills. It was JIMIVG33 and he has the awesome O.C.O Oliver skin that costs 400,000 joules.

Heat up competition with prominent scoreboard.

There you have it. Envy created by a premium purchase and an outlet to display the item to other users. Stay tuned for the next Social Freemium Playbook Session!

Jimi Van Guilder, Producer, Recharge Studios, W3i, LLC
Jimi is a mobile content expert with a decade of experience working with brands that include Nickelodeon, the NFL, NBC, Marvel, Snoop Dogg and LucasArts. Jimi heads up production at W3i’s wholly owned publishing arm and investment fund, Recharge Studios.

First impressions matter. In fact, 90% of people form an opinion about an interface in 1/20th of a second, which will impact the likelihood of someone interacting with your app or website. Astounding!

Don't Compromise on App Aesthetics for Higher Conversions

What can someone possibly absorb in that amount of time? Likely, things that are not always front and center when one thinks about creating an app or service. Elements like colors, shapes, layout, balance and white-space among others – the look and feel of whatever interface they are looking at. These aspects create emotions such as trust, joy, comfort and so on (or the inverse). Certainly, these emotions can and will influence the way users explore and interact with an interface, if they chose to do so at all.

Still think you don’t need to worry about aesthetics? Think again. A plethora of research was conducted that supports the notion that aesthetics play an integral part in the user experience – in short, attractive things work better. Investing in aesthetics increases the likelihood of a user choosing to interact with your product and also increases the chances that your user will return to use it again, and tell their friends about it. Aesthetics increase the perceived value and usability of your product.

So what goes into creating a successful, visually pleasing design – something that is aesthetic? There is no magic formula, but there are general guidelines. We call them design principles. Principles that deal with many of the elements mentioned earlier in this post. Talking about each could easily take up a number of subsequent posts. Instead, I will point you to a decent collection of resources that noupe has put together recently: 45 Free Lessons in Graphic Design Theory.

What apps or sites can you think of that are visually appealing and invite usage?

David May, Director of Creative Services; W3i, LLC
David has been working in the design industry for over 9 years and carries a fancy B.F.A. with focus in Graphic Design. He’s a native of Germany and loves peanut m&m’s. about everything related to the web and design in general.

Are we really at the point where we can expect consistency on the design we create for the web to be viewed the same in modern  browsers.  Well, we are much closer than ever before.  The latest modern browsers are supporting html5 and css3 properties and the updates to these browsers are happening at a much faster rate.

So can we really start using these new techniques across the web?  What if the majority of your visitors to your sites still use older, less capable browsers?  You know the ones I am talking about?  Well don’t let that hold you back, there are options.

First of all we need to accept the fact that form enhances function and does not create it.  That the site looks the same in all browsers really the most important thing?  Or truly is some degradation in older browsers acceptable in order to increase performance for all?  Do we limit or add a bunch of extra code just to satisfy this need of pixel perfect consistency for all?  Or can we move forward with progressive enhancement allowing for maximum amount of browser features with minimum footprint.

Starting with standard compliance html and css as a structurally sound foundation ensures maximum portability with minimum maintenance.  Once the foundation is in place we can then work on building out the look providing an enhanced experience for those browsers that natively support these features.

There are options to make progressive enhancement easier.   Here are some free web design  tools to help with this: (including, but not limited to):

Free Web Design Tools for Progressive Enhancement

Modernizr (http://modernizr.com/)
to target supported browser features.

Selectivizr (http://selectivizr.com/)
to help IE shortcomings.

HTML5 Boilerplate (http://html5boilerplate.com/)
a template to help build sites from.

This is not anything new, many have been championing this, but it is worth repeating.  Not just other web designers and  developers need to understand this, but everyone that works on or with the web.  This helps with saving bandwidth, increasing page ranks, and progressing the internet forward.

Doing this will help progress the web forward even faster and we can spend more time on the beauty of it and less on the fixing of it.  Let’s not work for the various browsers, let’s make the browsers work for us.

An example of the progressive enhancement technique can be seen  in this MusicOasis landing page.

Eric Stevens, Sr. Web Designer , with 11 years of web design experience focusing on modern web standards and best practices.

The inverse relationship between image quality and file size is something that every web designer must deal with when creating images for their sites. While this still remains true, there is another step that many people do not even know exists that can shave precious file size off of every image they create for the web.

ImageOptim (for Mac OS X), The Jpeg Reducer (for Windows) and PNGGauntlet  all have similar functionality. All hree programs work by processing images that are dragged into the application and then removes unnecessary data from those images. In a few simple, quick steps you are able to save anywhere from 5% – 30% or more from your web images. And the best part? The  compression methods these  applications use cause no image quality loss. Oh, and it should also be mentioned that all three of these programs are completely FREE.

Three FREE Programs to Reduce File Size

(Mac OS X) JPG + PNG –  ImageOptim

(Windows) JPG – The Jpeg Reducer

(Windows) PNG – PNGGauntlet

Shrinking the file size of your images reduces load times,  saves you bandwidth and makes for happy users across all devices!

Mike Albers, Senior Web Designer, W3i

With more than eight years of webmaster experience, Mike focuses on creating quality websites and landing pages for W3i and its partners.

Analytics were the talk of GDC Online last week.  Apps are getting much more competitive.  You can no longer just build a great app and hope to get discovered and retain your users.  You need to not only market your game but do predictive analysis to improve engagement.

Nick Lim of Sonamine pointed out the following in his session, “Predicting Player Behaviors.”  There are three stages in life cycle  management for games:  1.  Welcome/educate, 2.  Upsell/referrals, and 3. Seek renewal/retention.

Stage 1,  Welcome/educate.  Make your game easy to play with simple tutorials.  Predictive analytics can help you determine where the drop off is in your tutorial (see case study at end of article). The more engaged the user is the higher retention, less churn.  More  engaged users are also easier to upsell.

Stage 2,  Upsell/referrals.  Limit your messaging.  Your game should message the user at the right time with the right message. If you try to upsell too soon, you will overwhelm the user.  The user is only receptive during a brief window.  Predictive analytics can determine the optimum number and timing of messages.  “Spamming” the user causes the following:  numbness, annoyance—user can only do one thing and is trying to focus on the game, waste of money, hurts your reputation and degrades trust.

Stage 3, Seek renewal/retention – Again use predictive analytics to communicate with the user at the right time.

What is the difference between Metrics and Predictive Analytics?

Metrics measure and report the past with 100% certainty.  When using metrics, you can only view correlations between a few variables.  Predictives estimate and predict the future; certainty is impossible.  You can do predictive analysis with 50-100  variables.  Predictive modeling will give you a competitive advantage.

When using predictive analysis you are looking for the users that are “on the fence” as it will be easier to get them to cross the conversion line.

Case study of analytics at work at W3i

Speaking of tutorials. One of Recharge Studios games, My Pet Zombie, had an abnormally high churn rate during the game tutorial.  By optimizing the tutorial and improving the user interface MPZ reduced the churn from a 41% completion rate to a 81% completion rate—a 98% improvement.

My Pet Zombie - Conversions Prior to Test

Through testing churn rate reduced from 41% completion rate to 81% completion rate--a 98% improvement.

Improving just one particular image in the tutorial, shown below, saw the churn rate go from 25% to 4%.   The developer focused on the elements circled in pink.

The churn rate went from 25% to 4% by focusing on the elements circled in pink.

Predictive analytics will give you the information you need to grow your game business or just contact Recharge Studios, and we can help you improve your game marketing.  Have you run any tests that increased performance considerably?  If so, feel free to comment.

Debby Manthei, Director of Marketing Communications, W3i, LLC

Debby’s focus is on app marketing—strategies for increasing user acquisition and monetization for mobile and desktop apps.

Have you ever wondered how your user interacts with your website or application? Tools like Crazy Egg and even Google Analytics offer some insights for web pages, but what about desktop applications? Inspired by Firefox 3.6 Main Window Usage Study, we thought it would be interesting to gain insight into our user behavior through heatmaps. We implemented functionality to capture click events throughout the installation process and then compiled that data into heatmaps.

Needless to say, we were more than a little surprised by what we saw. Users were doing some very unusual things with static pages.  We were able to couple the heatmap results with our vast array of existing metrics and successfully improve the user experience based on user behavior and intent. Here are a couple of examples of what we found.

One example of how we used heatmaps was on the Yahoo! screen where people have the option of installing the Yahoo! Toolbar. The areas with orange and red are areas that were most clicked on, even though this is a static disclosure page. See anything interesting?  That’s right, many users were clicking on the image of the toolbar, in particular the search field. There could be a number of reasons for this, but our hypothesis was that the user was confused by the image, so we removed it and added textual information instead. The new version removes confusion about whether the screenshot was an actual toolbar or not and focuses more on taking the steps necessary to install the toolbar, still providing the necessary language to enable the user to make an informed decision. The results? Less confused users and big performance gains without affecting attrition.

Use Heatmaps to Guide You in Optimization

Another example of how W3i used heatmaps is on our proprietary recommendation engine, InstallIQ™. From reviewing the heatmaps, several areas of the installer were getting a large amount of unexpected clicks.

Notice the checkmark and the area around the checkmark at the bottom is a widely clicked area as is the progress indicator strip towards the top. In an attempt to improve the installation process for the user, we crafted a small instructional message that appears when these areas are clicked, informing the user what steps to take next. Again, we observed gains in performance.

Heatmaps Help You Improve the User Experience

Clearly, there is value in the knowledge gained from being able to track clicks within a process and taking a crack at getting a better picture of user behavior.  As with any optimization process, heatmap testing  is an iterative experience, so if you don’t see gains the first time keep trying, it will come.

Heatmaps are one of many  great  tools available to improve your process or application and aid in understanding your users behavior and intent.  If you’d like to know more about heatmap testing at W3i, please contact your Account Manager.  We’d love to work with you to reduce friction for your users.

Jessie Golombiecki, Marketing Specialist, W3i
Jessie uses her experience in internet marketing, graphic design and testing to lead the charge in marketing management optimizing all touchpoints with consumers.

Optimization Tips for Images

Make sure to use keywords in text for optimum SEO.

Okay, maybe “a thousand words” is stretching one picture’s SEO contribution but using the right words in the right places can improve your visibility in search. Search engines do not have the capability to see what a picture is, so you must tell them. Text can be used to translate your images to indexing robots and in turn, have the images appear in search.

The Image

When choosing images to use on a webpage there are a couple things to keep in mind.  Unique and interesting photos will show up more often in image search. However, the theme of the images must also match your pages’ content.

Imbed Keywords in the Source Code

Keywords and phrases can be imbedded into the source code for the image using alt attributes and image title attributes. Alt stands for alternate text; the alt attributes is a phrase that is shown when the graphic cannot be seen. It is also read aloud by text-reading software. Title attributes specifically describe in detail what the image is when a user scrolls over it. Be sure both attributes are rich with keywords that are relevant to the image.

Use Keywords for Image File Names

The file name of the image is also important. This is true of both the image file name and the folder name where the image is stored. Keep in mind when saving images that you should use the relevant keywords you plan to target. Also, there is a common misconception that underscores are read by bots as spaces.  This is not true; instead use a dash to indicate a space.

Captions

Forgive me for the obviousness of this hint but, yes, your captions are important.  Ensure that the captions not only describe the picture well but also make the picture relevant in context to the rest of the information on the page.

 Remember 

Image SEO is nothing without its habitat! Be sure if images are not the main attraction of your page, you optimize the surroundings first.

Heather Schmidt, Account Development Executive, W3i, LLC

Heather provides value to W3i’s partners by continually focusing on optimization and growth strategies.

Were you ever annoyed by an apps messaging or couldn’t determine any value so uninstalled it?  Make sure users don’t uninstall your application by asking the following questions putting yourself in their shoes:

Think about how to get the user to take action and what screens/messages top include in your app to get them to do so.

• Frequency/Timing
• Are you prompting action screens immediately, before the user starts using the app or are you delaying the action screen until an appropriate time during use?  You don’t want to overwhelm the user.
• Are you messaging the user subtly or are you overwhelming them with different messages? Don’t bombard the user, but make sure you are engaging them.
• Think about the purpose
• Is the action screen necessary? Can you combine two action screens into one if you are now using multiple screens? Can you minimize the messaging so it isn’t overwhelming, but still communicate to the user that you want them to take action?
• Location
• Do the action screens pop from the taskbar, in the browser or within the application?  Wherever the messages are popping, make sure that they make sense and feel integrated with the application.

• Functionality
• Does the application function correctly when installed with other applications?
• Does the application require additional software to be installed for the user to be able to use it?
• Does it do what it says it will do?
• Does the application work in all browsers and browser versions (if it is a browser add-on)?
• Does the application play nice with direct competitors’ applications or does the user suffer due to conflicting technologies?

Give the user Options

• Give users the option to put specific features of the application on snooze if the app pops during certain actions.  This can decrease attrition so be careful that it doesn’t decrease the use of the application too much.
• Give users the option to customize the application if possible. This allows users to make it fit their needs better and increases engagement making it less likely for them to uninstall.

Target

• Find ways to target users that are more likely to use your application. Many distribution channels will allow you to target different criteria.

When creating an application, it is important to keep all of these things in mind.  Usability should always be top of mind; you don’t want to spend resources creating something users will not value and uninstall.  Around W3i we have a saying:  “We did it that way yesterday but is it the right way today?”  Continual optimization gets the best results.

Have you learned any messaging tricks?  If so, please post in the comments.

Nicole Virnig, Account Development Manager, W3i, LLC
Nicole focuses on growing W3i business relationships, making sure the  client has what they need to make them successful. If they aren’t  happy, she isn’t happy.