Learning How To Design

by Melvin Ram on May 25, 2013

There was an interesting question posted on the Hacker News site earlier today:

Dear HN, I am a decent Rails/HTML/JS/iOS/Android/C# programmer. I want to be able to do a project from beginning to end (web+mobile), but I never have any idea what I need to make responsive wordpress templates should look like. How can I learn design?

Design is an interesting art. It’s a balancing act between function and form. Doing either well is a challenge and doing both well usually requires a lot of practice and experience. I reflected on how I’ve been able to get to where I am today, and the following was my advise for od2m, the asker of the question:

Admire. Emulate. Innovate.

admire-artADMIRE

When you’re starting off, you’re not going to be able to create amazing looking stuff because you don’t know how to and you won’t necessarily know what is good. The first thing I recommend you do is build up your pallet and figure out what you like. If you don’t know what is good, look at work that others say is good and observe what they have in common and how they make you feel.

elvisEMULATE

Once you start to get a sense of what you like, next recommendation is learning the raw skills needed to do what you need. In your case, knowing how to do all the things you’ll need to do, such as how to create a box with rounded corners, or gradients. With that knowledge, start trying to recreate work that you admire and try to get as close to it as possible. As you do this repeatedly, you’ll start noticing different patterns and choices the “original” designer had utilized. At this stage, you’re simply trying to walk a mile in their shoes.

innovateINNOVATE

As you become comfortable at emulating styles and feel a decent level of mastery over the skills required, you’ll automatically start to have thoughts about how you might want to try doing things differently. Try it. Most of what you do will be shit. Allow yourself to create shit. Keep trying things and you’ll build up your own style, taste and sense of what should take priority.

{ 0 comments }

Building brand awareness is an important component of marketing, particularly if you don’t have a set of effective inbound marketing strategies, such as PPC & SEO. When thinking about Download wordpress themes strategies and tactics for building brand awareness, you can do the direct brand connection route where the brand is prominently featured. Three examples of this are the Will It Blend, Old Spice and the Dollar a Day Shave Club commercials/videos:

Will It Blend

Old Spice – The Man Your Man Could Smell Like

DollarShaveClub

The other road you could go down is where you build brand aware through association with something else that is interesting, inspirational, famous, funny or otherwise attention grabbing. Usually, you’re tapping into a subject matter that is bigger than your brand. It’s a lot riskier because you’re not focused on driving sales. Instead, you’re shaping perception. Chrysler has done this superbly with their last 3 superbowl commercials.

Halftime in America

http://www.youtube.com/watch?v=_PE5V4Uzobc

Detroit – Eminem

Jeep – Whole Again

http://www.youtube.com/watch?v=FadwTBcvISo

A few others that do this well:

CanDo

Apple – 1984

{ 0 comments }

Clear Contrast is Critical To Reduce Confusion

by Melvin Ram on March 26, 2013

When you’re selling multiple products or products that come in variations, it’s critical to reduce confusion by highlighting the differences between what you’re offering. Gateway is a computer brand that has faded away with time. I tumbled upon their website earlier and it does such a terrible job at communicating what they are offering that it says nothing at all to a consumer. Consumers are smarter and have a bullshit-o-meter that is set to hypersensitive.

In the video below, I walk through why their current site is terrible and compare it with a competitor’s website that clearly highlights the Free templates download difference between it’s products so that a potential customer can make a decision, instead of clicking away due to frustration and confusion. http://www.youtube.com/watch?v=ros3ZuFZLbc

{ 0 comments }

PayPal Redesigns It’s Website

by Melvin Ram on June 21, 2012

PayPal is the 500 lb gorilla in the online payment world. Some people love them. Some hate them. However, one thing almost everyone who visited their site would tell you is that it looked like it was designed in the early 2000′s, which is Internet equivalent of a movie that was created in the 1950′s.

Here’s what it used to look like:

Today they’ve brought their home page and a couple other pages of their site into 2012. Here’s the new look:

A couple things you should notice about their new design:

  1. They have adopted the billboard layout that we’ve been touting for a while. This consists of a logo & navigation at the top, billboard with action item in the middle, interest areas that take you to the most important parts of your site right below it and ends with a thin or fat footer. See examples at StratoCommunications.com, Tricision.com and others.
  2. In addition to adopting the billboard website layout, their billboard accommodates wide screen monitors. The key rational for this is that monitor sizes and resolutions are climbing. Instead of wasting real estate on the left and right of a site, you can use it appropriately with a larger billboard that gives you a wow feeling when you see the beautiful photograph in all it’s glory.

