However, after all was said and done, I managed to jump through my section of the presentation without any of this, in fact, I experienced more of the above symptoms during our dry-run than during the actual presentation. I'd like to thank everyone that gave me support before the presentation - it was much appreciated.
The Talk
We broke the talk into three parts:
- Business (Chris' bit, green slides)
- Design (Bryan's bit, orange slides)
- Development (My bit, grey slides)
Chris' section mainly focused on:
- Ensuring you have a plan. "If you fail to plan, you plan to fail"
- Build things for your target audience. Research your target so that you are delivering what they want or what will be useful to them.
- Creating personas for use-cases.
Bryan's section talked about the different stages of the design cycle for him and how it played out with our latest project (the redesign of our corporate website). He also talked about stock photography vs. custom-made graphics and free vs. paid video hosting.
My section, as you can guess, was about the development portion of the project. However, instead of talking about my coding practices during the first stage (the initial development) of the project, I decided to focus on what took place POST launch.
Technological Upgrades
After the initial launch of our website, we were required by upper management to incorporate a corporate-branched version of the popular .less CSS library. If you've never heard of .less, it is a compiled CSS library that allows you to write custom functions, use mixins, declare variables, and do mathematical equations that get compiled down into a regular CSS file. If you haven't heard of .less, you may have heard of it's "rival" SASS. From what I've heard, both are fairly similar in their functionality. Either way you go, you should check compiled CSS out, its pretty sweet.
Now since I had to change the site to use different CSS anyways, I thought I'd take the opportunity to upgrade our website to be HTML5 compliant. I got the knowledge required to build an HTML5 page from the book: "Introducing HTML5 (2nd Edition)" by Bruce Lawson and Remy Sharp. The book is very simple to read and gets into the stuff you need to know right away. Best part is, its only like $35 CAD.
In order to ensure what I was putting out there was in fact HTML5 compliant, I made use of a couple of online HTML5 compliance checkers. In addition to ensuring your code is up-to-snuff, they check to ensure you not forgetting to do things as well (ex. Adding an 'alt' tag to your images):
Increasing CTRs and A/B Testing
As with any company on the internet trying to make money, increasing the number of interactions with your call-to-actions is very important. But before you can improve your CTR, you need to know how well your performing currently. Google Analytics is very useful at tracking button clicks (if you have it set to do so). Chris (I believe) also had another suggestion. He had heard of this site called CrazyEgg, a web tool like Google Analytics that gives you detailed graphical reports of where users are clicking on your site.
For us, Heatmaps of where people are clicking were useful but we made the most use out of Scrollmaps. If you are unaware, a scrollmap shows where visitors who come to your page see the most. If you see the bottom screen from the pic above, you'll see the bright yellow/white area. That is where people see the most, and the darker areas are seen far less.
When it came to increasing our CTRs, we noted that on the first page we wanted to improve that the call-to-action was in the darker area of scrollmap. This helped us create an appropriate design with a better button layout in mind.
Next was to actually test a new set of page variations. Google has built into Google Analytics a section called "Experiments". It allows you to setup an A/B test and see the results within Google Analytics (If you've NEVER heard of A/B testing, read this). The only things you need to setup a Google Experiments test are:
- A website using Google Analytics
- A page you want to improve
- At least one variation of the page to test
- A Google Analytics goal for the test to track results against
As you can see for our test we ran two variations against the original. The difference between the variants is the text on the call-to-action.
By looking at the "compared to original" column we can easily see that putting the button in the areas seen by consumers has a very large impact on the number of clicks a button receives (surprise! surprise!). From there we can see that the text in A was highly favored over B.
Remember, when running an A/B test simple variations, the more drastic the change, the longer it requires to get an accurate result. Here is a simple calculator to give you an idea of time lengths: http://visualwebsiteoptimizer.com/ab-split-test-duration/
Search Engine Optimization
SEO, for the uninitiated, is tweaking your website so that it sits as close to the top of a search engine's search results as possible. Since web technologies and standards are changing constantly, SEO is probably one of those things that I'm sure everyone will be battling forever. Not being an SEO expert myself, we made use of a tool called WooRank.
WooRank programmatically checks your website for many of the things that major search engines use to help determine the validity of your website.
The site grades you on many different factors that can increase your SEO ranking and others that are nice-to-haves or old SEO factors that are simply good practice. In addition to that, WooRank also gives you an idea of how your website is stacking up from a mobile perspective, social media integration, and security. The service isn't free but you can generate a free report for your website once per week.
Other Useful Tools
Web Page Test
This site, while not pretty, is another site that programmatically evaluates your website. This time its for page load times, caching, CDN use, etc. All those fun things that a web host needs to think about.
UsabilityHub
A nifty Karma-based tool that allows you to submit your designs to be scrutinized by different people. You can do 5-second tests, click tests, and nav-flow tests. By completing tests for others, you earn slots for others to test your designs. During the presentation, one question we had was "how do you determine if your designs are good?", this can help with that. The feedback I've received on it has been pretty decent so far.
UserTesting
While we didn't use this too for this project, I've used it in the past to help us come up with designs for product redesigns. You can have people connect to your site and complete a number of tasks. While doing so, the software is recording their screen session as the user speaks into their microphone. I've had some FANTASTIC feedback from people using our products for the first time. But take that with a grain of salt, because you can just as easily get really bad responses. However, we've submitted the few really bad ones to the powers that be and they gave refunds. The users are paid to do the service, so its in their best interest to give meaningful feedback.
I hope any of these tips/tools can help you with your website improvements. They sure helped us.
