Posterous theme by Cory Watilo

Filed under: Web Development

5 Necessary Tools For Measuring Your Web Startup

If you aren't properly measuring your business, than you're running a blind operation. You might as well not spend any money working on optimization, adding new features, marketing, etc. Below are five tools to help you properly measure your website, beginning with the initial design mockup, then measuring product/market fit, and lastly measuring and optimizing a scalable marketing campaign.

Media_httpryanglasgow_pkyyd

1. AttentionWizard: When I first saw this product demoed at TECHCocktail in San Diego, I didn't understand how they could produce heat maps without tracking software. Little did I know Tim Ash has assembled a team of PhD researchers and have developed sophisticated proprietary technology to generate a heat map from a mere Photoshop mockup. The AttentionWizard product is something every designer should be using, and gives you measurable feedback before you write a line of code. The algorithm looks for color contrast, faces, and images, and produces a detailed heat map along with the number of steps the eye will follow when a person first arrives on your webpage. The software offers a free version where you get one upload per day, and with its claimed 70%+ accuracy, it's certainly a service every designer should be integrating into his or her design process.

Media_httpryanglasgow_grfbn

2. CrazyEgg: Most web designers have heard of CrazyEgg, but few utilize it. Many designers instead opt for the Content Overlay in Google Analytics, but the important difference between the two is that CrazyEgg records every click, including non-links. After installing the tracking code on a recent project I've been working on, I discovered users were clicking on a spot that appeared to be a button, but was instead a background image and linked nowhere. Discovering exactly where your users click, even if it's a non-clickable link, is an important measurement and something Google Analytics cannot tell you. Clicks can also be broken down by several types, such as referral source, ad campaign, browser, operating system, and you can even set your own custom variables. Even though CrazyEgg isn't a comprehensive service, its' affordable $9 starting price makes it a bargain.

Media_httpryanglasgow_gzukr

3. ZenDesk: I'm sure you've heard of GetSatisfaction or even UserVoice, but few have heard of ZenDeck for gathering customer feedback. ZenDesk is much better value than both UserVoice and GetSatisfaction, and doesn't require your users to login to leave a simple feedback comment. GetSatisfaction forces users through multiple steps to leave simple feedback or support requests, and will certainly limit communication with users. Also new startups will have little success by using feedback forums such as GS or UV, because they'll be empty. ZenDesk allows you to work with your early users directly which is crucial for customer development. With popular clients such as Twitter, Yammer, and Scribd, and integration with popular tools such as SalesForce, Basecamp, and Harvest, it's hard to argue why you should use anyone else. For $9/month, it's certainly worth the test-drive.

Media_httpryanglasgow_wjazg

4. KISSMetrics: KISSmetrics is the new darling of the metrics industry, and after 2 product pivots, seem to have finally built a product users are excited about. Using the websites setup wizard is a breeze but provides little actionable data and you'll find yourself wondering why the service has such raving fans. To actually generate useful and helpful data, you'll need to get your hands dirty and setup a customized implementation with custom variables. If you're looking for a more detailed write-up, Ash Muarya has written a more detailed description of KISSmetrics on his blog.

Media_httpryanglasgow_gxmjc

5. KISSinsights: Originally located at Survey.IO, Sean Ellis and the KISSmetrics team have built KISSinsights: a new feedback service that allows you to ask specific questions to your users as a pop-up while they're browsing your website. The service just left Beta, and is now publicly available for consumption. The service includes 30+ survey templates and 2 free surveys with up to 30 responses each. Out are the long-winded customer surveys and in are the short specific feedback questions that only grab the important data points. KISSinsights' service is a win-win for developers because the service focuses on what the developer needs to know, and saves the customers time by allowing them to answer a single question. That single question that many developers, and Sean himself, have been using the service is for measuring product/market fit: "How dissappointed would you be if you could no longer use this website?". This the question has become the defining point for entrepreneurs following lean startup and customer development principles, and KISSinsights is based off this methodology.

The Importance of Interface Design

Designing interactions was previously considered an afterthought. Software and hardware engineers designed and built a functional system that was held together by an interface. Products were often powerful, yet confusing and there was a gap between the user and a functioning product. The interface was largely missing, and recently there has been significant improvement amongst all interface design. Industrial Engineers, such as CEO Mark Hurd of HP have improved office work flow by studying and improving an employee’s interaction between his or her own environment. Design firms such as IDEO and XEROX Parc have improved the connection between a consumer and a tangible product while companies like REGIONAL are improving urban interfaces such as their recent study and interface improvement between the Cuban government and its citizens.  The interface was a relatively unknown concept fifty years ago, yet recently it has begun to merge with traditional design.