There are a few things about the site that I would have done differently:
custom web design chicago

  • The call to action is outside the normal flow of the eye. I would have moved that box to be right underneath the headline and subheadline.
  • The Personal / Business tabs at the very top are sort of getting lost up there. I would have added an icon or a color or something to bring a bit more attention to it.
  • As beautiful as the photograph is in the billboard, it doesn’t quiet communicate much. Your billboard should overtly communicate a message that is directly related to your unique value proposition. I’m going to give them the benefit of the doubt and assume PayPal’s team will be updating the billboard to be more on message in the near future.

Overall, it’s a very welcome redesign. I hope they don’t stop with just the home page but instead will roll out the design to their entire application.

{ 1 comment }

Rogue Martial Arts Redesign

by Melvin Ram on May 8, 2012

We’ve just completed a website redesign for Rogue Martial Arts, a progressive fighting dojo that focuses on jeet kune do and kali. Their primary objective with this redesign was to increase the overall professionalism of the company and attract more students to the school. We lead the site with an attention grabbing photo of a man defending himself from an attack and focused on communicating their positive points of difference, which for Rogue Martial Arts was that their instructors are credentialed, they teach practical information and their class sizes are limited 4 people, which allows for faster learning. Below is a before and after of the design.

Before Redesign

Custom Web Design Services

{ 2 comments }

UPDATE: Matt Cutts of Google joined in on the discussion over this article at Hacker News. Looks like a site that was sitting on a sub-domain was indeed hacked and that had triggered the warning. Matt stated in plain language that the split testing approach that I described does NOT trigger the warning.

tl;dr: I setup 2 different pages with different url’s that I wanted to test. The VWO javascript automatically redirected equal portions of the traffic to the test pages. Google marked my site as being compromised. I double checked everything and there wasn’t a sign of a compromise. Through process of elimination, I suspect it was redirecting of the page through javascript that triggered the warning sign.

I’m a big fan of testing and my tool of choice is Visual Website Optimizer. It can help you make more money and it can prevent you from making costly decisions. However, today I’d like to throw in a word of caution when doing conversion rate optimization.

There are a few different ways to do a/b split testing.

Server-Side Variations

This is where you make changes to the page on the server, before it’s sent to the visitor’s browser.

The advantage of this approach is that the page that is sent back is what is displayed to the end user. In addition, you have a lot of control on what exactly gets sent back to the visitor.

The disadvantage of this is that it’s complicated to implement. There are helpful tools like A/Bingo available but it means that you’re going to need to get a web developer involved.

Client-Side Variations

The alternative to server side variations is client side. Using the power of javascript, tools like Visual Website Optimizer & Optimizely will allow you to make fine grain changes to your page and present the different variations as needed.

The advantage of this approach is that it’s a lot less work, a non-programmer can actually get started with testing in less than 10 minutes and it’ll work on pretty much all modern browsers.

The disadvantage is that the page sent back may be different than what is displayed and Google might not like that. So far, they’ve been okay with it from what I can tell.

Conversion Rate Optimization is critical to optimizing the ROI from Adwords campaigns and I believe it’s in Google’s best interest (both from a visitors perspective and an advertisers) to encourage testing.

Split Page Variations

This approach is sort of a hybrid of Client-side and Server-side variations. Here’s how it works. Let’s say you want to test your landing page at yourdomain.com/landinag-page. You would create additional pages and using javascript, the visitor would be redirected to one of the pages. This allows you to keep things simple on the server side and tools like Google Website Optimizer, Visual Website Optimizer and others can help you equally split up your traffic between the different pages and track the conversion rates for each page. This is how split testing actually used to be done when it started getting popular and is continued in a number of different tools.

Inspiration For My Test

A few days ago I watched an excellent webinar on MarketingExperiments.com called The 5 easiest changes to make to your landing pages right now. (For those interested, here’s a mindmap of what was covered.) After watching the video version of the webinar, I decided to do what I normally do when I have/gather an idea: test, test, test! This was at 4 in the morning so I created a design. This turned into a variation of the home page at is visible here. After looking at for a bit longer, I made some more changes and created this version (which is currently the home page.) Happy with how it looked and sounded, I went into Visual Website Optimizer and prepared the test.

Setting Up The Test