Design has always carried an artistic notion, and many designers (i.e. web designers), have artistic backgrounds. By applying the artistic principles, such as shiny buttons, colorful logo’s, and fancy backgrounds, is an interface being created?  One could approach the problem from the other end, and ask if programmers throwing data onto a page creates an interface. An interface is an interconnection between systems, equipment, concepts, or human beings. IDEO has become successful because they are able to bridge this gap and create a path for the user to easily access the system. This missing gap that has been ignored for so many years is finally being grasped and integrated into traditional academic learning, such as with Stanford’s D.School. Interface design is no longer an afterthought, but rather a specific role that bridges a graphical front-end to the underlying information. Web designers are starting to question the placement of buttons, form fields, text layout, and use colors, various fonts, and gradients to create an eye-flow with end goals such as signing up for a newsletter or purchasing a product. The most successful companies are not the most elegant, but rather have a superior underlying system and a usable interface.

Google and Apple are all two companies with excellent interface design. Each is successful because it not only has a superior product, but a user can access the information. A powerful system and a well-designed interface rely on each other, and are equally important. A robust feature set is pointless if it is not usable, and a beautifully designed interface needs to bridge somewhere. One could argue Google’s products, such as its search homepage are boring, but it has the ingredients for success. Apple is an often-studied company for its excellence in design because it can boast exceptional interfaces throughout its computer software and hardware. The interfaces, both tangible and intangible, are both easy to use and understand. But why? Simplicity. Critics often claim Apple’s products are for novice users and Apple “dums down” the products, yet that’s the innovation behind a well-designed interface. It breaks down a complex information structure and allows one to easily interact with it, understand it, play with it, access it. How useful is a feature if no one can use it? It’s fair to argue one can do more with a simplified interface such as a Mac, than a complex, difficult, “advanced” interface, such as a Microsoft Windows. To design an elegant and usable interface, designers have begun to design from the bottom-up.

Wireframes, focus groups, card indexing exercises, and paper prototyping have all become rising stars amongst software and web design. Designers are beginning to use the artistic aspects of design to enhance an interface. An exercise I conducted recently for a client began by ranking their company colors by brightness, for brighter colors have a greater ability to pull the eye: green, orange, and gray. I had several target users vertically rank/sort every page element the client had requested on the page, and asked what they wanted to see first, down till the webpage element they wanted to see last. Site title was first, followed by site navigation, page title, and so on. After they ranked the items, I designed a wire prototype largely based on this feedback using a layout program called Omnigraffle. The design was pure layout, and was still black and white boxes. After I designed the layout, I had the same users group each page element into three categories: very important, somewhat important, and least important. I went to my wire frame layout, and applied the most eye-catching palette color (orange), to any “important” page element, the secondary palette color (green), to any “somewhat important” element, and finally the tertiary palette color (gray), to the least important elements. The result was a page layout designed to flow with the eye, but used color to highlight the most important items as the eye shifted from left to right, top to bottom.

A bottom-up approach to interface design? I think so!

SEO Site Checklist

I took some time to write up an SEO site checklist for my friend Adnan over at CarThrottle.com. I figured I would post it here for the rest of the readers. I didn't go into detail about each step, so feel free to ask any questions in the comments below. These are the basic steps every web developer should go through once a website is launched, and should never be overlooked or skipped.

Site Profiling 1 Hour Create website profile and cull data such as backlinks, pagerank, site strengths/weaknesses, broken links, analytics breakdown, industry or product information, and competitor analysis.

Keyword Analysis 2 Hours Research and create a full list of relevant keywords and long tail phrases to use for keyword content, PPC campaigns, Google Trends, and meta data rewriting

Rewrite Meta Data 2 Hours Using keyword analysis create page specific dynamic page titles, description, keywords and other page meta data.

Fix HTML Tags 3 Hours Add HTML tags to pages. Key tags include alt, title, abbreviation, link, heading, paragraph, and (no)follow.

Optimize Page Content 3 Hours Add keyword density to page content (under 3%), create fresh content section, rich product descriptions, reduce text in images, check for duplicate content, and optimize intra-site linking.

Robot Profiling 2 Hours Run Lynx robot browser test, create and submit XML sitemap, robots.txt, rewrite page URL’s, 301 redirects, custom 404 errors, specify canonical URL, and setup Google Web Master.

Basic Directory Submission 2 Hours Add website listing to general directory list, specifically DMOZ, as well as research and submit to niche industry directories.

Estimated Total: 12-15 Hours Also if you have a WordPress blog there's a lot you can do that is specifically for the publishing platform, and I'll post more details about that later.

If anyone is interested in SEO work for their own website please contact me, and I can create a proposal along with a cost estimate.