Since the pages were so different, I decided to use the split page approach. I setup the test to ignore everyone that are probably not prospects by excluding everyone who isn’t in the US, UK, Australia or New Zealand and excluding everyone who visited the site using a search phrase that didn’t demonstrate that they had the intention to buy. For example, we offer a coupe popular free WordPress themes called Motion and Pixel. I excluded everyone that visited the site by searching for “motion” or “pixel” or “wordpres” or theme, etc. When it was all setup, people who would participate in this test would be good potential clients. After making sure that everything was setup properly, I activated the test.

What Happened After Test Went Live

Visitors started visiting the site and the numbers started rolling in. All was good. I took off for the day and worked on client projects. On the way back home that afternoon, I decided to do a quick sanity check on Google for my rankings. We rank well for a few terms and I’ve developed a habit of verifying where we’re placed every morning and evening. Usually, I search on my phone, verify it’s there and close the browser but this time wasn’t as simple. When I did a search, I saw this:

“This site may be compromised” freaked me out and my gut reaction was “F***!” I raced to the nearest Starbucks so I could get on my laptop and see what was going on. I was also pissed at Sucuri as I had paid them specifically so they could tell me if my site ever got compromised and here I was finding out from Google instead.

When I got on my laptop, I logged into Webmaster Tools. This where Google communicates with site owners about their sites. I logged in and sure enough, there was a message in there. Here’s the message:

Dear owner or webmaster of http://www.webdesigncompany.net/,
We are writing to let you know that some pages from http://www.webdesigncompany.net/ will be labeled as potentially compromised in our search results. This is because some of your pages contain content which may harm the quality and relevance of our search results. It appears that these pages were created or modified by a third party, who may have hacked all or part of your site. Many times, they will upload files or modify existing ones, which then show up as spam in our index.

The following are some example URLs which exhibit this behavior:

  • http://www.webdesigncompany.net/wp-includes/js/comment-repl

These URLs are using practices which do not follow our quality guidelines, which can be found here:http://www.google.com/support/webmasters/bin/answer.py?answer=35769&hl=en.

We encourage you to investigate this matter in order to protect your visitors. If your site was compromised, it’s important to not only remove the malicious content from your pages, but also to identify and fix the vulnerability. Note that in many cases, this malicious content is hidden through a process known as cloaking. To learn what cloaking is, seehttp://www.google.com/support/webmasters/bin/answer.py?answer=66355&hl=en. You can confirm if your site is cloaking by using the Fetch as Googlebot tool:http://www.google.com/support/webmasters/bin/answer.py?answer=158587&hl=en. A good first step towards resolving the problem is to contact your web host’s technical support for assistance. It’s also important to make sure that your website’s software is up-to-date with the latest security updates and patches. More information about how to fix your site can be found at:

http://www.google.com/support/webmasters/bin/answer.py?answer=163634&hl=en

Once you’ve made sure your site is clean and secure, you can request reconsideration by going tohttps://www.google.com/webmasters/tools/reconsideration?hl=en.

Sincerely,

Google Search Quality Team

Specifically, it told me that a core WordPress file was the culprit. I opened up the file but I saw no signs of compromise. I looked through the rest of the site and did a fine grain search through the code for all the popular type of WordPress hacks. Nothing showed up.

I decided to download a copy of the site and reinstall WordPress to make sure the site was 100% clean. After the reinstall, I downloaded a second copy of the site and compared it. Both copies were identical. I used the Google Fetchbot and the results looked clean. Hmm! I was stumped. I decided to take a break so I could get some distance from the problem.

When I got back an hour later, I remembered that I had started the testing campaign earlier today and that a lot of times, malware on websites use the same technique to redirect visitors. That’s when it hit me. Google was thinking that I was compromised because my testing code was automatically redirecting a certain percentage of users. Another reason I think this might be the case is that the site isn’t blacklisted and Google’s Webmaster Tools doesn’t say that there are any malware on the sites. I immediately stopped the test and submitted the site for reconsideration. I don’t have anything to back this up but it’s the only thing that makes sense. If this is true, than Sucuri is at no fault.

Anyone else see something that I don’t?

{ 5 comments }

Know Your Customers

by Melvin Ram on January 7, 2012

I came across the following joke and though it was pretty funny and communicated the concept of “Know Your Customers” really well by showing what not to do:

A disappointed salesman of Coca Cola returns from his Middle East assignment.
A friend asked, “Why weren’t you successful with the Arabs?”
The salesman explained, “When I got posted in the Middle East, I was very confident that I will makes a good sales pitch as Cola is virtually unknown there. But, I had a problem I didn’t know to speak Arabic. So, I planned to convey the message through 3 posters…

First poster, a man crawling through the hot desert sand…
Totally exhausted and panting.

Second poster, the man is drinking our Cola and

Third, our man is now totally refreshed.

Then these posters were pasted all over the place”
“That should have worked,” said the friend.
The salesman replied, “Well, not only did I not speak Arabic,
I also didn’t realise that Arabs Read from Right to Left…”

{ 1 comment }

How To Run Tests On Just Your Target Audience

by Melvin Ram on May 10, 2011

I’m a big fan of testing and one tool that I like to use is Visual Website Optimizer (VWO). It allows you to quickly and easily create variations of your pages, split the traffic to these variations and see which ones perform better.

One of the challenges we faced when using VWO on our website was that a large enough percentage of our visitors come from countries that we’re not likely to do business in. This means that any tests we run will be skewed and not truly representative of how my core audience would interact with our website. VWO allows you to segment your tests by a variety of factors but country isn’t one of them yet… so I came up with my own temporary fix until VWO offers a better way.

Integrating MaxMind with Visual Website Optimizer inside WordPress

MaxMind.com offers a service that allows you to convert an IP address into a country code. For $20 per 200,000 queries, you’re able to basically detect which country your visitor is coming from. When you purchase a license from MaxMind, they’ll provide you a license key. When in your functions.php file of your theme, you can add the following:

function what_country_is_visitor_from($license_key, $ipaddress){
  $query = "http://geoip3.maxmind.com/a?l=" . $license_key . "&i=" . $ipaddress;
  $url = parse_url($query);
  $host = $url["host"];
  $path = $url["path"] . "?" . $url["query"];
  $timeout = 1;
  $fp = fsockopen ($host, 80, $errno, $errstr, $timeout);
  if ($fp) {
    fputs ($fp, "GET $path HTTP/1.0nHost: " . $host . "nn");
    while (!feof($fp)) {
      $buf .= fgets($fp, 128);
    }
    $lines = explode("n", $buf);
    $country = $lines[count($lines)-1];
    fclose($fp);
  } else {
    # enter error handing code here
  }
  return $country;
}

function add_vwo_code_based_on_country(){ 
  $license_key = "YOUR LICENSE KEY";
  $ip = $_SERVER['REMOTE_ADDR'];

  $country = what_country_is_visitor_from($license_key, $ip);

  $tracked_countries = array("US", "AU", "NZ", "CA", "UM", "GB");

  if ( in_array($country, $tracked_countries) && ( !(is_user_logged_in()) ) ) { add_vwo_code(); } 

}

function add_vwo_code(){ ?>

  <!-- Start Visual Website Optimizer Code -->
    Code provided by VWO
  <!-- End Visual Website Optimizer Code -->

<?php }

add_action("wp_head", "add_vwo_code_based_on_country");

In the above code, there are 3 parts you’ll need to customize and they have been highlighted in green. The first is the license key that MaxMind provides, the second is the array of countries that you’d like to test and the third is the code that VWO provides to add to your site.

Now even though I’ve shown just how to use VWO, you could replace the tracking code of other systems and achieve the same effect. Happy testing!

{ 2 comments }

Fix Your No-Show Problem

by Melvin Ram on April 12, 2011

If your time is important to you, you know that no-show appointments with customers and potential customers is costly and frustrating. Even though we know this is a problem, it’s time consuming to consistently call to confirm an appointment. Most of the time, you end up haggling with a voice mail system and wasting a ton of time.

Recently I did a website billboard for a client of mine who was launching a new software that aims to fix this problem by automating the appointment reminder part. I was talking with Patrick, the lead developer on the project and he mention that customers are now experiencing a near-zero no-show rate. Almost everyone either shows up on time or reschedules ahead of time.

The best part of the system is that you don’t need to spend a few thousand to get started. Just visit www.appointmentreminder.org and sign up for a free 30 day trial. I’m sure you’re going to love it.

{ 0 comments }

Grab Attention Immediately

by Melvin Ram on April 2, 2011

As web designers, we constantly face a challenge that I’d like to discuss here today: how can we grab the attention of visitors coming to our website when in reality, all these visitors are different, have different needs and looking for different information. What would normally be attention grabbing for one audience would cause another to yawn and reach for their blue mountain coffee. So what’s the solution?

The key to grabbing the attention of multiple audiences is to identify the top segments and address them directly so they know you are speaking with them. This is usually done using pictures that they could see themselves in and/or mentioning their job title or their core problems.

On the home page, what we typically like to do is mention the specific industry or job title of the audience and make that area clickable so that they can follow down that road of a customized marketing message.

{ 0 comments }